refactor: adjust header and sidebar to new styles

src/containers/DefaultContainer.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="c-app c-default-layout">
-    <TheHeader/>
+  <div class="c-app">
     <TheSidebar/>
-    <div class="c-body">
-      <main class="c-main">
-        <CBreadcrumbRouter/>
-        <CContainer fluid>
-          <transition name="fade">
-            <router-view></router-view>
-          </transition>
-        </CContainer>
-      </main>
+    <div class="c-wrapper">
+      <TheHeader/>
+      <div class="c-body">
+        <main class="c-main">
+          <CContainer fluid>
+            <transition name="fade">
+              <router-view></router-view>
+            </transition>
+          </CContainer>
+        </main>
+      </div>
+      <TheFooter/>
     </div>
-    <TheFooter/>
   </div>
 </template>
 

src/containers/DefaultHeaderDropdownAccnt.vue

@@ -2,17 +2,21 @@
   <CDropdown
     nav
     no-caret
-    no-popper
-    add-menu-classes="dropdown-menu-right"
+    class="c-header-nav-items"
+    placement="bottom-end"
+    add-menu-classes="pt-0"
   >
-    <template #toggler-content>
-      <img
-        src="img/avatars/6.jpg"
-        class="img-avatar"
-        alt="admin@bootstrapmaster.com"
-      />
+    <template #toggler="{click}">
+      <CLink class="c-header-nav-link" @click="click">
+        <div class="c-avatar">
+          <img
+            src="img/avatars/6.jpg"
+            class="c-avatar-img "
+          />
+        </div>
+      </CLink>
     </template>
-    <CDropdownHeader tag="div" class="text-center">
+    <CDropdownHeader tag="div" class="text-center bg-light">
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
@@ -32,8 +36,8 @@
       <CBadge variant="warning">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
-     tag="div"
-      class="text-center"
+      tag="div"
+      class="text-center bg-light"
     >
       <strong>Settings</strong>
     </CDropdownHeader>

src/containers/TheHeader.vue

@@ -1,56 +1,34 @@
 <template>
-  <CHeader fixed>
+  <CHeader fixed with-subheader light>
     <CSidebarToggler 
-      class="c-header-toggler d-lg-none mr-auto"
+      class="c-header-toggler"
       v-c-emit-root-event:c-sidebar-toggle
     />
-    <CLink :class="logoClasses" to="/">
-      <img
-        v-show="sidebarIsMinimized"
-        class="navbar-brand-minimized d-md-down-none" 
-        src="img/brand/sygnet.svg" 
-        width="30" 
-        height="30" 
-        alt="CoreUI Logo"
-      >
-      <img
-        v-show="!sidebarIsMinimized"
-        class="navbar-brand-full d-md-down-none" 
-        src="img/brand/logo.svg" 
-        width="89" 
-        height="25" 
-        alt="CoreUI Logo"
-      >
-      <img
-        class="navbar-brand-full d-lg-none" 
-        src="img/brand/logo.svg" 
-        width="89" 
-        height="25" 
-        alt="CoreUI Logo"
-      >
-    </CLink>
-    <CSidebarToggler 
-      class="c-header-toggler d-md-down-none" 
-      v-c-emit-root-event:c-sidebar-toggle
+    <img
+      class="c-header-brand mx-auto d-lg-none" 
+      src="img/brand/coreui-base.svg" 
+      width="97" 
+      height="46" 
+      alt="CoreUI Logo"
     />
-    <ul class="c-header-nav d-md-down-none">
-      <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
-      <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
-      <CNavItem class="px-3">Settings</CNavItem>
+    <ul class="c-header-nav d-md-down-none mr-auto">
+      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
+      <CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
     </ul>
-    <CNav class="c-header-nav ml-auto">
-      <CNavItem class="d-md-down-none">
+    <ul class="c-header-nav">
+      <CHeaderNavItem class="d-md-down-none mx-2">
         <i class="cui-bell"></i>
-        <CBadge pill variant="danger">5</CBadge>
-      </CNavItem>
-      <CNavItem class="d-md-down-none">
+      </CHeaderNavItem>
+      <CHeaderNavItem class="d-md-down-none mx-2">
         <i class="cui-list"></i>
-      </CNavItem>
-      <CNavItem class="d-md-down-none">
-        <i class="cui-location-pin"></i>
-      </CNavItem>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="d-md-down-none mx-2">
+        <i class="cui-envelope-open"></i>
+      </CHeaderNavItem>
       <DefaultHeaderDropdownAccnt/>
-    </CNav>
+    </ul>
+    <CBreadcrumbRouter class="c-subheader px-3"/>
   </CHeader>
 </template>
 

src/containers/TheSidebar.vue

@@ -3,6 +3,11 @@
     fixed 
     :minimize="minimize"
   >
+    <CSidebarBrand 
+      fullSrc="img/brand/coreui-base-white.svg" 
+      minimizedSrc="img/brand/coreui-signet-white.svg"
+      :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
+    />
     <!-- <CSidebarHeader/> -->
     <!-- <CSidebarForm/> -->
     <CRenderFunction :contentToRender="nav"/>

src/containers/_nav.js

@@ -446,8 +446,10 @@ export default [
           name: 'Download CoreUI',
           href: 'http://coreui.io/vue/',
           icon: 'cui-cloud-download',
+          addLinkClasses: 'c-nav-link-success',
+        },
+        attrs: {
           class: 'mt-auto',
-          variant: 'success'
         }
       }
     ],
@@ -458,7 +460,7 @@ export default [
           name: 'Try CoreUI PRO',
           href: 'http://coreui.io/pro/vue/',
           icon: 'cui-layers',
-          variant: 'danger'
+          addLinkClasses: 'c-nav-link-danger',
         }
       }
     ]