refactor: improve layout

Author: mrholek

src/components/AppBreadcrumb.js

@@ -32,7 +32,7 @@ const AppBreadcrumb = () => {
   const breadcrumbs = getBreadcrumbs(currentLocation)
 
   return (
-    <CBreadcrumb className="m-0 ms-2">
+    <CBreadcrumb className="my-0">
       <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
       {breadcrumbs.map((breadcrumb, index) => {
         return (

src/components/AppContent.js

@@ -7,7 +7,7 @@ import routes from '../routes'
 
 const AppContent = () => {
   return (
-    <CContainer lg>
+    <CContainer class="px-4" lg>
       <Suspense fallback={<CSpinner color="primary" />}>
         <Routes>
           {routes.map((route, idx) => {

src/components/AppFooter.js

@@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react'
 
 const AppFooter = () => {
   return (
-    <CFooter>
+    <CFooter className="px-4">
       <div>
         <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
           CoreUI

src/components/AppHeader.js

@@ -44,10 +44,10 @@ const AppHeader = () => {
 
   return (
     <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
-      <CContainer className="border-bottom" fluid>
+      <CContainer className="border-bottom px-4" fluid>
         <CHeaderToggler
-          className="ps-1"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          style={{ marginInlineStart: '-14px' }}
         >
           <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
@@ -80,17 +80,19 @@ const AppHeader = () => {
               <CIcon icon={cilEnvelopeOpen} size="lg" />
             </CNavLink>
           </CNavItem>
-          <li className="nav-item py-2 py-lg-1">
+        </CHeaderNav>
+        <CHeaderNav>
+          <li className="nav-item py-1">
             <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
           </li>
           <CDropdown variant="nav-item" placement="bottom-end">
             <CDropdownToggle caret={false}>
               {colorMode === 'dark' ? (
-                <CIcon icon={cilMoon} size="xl" />
+                <CIcon icon={cilMoon} size="lg" />
               ) : colorMode === 'auto' ? (
-                <CIcon icon={cilContrast} size="xl" />
+                <CIcon icon={cilContrast} size="lg" />
               ) : (
-                <CIcon icon={cilSun} size="xl" />
+                <CIcon icon={cilSun} size="lg" />
               )}
             </CDropdownToggle>
             <CDropdownMenu>
@@ -123,15 +125,13 @@ const AppHeader = () => {
               </CDropdownItem>
             </CDropdownMenu>
           </CDropdown>
-          <li className="nav-item py-2 py-lg-1">
+          <li className="nav-item py-1">
             <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
           </li>
-        </CHeaderNav>
-        <CHeaderNav className="ms-3">
           <AppHeaderDropdown />
         </CHeaderNav>
       </CContainer>
-      <CContainer fluid>
+      <CContainer className="px-4" fluid>
         <AppBreadcrumb />
       </CContainer>
     </CHeader>

src/components/header/AppHeaderDropdown.js

@@ -27,7 +27,7 @@ import avatar8 from './../../assets/images/avatars/8.jpg'
 const AppHeaderDropdown = () => {
   return (
     <CDropdown variant="nav-item">
-      <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
+      <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
         <CAvatar src={avatar8} size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">

src/layout/DefaultLayout.js

@@ -7,7 +7,7 @@ const DefaultLayout = () => {
       <AppSidebar />
       <div className="wrapper d-flex flex-column min-vh-100">
         <AppHeader />
-        <div className="body flex-grow-1 px-3">
+        <div className="body flex-grow-1">
           <AppContent />
         </div>
         <AppFooter />