refactor: CoreUI components

src/components/Sidebar/Sidebar.vue

@@ -1,98 +1,25 @@
 <template>
   <div class="sidebar">
-    <SidebarHeader/>
-    <SidebarForm/>
-    <nav class="sidebar-nav">
-      <div slot="header"></div>
-      <ul class="nav">
-        <template v-for="(item, index) in navItems">
-          <template v-if="item.title">
-            <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
-          </template>
-          <template v-else-if="item.divider">
-            <SidebarNavDivider :classes="item.class"/>
-          </template>
-          <template v-else-if="item.label">
-            <SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
-          </template>
-          <template v-else>
-            <template v-if="item.children">
-              <!-- First level dropdown -->
-              <SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
-                <template v-for="(childL1, index) in item.children">
-                  <template v-if="childL1.children">
-                    <!-- Second level dropdown -->
-                    <SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
-                      <li class="nav-item" v-for="(childL2, index) in childL1.children">
-                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
-                      </li>
-                    </SidebarNavDropdown>
-                  </template>
-                  <template v-else>
-                    <SidebarNavItem :classes="item.class">
-                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
-                    </SidebarNavItem>
-                  </template>
-                </template>
-              </SidebarNavDropdown>
-            </template>
-            <template v-else>
-              <SidebarNavItem :classes="item.class">
-                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
-              </SidebarNavItem>
-            </template>
-          </template>
-        </template>
-      </ul>
-      <slot></slot>
-    </nav>
-    <SidebarFooter/>
-    <SidebarMinimizer/>
+    <slot>Sidebar</slot>
   </div>
 </template>
 <script>
