From f8def494b1fde2012906562950d16a4149908943 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 27 Sep 2023 12:16:58 +0200
Subject: [PATCH] refactor: update layout

---
 src/components/AppBreadcrumb.vue |  2 +-
 src/components/AppHeader.vue     | 25 ++++++++++++++++---------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index 53b29cdc..b935c4cc 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <CBreadcrumb class="d-md-down-none me-auto mb-0">
+  <CBreadcrumb class="my-0 ms-2">
     <CBreadcrumbItem
       v-for="item in breadcrumbs"
       :key="item"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index d32a9ed3..f02de7c1 100644
--- a/src/components/AppHeader.vue
+++ b/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,