From a3532c8f406dff67520c7678ada0d0ce2ed770d9 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 19 Apr 2019 21:12:36 +0200
Subject: [PATCH] refactor: refactor default container

---
 src/containers/DefaultAside.vue     | 247 ---------------------------
 src/containers/DefaultContainer.vue | 113 ++-----------
 src/containers/TheAside.vue         | 249 ++++++++++++++++++++++++++++
 src/containers/TheFooter.vue        |  18 ++
 src/containers/TheHeader.vue        |  41 +++++
 src/containers/TheSidebar.vue       |  21 +++
 6 files changed, 343 insertions(+), 346 deletions(-)
 delete mode 100644 src/containers/DefaultAside.vue
 create mode 100644 src/containers/TheAside.vue
 create mode 100644 src/containers/TheFooter.vue
 create mode 100644 src/containers/TheHeader.vue
 create mode 100644 src/containers/TheSidebar.vue

diff --git a/src/containers/DefaultAside.vue b/src/containers/DefaultAside.vue
deleted file mode 100644
index 6c93c8ba..00000000
--- a/src/containers/DefaultAside.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-  <CTabs>
-    <CTab active>
-      <template slot="title">
-        <i class="icon-list"></i>
-      </template>
-      <CListGroup class="list-group-accent">
-        <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
-          Today
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider">
-          <div class="avatar float-right">
-            <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
-          </div>
-          <div>Meeting with
-            <strong>Lucas</strong>
-          </div>
-          <small class="text-muted mr-3">
-            <i class="icon-calendar"></i>&nbsp;&nbsp;1 - 3pm
-          </small>
-          <small class="text-muted">
-            <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
-          </small>
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-info">
-          <div class="avatar float-right">
-            <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
-          </div>
-          <div>Skype with <strong>Megan</strong>
-          </div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small>
-          <small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
-        </CListGroupItem>
-        <hr class="transparent mx-3 my-0">
-        <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
-          Tomorrow
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider">
-          <div>New UI Project - <strong>deadline</strong>
-          </div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
-          <small class="text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
-          <div class="avatars-stack mt-2">
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
-            </div>
-          </div>
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider">
-          <div><strong>#10 Startups.Garden</strong> Meetup</div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
-          <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
-        </CListGroupItem>
-        <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider">
-          <div><strong>Team meeting</strong></div>
-          <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
-          <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
-          <div class="avatars-stack mt-2">
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-            <div class="avatar avatar-xs">
-              <img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-            </div>
-          </div>
-        </CListGroupItem>
-      </CListGroup>
-    </CTab>
-    <CTab>
-      <template slot="title">
-        <i class='icon-speech'></i>
-      </template>
-      <div class="p-3">
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="success" class="avatar-status"/>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="danger" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="info" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="warning" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-        <hr>
-        <div class="message">
-          <div class="py-3 pb-5 mr-3 float-left">
-            <div class="avatar">
-              <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-              <CBadge variant="dark" class="avatar-status"></CBadge>
-            </div>
-          </div>
-          <div>
-            <small class="text-muted">Lukasz Holeczek</small>
-            <small class="text-muted float-right mt-1">1:52 PM</small>
-          </div>
-          <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-          <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-        </div>
-      </div>
-    </CTab>
-    <CTab>
-      <template slot="title">
-        <i class='icon-settings'></i>
-      </template>
-      <div class="p-3">
-        <h6>Settings</h6>
-        <div class="aside-options">
-          <div class="clearfix mt-4">
-            <small><b>Option 1</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
-          </div>
-          <div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
-          </div>
-        </div>
-        <div class="aside-options">
-          <div class="clearfix mt-3">
-            <small><b>Option 2</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" />
-          </div>
-          <div>
-            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
-          </div>
-        </div>
-        <div class="aside-options">
-          <div class="clearfix mt-3">
-            <small><b>Option 3</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/>
-          </div>
-          <div>
-            <small class="text-muted">Disabled option.</small>
-          </div>
-        </div>
-        <div class="aside-options">
-          <div class="clearfix mt-3">
-            <small><b>Option 4</b></small>
-            <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
-          </div>
-        </div>
-        <hr>
-        <h6>System Utilization</h6>
-        <div class="text-uppercase mb-1 mt-4">
-          <small><b>CPU Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="info" :value="25"></CProgress>
-        <small class="text-muted">348 Processes. 1/4 Cores.</small>
-        <div class="text-uppercase mb-1 mt-2">
-          <small><b>Memory Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="warning" :value="70"></CProgress>
-        <small class="text-muted">11444GB/16384MB</small>
-        <div class="text-uppercase mb-1 mt-2">
-          <small><b>SSD 1 Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="danger" :value="95"></CProgress>
-        <small class="text-muted">243GB/256GB</small>
-        <div class="text-uppercase mb-1 mt-2">
-          <small><b>SSD 2 Usage</b></small>
-        </div>
-        <CProgress  class="progress-xs" variant="success" :value="10"></CProgress>
-        <small class="text-muted">25GB/256GB</small>
-      </div>
-    </CTab>
-  </CTabs>
-</template>
-
-<script>
-export default {
-  name: 'DefaultAside',
-}
-</script>
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index e8656d77..0b519e6b 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -1,118 +1,33 @@
 <template>
   <div class="app">
