refactor: migrate to <script setup>

src/components/AppHeader.vue

@@ -1,3 +1,23 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useColorModes } from '@coreui/vue'
+import AppBreadcrumb from './AppBreadcrumb'
+import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+const headerClassNames = ref('mb-4 p-0')
+const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+
+onMounted(() => {
+  document.addEventListener('scroll', () => {
+    if (document.documentElement.scrollTop > 0) {
+      headerClassNames.value = 'mb-4 p-0 shadow-sm'
+    } else {
+      headerClassNames.value = 'mb-4 p-0'
+    }
+  })
+})
+</script>
+
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
@@ -83,37 +103,3 @@
     </CContainer>
   </CHeader>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-export default {
-  name: 'AppHeader',
-  components: {
-    AppBreadcrumb,
-    AppHeaderDropdownAccnt,
-  },
-  setup() {
-    const headerClassNames = ref('mb-4 p-0')
-    const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-
-    onMounted(() => {
-      document.addEventListener('scroll', () => {
-        if (document.documentElement.scrollTop > 0) {
-          headerClassNames.value = 'mb-4 p-0 shadow-sm'
-        } else {
-          headerClassNames.value = 'mb-4 p-0'
-        }
-      })
-    })
-
-    return {
-      headerClassNames,
-      colorMode,
-      setColorMode,
-    }
-  },
-}
-</script>