From 9fcca654fb1f705c92180168234d1ed35a75d525 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 26 Sep 2023 23:35:16 +0200
Subject: [PATCH] refactor: update layout

---
 src/components/AppHeader.vue  | 17 ++++++++--------
 src/components/AppSidebar.vue | 37 ++++++++++++++++++++---------------
 src/layouts/DefaultLayout.vue |  2 +-
 src/styles/_custom.scss       | 34 +++++++++++++++++++++++++++++++-
 src/styles/_layout.scss       | 16 +++++++++++++++
 5 files changed, 79 insertions(+), 27 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 7b3d9fb8..d32a9ed3 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <CHeader position="sticky" class="mb-4">
-    <CContainer fluid>
+    <CContainer class="border-bottom" fluid>
       <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
@@ -42,9 +42,9 @@
         </li>
         <CDropdown variant="nav-item" placement="bottom-end">
           <CDropdownToggle :caret="false">
-            <CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
+            <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
             <CIcon
-              v-else-if="getColorMode() === 'light'"
+              v-else-if="colorMode === 'light'"
               icon="cil-sun"
               size="xl"
             />
@@ -52,7 +52,7 @@
           </CDropdownToggle>
           <CDropdownMenu>
             <CDropdownItem
-              :active="getColorMode() === 'light'"
+              :active="colorMode === 'light'"
               class="d-flex align-items-center"
               component="button"
               type="button"
@@ -61,7 +61,7 @@
               <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
             </CDropdownItem>
             <CDropdownItem
-              :active="getColorMode() === 'dark'"
+              :active="colorMode === 'dark'"
               class="d-flex align-items-center"
               component="button"
               type="button"
@@ -70,7 +70,7 @@
               <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
             </CDropdownItem>
             <CDropdownItem
-              :active="getColorMode() === 'auto'"
+              :active="colorMode === 'auto'"
               class="d-flex align-items-center"
               component="button"
               type="button"
@@ -89,7 +89,6 @@
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
-    <CHeaderDivider />
     <CContainer fluid>
       <AppBreadcrumb />
     </CContainer>
@@ -108,13 +107,13 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
-    const { getColorMode, setColorMode } = useColorModes(
+    const { colorMode, setColorMode } = useColorModes(
       'coreui-free-vue-admin-template-theme',
     )
     return {
       logo,
+      colorMode,
       setColorMode,
-      getColorMode,
     }
   },
 }
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 2cb1703a..e6acb988 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,5 +1,6 @@
 <template>
   <CSidebar
+    class="border-end"
     position="fixed"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
@@ -11,23 +12,27 @@
         })
     "
   >
-    <CSidebarBrand>
-      <CIcon
-        custom-class-name="sidebar-brand-full"
-        :icon="logoNegative"
-        :height="35"
-      />
-      <CIcon
-        custom-class-name="sidebar-brand-narrow"
-        :icon="sygnet"
-        :height="35"
-      />
-    </CSidebarBrand>
+    <CSidebarHeader class="border-bottom">
+      <CSidebarBrand>
+        <CIcon
+          custom-class-name="sidebar-brand-full"
+          :icon="logoNegative"
+          :height="32"
+        />
+        <CIcon
+          custom-class-name="sidebar-brand-narrow"
+          :icon="sygnet"
+          :height="32"
+        />
+      </CSidebarBrand>
+    </CSidebarHeader>
     <AppSidebarNav />
-    <CSidebarToggler
-      class="d-none d-lg-flex"
-      @click="$store.commit('toggleUnfoldable')"
-    />
+    <CSidebarFooter class="border-top">
+      <CSidebarToggler
+        class="d-none d-lg-flex"
+        @click="$store.commit('toggleUnfoldable')"
+      />
+    </CSidebarFooter>
   </CSidebar>
 </template>
 
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index b230865d..b1031348 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <AppSidebar />
-    <div class="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
+    <div class="wrapper d-flex flex-column min-vh-100">
       <AppHeader />
       <div class="body flex-grow-1 px-3">
         <CContainer lg>
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
index 15d367af..d9602b36 100644
--- a/src/styles/_custom.scss
+++ b/src/styles/_custom.scss
@@ -1 +1,33 @@
-// Here you can add other styles
+// Here you can add other styles// Here you can add other styles
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-toggler {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.header {
+  padding: 0;
+
+  .container-fluid {
+    padding-right: $spacer;
+    padding-left: $spacer;
+  }
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 38bfe8c4..7e2ee4f8 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,6 +1,22 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
 .wrapper {
   width: 100%;
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
+  }
+}