-    <CHeader fixed>
-      <CSidebarToggler class="d-lg-none" display="md" mobile />
-      <CLink class="navbar-brand" to="#">
-        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
-        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
-      </CLink>
-      <CSidebarToggler class="d-md-down-none" display="lg" />
-      <CNavbarNav class="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>
-      </CNavbarNav>
-      <CNavbarNav class="ml-auto">
-        <CNavItem class="d-md-down-none">
-          <i class="icon-bell"></i>
-          <CBadge pill variant="danger">5</CBadge>
-        </CNavItem>
-        <CNavItem class="d-md-down-none">
-          <i class="icon-list"></i>
-        </CNavItem>
-        <CNavItem class="d-md-down-none">
-          <i class="icon-location-pin"></i>
-        </CNavItem>
-        <DefaultHeaderDropdownAccnt/>
-      </CNavbarNav>
-      <CAsideToggler class="d-none d-lg-block" />
-      <!--<AsideToggler class="d-lg-none" mobile />-->
-    </CHeader>
+    <TheHeader/>
     <div class="app-body">
-      <CSidebar fixed>
-        <CSidebarHeader/>
-        <CSidebarForm/>
-        <!-- <CSidebarNav :navItems="computedNav"/> -->
-        <nav class="sidebar-nav">
-          <VuePerfectScrollbar class="scroll-area" :settings="psSettings"
-                               @ps-scroll-y="scrollHandle">
-              <CSidebarNavItems :items="computedNav"/>
-          </VuePerfectScrollbar>
-        </nav>
-        <CSidebarFooter/>
-        <CSidebarMinimizer/>
-      </CSidebar>
+      <TheSidebar/>
       <main class="main">
         <CBreadcrumbRouter/>
-        <div class="container-fluid">
+        <CContainer fluid>
           <router-view></router-view>
-        </div>
+        </CContainer>
       </main>
-      <CAside fixed>
-        <!--aside-->
-        <DefaultAside/>
-      </CAside>
+      <TheAside/>
     </div>
-    <CFooter>
-      <!--footer-->
-      <div>
-        <a href="https://coreui.io">CoreUI</a>
-        <span class="ml-1">&copy; 2018 creativeLabs.</span>
-      </div>
-      <div class="ml-auto">
-        <span class="mr-1">Powered by</span>
-        <a href="https://coreui.io">CoreUI for Vue</a>
-      </div>
-    </CFooter>
+    <TheFooter/>
   </div>
 </template>
 
 <script>
-import nav from '@/_nav'
-import DefaultAside from './DefaultAside'
-import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
-import VuePerfectScrollbar from 'vue-perfect-scrollbar'
+import TheAside from './TheAside'
+import TheSidebar from './TheSidebar'
+import TheHeader from './TheHeader'
+import TheFooter from './TheFooter'
 
 export default {
   name: 'full',
   components: {
-    DefaultAside,
-    DefaultHeaderDropdownAccnt,
-    VuePerfectScrollbar
-  },
-  data () {
-    return {
-      nav: nav.items
-    }
-  },
-  computed: {
-    computedNav () {
-      return this.nav.filter((item) => item.name !== 'Dashboard')
-    },
-    psSettings: () => {
-      // ToDo: find better rtl fix
-      return {
-        maxScrollbarLength: 200,
-        minScrollbarLength: 40,
-        suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
-        wheelPropagation: false,
-        interceptRailY: styles => ({ ...styles, height: 0 })
-      }
-    }
-  },
-  methods: {
-    /*eslint no-unused-vars: ["error", { "argsIgnorePattern": "evt" }]*/
-    scrollHandle (evt) {
-      // console.log(evt)
-    }
+    TheAside,
+    TheSidebar,
+    TheHeader,
+    TheFooter
   }
 }
 </script>
