From db7633af5567c18c5202577d700069ab681eb718 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 15:10:22 +0100
Subject: [PATCH] refactor: improve layout

---
 src/components/AppBreadcrumb.vue             |  2 +-
 src/components/AppFooter.vue                 |  2 +-
 src/components/AppHeader.vue                 | 70 +++++++++-----------
 src/components/AppHeaderDropdownAccnt.vue    |  2 +-
 src/layouts/DefaultLayout.vue                |  4 +-
 src/styles/_custom.scss                      | 24 +++----
 src/styles/{_example.scss => _examples.scss} |  0
 src/styles/_variables.scss                   |  3 +
 src/styles/style.scss                        |  7 +-
 9 files changed, 53 insertions(+), 61 deletions(-)
 rename src/styles/{_example.scss => _examples.scss} (100%)

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index b935c4cc..49ddfc73 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <CBreadcrumb class="my-0 ms-2">
+  <CBreadcrumb class="my-0">
     <CBreadcrumbItem
       v-for="item in breadcrumbs"
       :key="item"
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index c96c9218..391618c4 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <CFooter>
+  <CFooter class="px-4">
     <div>
       <a href="https://coreui.io" target="_blank">CoreUI</a>
       <span class="ms-1"
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 17ab8ae6..043a1ca7 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,10 +1,10 @@
 <template>
   <CHeader position="sticky" :class="headerClassNames">
-    <CContainer class="border-bottom" fluid>
-      <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
+    <CContainer class="border-bottom px-4" fluid>
+      <CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
         <CIcon icon="cil-menu" size="lg" />
       </CHeaderToggler>
-      <CHeaderNav class="d-none d-md-flex me-auto">
+      <CHeaderNav class="d-none d-md-flex">
         <CNavItem>
           <CNavLink href="/dashboard"> Dashboard </CNavLink>
         </CNavItem>
@@ -15,33 +15,32 @@
           <CNavLink href="#">Settings</CNavLink>
         </CNavItem>
       </CHeaderNav>
+      <CHeaderNav class="ms-auto">
+        <CNavItem>
+          <CNavLink href="#">
+            <CIcon icon="cil-bell" size="lg" />
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#">
+            <CIcon icon="cil-list" size="lg" />
+          </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#">
+            <CIcon icon="cil-envelope-open" size="lg" />
+          </CNavLink>
+        </CNavItem>
+      </CHeaderNav>
       <CHeaderNav>
-        <CNavItem>
-          <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-bell" size="lg" />
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-list" size="lg" />
-          </CNavLink>
-        </CNavItem>
-        <CNavItem>
-          <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
-          </CNavLink>
-        </CNavItem>
-        <li class="nav-item py-2 py-lg-1">
-          <div
-            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
-          ></div>
-          <hr class="d-lg-none my-2 text-white-50" />
+        <li class="nav-item py-1">
+          <div class="vr h-100 mx-2 text-body text-opacity-75"></div>
         </li>
         <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 icon="cil-contrast" size="xl" />
+            <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="lg" />
+            <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="lg" />
+            <CIcon v-else icon="cil-contrast" size="lg" />
           </CDropdownToggle>
           <CDropdownMenu>
             <CDropdownItem
@@ -73,16 +72,13 @@
             </CDropdownItem>
           </CDropdownMenu>
         </CDropdown>
-        <li class="nav-item py-2 py-lg-1">
-          <div
-            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
-          ></div>
-          <hr class="d-lg-none my-2 text-white-50" />
+        <li class="nav-item py-1">
+          <div class="vr h-100 mx-2 text-body text-opacity-75"></div>
         </li>
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
-    <CContainer fluid>
+    <CContainer class="px-4" fluid>
       <AppBreadcrumb />
     </CContainer>
   </CHeader>
@@ -100,17 +96,15 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
-    const headerClassNames = ref('mb-4')
-    const { colorMode, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
+    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 shadow-sm'
+          headerClassNames.value = 'mb-4 p-0 shadow-sm'
         } else {
-          headerClassNames.value = 'mb-4'
+          headerClassNames.value = 'mb-4 p-0'
         }
       })
     })
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index 633e2005..ac31d96e 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,6 +1,6 @@
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
-    <CDropdownToggle class="py-0" :caret="false">
+    <CDropdownToggle class="py-0 pe-0" :caret="false">
       <CAvatar :src="avatar" size="md" />
     </CDropdownToggle>
     <CDropdownMenu class="pt-0">
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index b1031348..83d249ac 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -3,8 +3,8 @@
     <AppSidebar />
     <div class="wrapper d-flex flex-column min-vh-100">
       <AppHeader />
-      <div class="body flex-grow-1 px-3">
-        <CContainer lg>
+      <div class="body flex-grow-1">
+        <CContainer class="px-4" lg>
           <router-view />
         </CContainer>
       </div>
diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss
index d9602b36..4301405f 100644
--- a/src/styles/_custom.scss
+++ b/src/styles/_custom.scss
@@ -1,9 +1,18 @@
-// Here you can add other styles// Here you can add other styles
+// Custom styles for this theme
+
 .header > .container-fluid,
 .sidebar-header {
   min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
 }
 
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
 .sidebar-toggler {
   @include ltr-rtl("margin-left", auto);
 }
@@ -15,19 +24,6 @@
   }
 }
 
-.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/_example.scss b/src/styles/_examples.scss
similarity index 100%
rename from src/styles/_example.scss
rename to src/styles/_examples.scss
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 697b08ad..5ac5b726 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,3 +1,6 @@
 // Variable overrides
 //
 // If you want to customize your project please add your variables below.
+
+$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 02f199c4..de0c64a0 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,9 +1,6 @@
 // If you want to override variables do it here
 @import "variables";
 
-$enable-ltr: true;
-$enable-rtl: true;
-
 // Import CoreUI for React components library
 @import "@coreui/coreui/scss/coreui";
 
@@ -11,7 +8,9 @@ $enable-rtl: true;
 @import "@coreui/chartjs/scss/coreui-chartjs";
 
 @import "layout";
-@import "example";
+
+// Preview
+@import "examples";
 
 // If you want to add custom CSS you can put it here.
 @import "custom";