refactor: update layout

Author: mrholek

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,17 +42,17 @@
         </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"
             />
             <CIcon v-else icon="cil-contrast" size="xl" />
           </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,
     }
   },
 }

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>
 

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>

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
+}

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);
+    }
+  }
+}