-
-<style scoped lang="css">
-  .scroll-area {
-    position: absolute;
-    height: 100%;
-    margin: auto;
-  }
-</style>
diff --git a/src/containers/TheAside.vue b/src/containers/TheAside.vue
new file mode 100644
index 00000000..da3f5838
--- /dev/null
+++ b/src/containers/TheAside.vue
@@ -0,0 +1,249 @@
+<template>
+  <CAside fixed>
+    <CTabs addTabClasses="p-0">
+      <CTab active>
+        <template slot="title">
+          <i class="icon-list"></i>
+        </template>
+        <CListGroup class="list-group-accent">
+          <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
+            Today
+          </CListGroupItem>
+          <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider">
+            <div class="avatar float-right">
+              <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
+            </div>
+            <div>Meeting with
+              <strong>Lucas</strong>
+            </div>
+            <small class="text-muted mr-3">
+              <i class="icon-calendar"></i>&nbsp;&nbsp;1 - 3pm
+            </small>
+            <small class="text-muted">
+              <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
+            </small>
+          </CListGroupItem>
+          <CListGroupItem href="#" class="list-group-item-accent-info">
+            <div class="avatar float-right">
+              <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
+            </div>
+            <div>Skype with <strong>Megan</strong>
+            </div>
+            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small>
+            <small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
+          </CListGroupItem>
+          <hr class="transparent mx-3 my-0">
+          <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
+            Tomorrow
+          </CListGroupItem>
+          <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider">
+            <div>New UI Project - <strong>deadline</strong>
+            </div>
+            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
+            <small class="text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
+            <div class="avatars-stack mt-2">
+              <div class="avatar avatar-xs">
+                <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
+              </div>
+            </div>
+          </CListGroupItem>
+          <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider">
+            <div><strong>#10 Startups.Garden</strong> Meetup</div>
+            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
+            <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
+          </CListGroupItem>
+          <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider">
+            <div><strong>Team meeting</strong></div>
+            <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
+            <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
+            <div class="avatars-stack mt-2">
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+              <div class="avatar avatar-xs">
+                <img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+              </div>
+            </div>
+          </CListGroupItem>
+        </CListGroup>
+      </CTab>
+      <CTab>
+        <template slot="title">
+          <i class='icon-speech'></i>
+        </template>
+        <div class="p-3">
+          <div class="message">
+            <div class="py-3 pb-5 mr-3 float-left">
+              <div class="avatar">
+                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="success" class="avatar-status"/>
+              </div>
+            </div>
+            <div>
+              <small class="text-muted">Lukasz Holeczek</small>
+              <small class="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+          </div>
+          <hr>
+          <div class="message">
+            <div class="py-3 pb-5 mr-3 float-left">
+              <div class="avatar">
+                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="danger" class="avatar-status"></CBadge>
+              </div>
+            </div>
+            <div>
+              <small class="text-muted">Lukasz Holeczek</small>
+              <small class="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+          </div>
+          <hr>
+          <div class="message">
+            <div class="py-3 pb-5 mr-3 float-left">
+              <div class="avatar">
+                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="info" class="avatar-status"></CBadge>
+              </div>
+            </div>
+            <div>
+              <small class="text-muted">Lukasz Holeczek</small>
+              <small class="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+          </div>
+          <hr>
+          <div class="message">
+            <div class="py-3 pb-5 mr-3 float-left">
+              <div class="avatar">
+                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="warning" class="avatar-status"></CBadge>
+              </div>
+            </div>
+            <div>
+              <small class="text-muted">Lukasz Holeczek</small>
+              <small class="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+          </div>
+          <hr>
+          <div class="message">
+            <div class="py-3 pb-5 mr-3 float-left">
+              <div class="avatar">
+                <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
+                <CBadge variant="dark" class="avatar-status"></CBadge>
+              </div>
+            </div>
+            <div>
+              <small class="text-muted">Lukasz Holeczek</small>
+              <small class="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
+          </div>
+        </div>
+      </CTab>
+      <CTab>
+        <template slot="title">
+          <i class='icon-settings'></i>
+        </template>
+        <div class="p-3">
+          <h6>Settings</h6>
+          <div class="aside-options">
+            <div class="clearfix mt-4">
+              <small><b>Option 1</b></small>
+              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
+            </div>
+            <div>
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
+            </div>
+          </div>
+          <div class="aside-options">
+            <div class="clearfix mt-3">
+              <small><b>Option 2</b></small>
+              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" />
+            </div>
+            <div>
+              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
+            </div>
+          </div>
+          <div class="aside-options">
+            <div class="clearfix mt-3">
+              <small><b>Option 3</b></small>
+              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/>
+            </div>
+            <div>
+              <small class="text-muted">Disabled option.</small>
+            </div>
+          </div>
+          <div class="aside-options">
+            <div class="clearfix mt-3">
+              <small><b>Option 4</b></small>
+              <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
+            </div>
+          </div>
+          <hr>
+          <h6>System Utilization</h6>
+          <div class="text-uppercase mb-1 mt-4">
+            <small><b>CPU Usage</b></small>
+          </div>
+          <CProgress  class="progress-xs" variant="info" :value="25"></CProgress>
+          <small class="text-muted">348 Processes. 1/4 Cores.</small>
+          <div class="text-uppercase mb-1 mt-2">
+            <small><b>Memory Usage</b></small>
+          </div>
+          <CProgress  class="progress-xs" variant="warning" :value="70"></CProgress>
+          <small class="text-muted">11444GB/16384MB</small>
+          <div class="text-uppercase mb-1 mt-2">
+            <small><b>SSD 1 Usage</b></small>
+          </div>
+          <CProgress  class="progress-xs" variant="danger" :value="95"></CProgress>
+          <small class="text-muted">243GB/256GB</small>
+          <div class="text-uppercase mb-1 mt-2">
+            <small><b>SSD 2 Usage</b></small>
+          </div>
+          <CProgress  class="progress-xs" variant="success" :value="10"></CProgress>
+          <small class="text-muted">25GB/256GB</small>
+        </div>
+      </CTab>
+    </CTabs>
+  </CAside>
+</template>
+
+<script>
+export default {
+  name: 'TheAside',
+}
+</script>
diff --git a/src/containers/TheFooter.vue b/src/containers/TheFooter.vue
new file mode 100644
index 00000000..d4740374
--- /dev/null
+++ b/src/containers/TheFooter.vue
@@ -0,0 +1,18 @@
+<template>
+  <CFooter>
+    <div>
+      <a href="https://coreui.io">CoreUI</a>
+      <span class="ml-1">&copy; 2018 creativeLabs.</span>
+    </div>
+    <div class="ml-auto">
+      <span class="mr-1">Powered by</span>
+      <a href="https://coreui.io">CoreUI for Vue</a>
+    </div>
+  </CFooter>
+</template>
+
+<script>
+export default {
+  name: 'TheFooter'
+}
+</script>
diff --git a/src/containers/TheHeader.vue b/src/containers/TheHeader.vue
new file mode 100644
index 00000000..5661e0e9
--- /dev/null
+++ b/src/containers/TheHeader.vue
@@ -0,0 +1,41 @@
+<template>
+  <CHeader fixed>
+    <CSidebarToggler class="d-lg-none"/>
+    <CLink class="navbar-brand" to="#">
+      <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
+      <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
+    </CLink>
+    <CSidebarToggler class="d-md-down-none"/>
+    <CNavbarNav class="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>
+    </CNavbarNav>
+    <CNavbarNav class="ml-auto">
+      <CNavItem class="d-md-down-none">
+        <i class="icon-bell"></i>
+        <CBadge pill variant="danger">5</CBadge>
+      </CNavItem>
+      <CNavItem class="d-md-down-none">
+        <i class="icon-list"></i>
+      </CNavItem>
+      <CNavItem class="d-md-down-none">
+        <i class="icon-location-pin"></i>
+      </CNavItem>
+      <DefaultHeaderDropdownAccnt/>
+    </CNavbarNav>
+    <CAsideToggler class="d-none d-lg-block" />
+    <!--<AsideToggler class="d-lg-none" mobile />-->
+  </CHeader>
+</template>
+
+<script>
+import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+
+export default {
+  name: 'TheHeader',
+  components: {
+    DefaultHeaderDropdownAccnt
+  }
+}
+</script>
diff --git a/src/containers/TheSidebar.vue b/src/containers/TheSidebar.vue
new file mode 100644
index 00000000..83c99796
--- /dev/null
+++ b/src/containers/TheSidebar.vue
@@ -0,0 +1,21 @@
+<template>
+  <CSidebar fixed :display="md">
+    <CSidebarHeader/>
+    <CSidebarForm/>
+    <CSidebarNav :navItems="computedNav"/>
+    <CSidebarFooter/>
+    <CSidebarMinimizer/>
+  </CSidebar>
+</template>
+
+<script>
+import nav from '@/_nav'
+export default {
+  name: 'TheSidebar',
+  computed: {
+    computedNav () {
+      return nav.items.filter(item => item.name !== 'Dashboard')
+    }
+  }
+}
+</script>