refactor: update layout

src/components/AppHeader.vue

@@ -1,12 +1,9 @@
 <template>
-  <CHeader position="sticky" class="mb-4">
+  <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom" fluid>
       <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
-      <CHeaderBrand class="mx-auto d-lg-none" to="/">
-        <CIcon :icon="logo" height="48" alt="Logo" />
-      </CHeaderBrand>
       <CHeaderNav class="d-none d-md-flex me-auto">
         <CNavItem>
           <CNavLink href="/dashboard"> Dashboard </CNavLink>
@@ -43,11 +40,7 @@
         <CDropdown variant="nav-item" placement="bottom-end">
           <CDropdownToggle :caret="false">
             <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
-            <CIcon
-              v-else-if="colorMode === 'light'"
-              icon="cil-sun"
-              size="xl"
-            />
+            <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="xl" />
             <CIcon v-else icon="cil-contrast" size="xl" />
           </CDropdownToggle>
           <CDropdownMenu>
@@ -96,6 +89,7 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import { useColorModes } from '@coreui/vue'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
@@ -107,10 +101,23 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const headerClassNames = ref('mb-4')
     const { colorMode, setColorMode } = useColorModes(
       'coreui-free-vue-admin-template-theme',
     )
+
+    onMounted(() => {
+      document.addEventListener('scroll', () => {
+        if (document.documentElement.scrollTop > 0) {
+          headerClassNames.value = 'mb-4 shadow-sm'
+        } else {
+          headerClassNames.value = 'mb-4'
+        }
+      })
+    })
+
     return {
+      headerClassNames,
       logo,
       colorMode,
       setColorMode,