v1.0.0

Vue_Starter/src/components/Header.vue

@@ -2,7 +2,7 @@
   <header class="app-header navbar">
     <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
     <b-link class="navbar-brand" to="#"></b-link>
-    <button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarMinimize">&#9776;</button>
+    <button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">&#9776;</button>
     <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
   </header>
 </template>

Vue_Starter/src/components/Sidebar.vue

@@ -21,22 +21,22 @@
                     <!-- 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"/>
+                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
                       </li>
                     </SidebarNavDropdown>
                   </template>
                   <template v-else>
-                    <li class="nav-item">
-                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge"/>
-                    </li>
+                    <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>
-              <li class="nav-item">
-                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
-              </li>
+              <SidebarNavItem :classes="item.class">
+                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
+              </SidebarNavItem>
             </template>
           </template>
         </template>
@@ -44,15 +44,18 @@
       <slot></slot>
     </nav>
     <SidebarFooter/>
+    <SidebarMinimizer/>
   </div>
 </template>
 <script>
 import SidebarFooter from './SidebarFooter'
 import SidebarForm from './SidebarForm'
 import SidebarHeader from './SidebarHeader'
+import SidebarMinimizer from './SidebarMinimizer'
 import SidebarNavDropdown from './SidebarNavDropdown'
 import SidebarNavLink from './SidebarNavLink'
 import SidebarNavTitle from './SidebarNavTitle'
+import SidebarNavItem from './SidebarNavItem'
 export default {
   name: 'sidebar',
   props: {
@@ -66,9 +69,11 @@ export default {
     SidebarFooter,
     SidebarForm,
     SidebarHeader,
+    SidebarMinimizer,
     SidebarNavDropdown,
     SidebarNavLink,
-    SidebarNavTitle
+    SidebarNavTitle,
+    SidebarNavItem
   },
   methods: {
     handleClick (e) {

Vue_Starter/src/components/SidebarMinimizer.vue

@@ -0,0 +1,17 @@
+<template>
+  <button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
+</template>
+<script>
+
+export default {
+  name: 'sidebar-minimizer',
+  methods: {
+    sidebarMinimize () {
+      document.body.classList.toggle('sidebar-minimized')
+    },
+    brandMinimize () {
+      document.body.classList.toggle('brand-minimized')
+    }
+  }
+}
+</script>

Vue_Starter/src/components/SidebarNavItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <li :class="classList">
+    <slot></slot>
+  </li>
+</template>
+
+<script>
+  export default {
+    name: 'sidebar-nav-item',
+    props: {
+      classes: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      classList () {
+        return [
+          'nav-item',
+          ...this.itemClasses
+        ]
+      },
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : ''
+      }
+    }
+  }
+</script>

Vue_Starter/src/components/SidebarNavLink.vue

@@ -1,29 +1,58 @@
 <template>
-  <router-link :to="url" class="nav-link">
-    <i :class="icon"></i> {{name}}
-    <b-badge :variant="badge.variant">{{badge.text}}</b-badge>
-  </router-link>
+  <div v-if="linkExternal">
+    <a :href="url" :class="classList">
+      <i :class="icon"></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}}
+      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+    </router-link>
+  </div>
 </template>
 
 <script>
-export default {
-  name: 'sidebar-nav-link',
-  props: {
-    name: {
-      type: String,
-      default: ''
+  import isExternal from 'is-url-external'
+
+  export default {
+    name: 'sidebar-nav-link',
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      url: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      badge: {
+        type: Object,
+        default: () => {}
+      },
+      variant: {
+        type: String,
+        default: ''
+      }
     },
-    url: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    badge: {
-      default: ''
+    computed: {
+      classList () {
+        return [
+          'nav-link',
+          this.linkVariant
+        ]
+      },
+      linkVariant () {
+        return this.variant ? `nav-link-${this.variant}` : ''
+      },
+      linkExternal () {
+        return isExternal(this.url)
+      }
     }
   }
-}
 </script>

Vue_Starter/src/components/SidebarNavTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="nav-title" v-bind:class="classes">
+  <li :class="classList">
     <template v-if="wrapper && wrapper.element">
       <component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
         {{name}}
@@ -12,20 +12,31 @@
 </template>
 
 <script>
-export default {
-  props: {
-    name: {
-      type: String,
-      default: ''
+  export default {
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      classes: {
+        type: String,
+        default: ''
+      },
+      wrapper: {
+        type: Object,
+        default: () => {}
+      }
     },
-    classes: {
-      type: String,
-      default: ''
-    },
-    wrapper: {
-      type: Object,
-      default: () => {}
+    computed: {
+      classList () {
+        return [
+          'nav-title',
+          ...this.itemClasses
+        ]
+      },
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : ''
+      }
     }
   }
-}
 </script>