refactor: improve layout

Author: mrholek

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"

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"

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>
+      <CHeaderNav class="ms-auto">
         <CNavItem>
           <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-bell" size="lg" />
+            <CIcon icon="cil-bell" size="lg" />
           </CNavLink>
         </CNavItem>
         <CNavItem>
           <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-list" size="lg" />
+            <CIcon icon="cil-list" size="lg" />
           </CNavLink>
         </CNavItem>
         <CNavItem>
           <CNavLink href="#">
-            <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
+            <CIcon 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" />
+      </CHeaderNav>
+      <CHeaderNav>
+        <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'
         }
       })
     })

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">

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>

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
 }

src/styles/_example.scss renamed to src/styles/_examples.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 */

src/styles/_variables.scss

@@ -1,17 +1,16 @@
 // 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";
 
 // Import Chart.js custom tooltips styles
 @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";