-import SidebarFooter from './SidebarFooter'
-import SidebarForm from './SidebarForm'
-import SidebarHeader from './SidebarHeader'
-import SidebarMinimizer from './SidebarMinimizer'
-import SidebarNavDivider from './SidebarNavDivider'
-import SidebarNavDropdown from './SidebarNavDropdown'
-import SidebarNavLink from './SidebarNavLink'
-import SidebarNavTitle from './SidebarNavTitle'
-import SidebarNavItem from './SidebarNavItem'
-import SidebarNavLabel from './SidebarNavLabel'
 export default {
   name: 'sidebar',
   props: {
-    navItems: {
-      type: Array,
-      required: true,
-      default: () => []
+    fixed: {
+      type: Boolean,
+      default: false
     }
   },
-  components: {
-    SidebarFooter,
-    SidebarForm,
-    SidebarHeader,
-    SidebarMinimizer,
-    SidebarNavDivider,
-    SidebarNavDropdown,
-    SidebarNavLink,
-    SidebarNavTitle,
-    SidebarNavItem,
-    SidebarNavLabel
+  mounted: function () {
+    this.isFixed()
   },
   methods: {
-    handleClick (e) {
-      e.preventDefault()
-      e.target.parentElement.classList.toggle('open')
+    isFixed () {
+      this.fixed ? document.body.classList.add('sidebar-fixed') : document.body.classList.remove('sidebar-fixed')
+      return this.fixed
     }
   }
 }
 </script>
-
-<style lang="css">
-  .nav-link {
-    cursor:pointer;
-  }
-</style>

src/components/Sidebar/SidebarFooter.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- <div class="sidebar-footer"></div> -->
+  <!--<div class="sidebar-footer"></div>-->
 </template>
-<script>
 
+<script>
 export default {
   name: 'sidebar-footer'
 }

src/components/Sidebar/SidebarNav.vue

@@ -0,0 +1,79 @@
+<template>
+  <nav class="sidebar-nav">
+    <div slot="header"></div>
+    <ul class="nav">
+      <template v-for="(item, index) in navItems">
+        <template v-if="item.title">
+          <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
+        </template>
+        <template v-else-if="item.divider">
+          <SidebarNavDivider :classes="item.class"/>
+        </template>
+        <template v-else-if="item.label">
+          <SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
+        </template>
+        <template v-else>
+          <template v-if="item.children">
+            <!-- First level dropdown -->
+            <SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
+              <template v-for="(childL1, index) in item.children">
+                <template v-if="childL1.children">
+                  <!-- Second level dropdown -->
+                  <SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
+                    <li class="nav-item" v-for="(childL2, index) in childL1.children">
+                      <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
+                    </li>
+                  </SidebarNavDropdown>
+                </template>
+                <template v-else>
+                  <SidebarNavItem :classes="item.class">
+                    <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
+                  </SidebarNavItem>
+                </template>
+              </template>
+            </SidebarNavDropdown>
+          </template>
+          <template v-else>
+            <SidebarNavItem :classes="item.class">
+              <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
+            </SidebarNavItem>
+          </template>
+        </template>
+      </template>
+    </ul>
+    <slot></slot>
+  </nav>
+</template>
+
+<script>
+  import SidebarNavDivider from './SidebarNavDivider'
+  import SidebarNavDropdown from './SidebarNavDropdown'
+  import SidebarNavLink from './SidebarNavLink'
+  import SidebarNavTitle from './SidebarNavTitle'
+  import SidebarNavItem from './SidebarNavItem'
+  import SidebarNavLabel from './SidebarNavLabel'
+  export default {
+    name: 'SidebarNav',
+    props: {
+      navItems: {
+        type: Array,
+        required: true,
+        default: () => []
+      }
+    },
+    components: {
+      SidebarNavDivider,
+      SidebarNavDropdown,
+      SidebarNavLink,
+      SidebarNavTitle,
+      SidebarNavItem,
+      SidebarNavLabel
+    }
+  }
+</script>
+
+<style scoped lang="css">
+  .nav-link {
+    cursor:pointer;
+  }
+</style>

src/components/Sidebar/SidebarNavDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
-    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
+    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="classIcon"></i> {{name}}</div>
     <ul class="nav-dropdown-items">
       <slot></slot>
     </ul>
@@ -23,6 +23,14 @@ export default {
       default: ''
     }
   },
+  computed: {
+    classIcon () {
+      return [
+        'nav-icon',
+        this.icon
+      ]
+    }
+  },
   methods: {
     handleClick (e) {
       e.preventDefault()

src/components/Sidebar/SidebarNavLink.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-if="isExternalLink">
     <a :href="url" :class="classList">
-      <i :class="icon"></i> {{name}}
+      <i :class="classIcon"></i> {{name}}
       <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
     </a>
   </div>
   <div v-else>
     <router-link :to="url" :class="classList">
-      <i :class="icon"></i> {{name}}
+      <i :class="classIcon"></i> {{name}}
       <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
     </router-link>
   </div>
@@ -50,6 +50,12 @@
           ...this.itemClasses
         ]
       },
+      classIcon () {
+        return [
+          'nav-icon',
+          this.icon
+        ]
+      },
       linkVariant () {
         return this.variant ? `nav-link-${this.variant}` : ''
       },

src/components/Sidebar/SidebarToggler.vue

@@ -0,0 +1,55 @@
+<template>
+  <button
+    :display="display"
+    :mobile="mobile"
+    :class="classList"
+    type="button"
+    @click="sidebarToggle">
+    <span class="navbar-toggler-icon" />
+  </button>
+</template>
+
+<script>
+  import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
+  import toggleClasses from '../../shared/toggle-classes'
+
+  export default {
+    name: 'SidebarToggler',
+    props: {
+      mobile: {
+        type: Boolean,
+        default: false
+      },
+      display: {
+        type: String,
+        default: 'lg'
+      }
+    },
+    computed: {
+      classList () {
+        return [
+          'navbar-toggler'
+          // 'd-none',
+          // 'd-lg-inline-block'
+        ]
+      }
+    },
+    mounted: function () {
+      this.toggle()
+    },
+    methods: {
+      toggle () {
+        const [display, mobile] = [this.display, this.mobile]
+        let cssClass = sidebarCssClasses[0]
+        if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
+          cssClass = `sidebar-${display}-show`
+        }
+        toggleClasses(cssClass, sidebarCssClasses)
+      },
+      sidebarToggle (e) {
+        e.preventDefault()
+        this.toggle()
+      }
+    }
+  }
+</script>

src/components/Sidebar/index.js

@@ -0,0 +1,17 @@
+import Sidebar from './Sidebar.vue'
+import SidebarFooter from './SidebarFooter'
+import SidebarForm from './SidebarForm'
+import SidebarHeader from './SidebarHeader'
+import SidebarMinimizer from './SidebarMinimizer'
+import SidebarNav from './SidebarNav'
+import SidebarNavDivider from './SidebarNavDivider'
+import SidebarNavDropdown from './SidebarNavDropdown'
+import SidebarNavItem from './SidebarNavItem'
+import SidebarNavLabel from './SidebarNavLabel'
+import SidebarNavLink from './SidebarNavLink'
+import SidebarNavTitle from './SidebarNavTitle'
+import SidebarToggler from './SidebarToggler'
+
+export {
+  Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler
+}