feat: add CNavbarNav component, CNavbar and CNavbarToggle modifications

Author: woothu

src/components/Navbar/CNavbar.js

@@ -5,10 +5,7 @@ export const props = {
     type: String,
     default: 'nav'
   },
-  type: {
-    type: String,
-    default: 'light'
-  },
+  light: Boolean,
   variant: String,
   toggleable: {
     type: [Boolean, String],
@@ -34,14 +31,16 @@ export default {
       props.tag,
       mergeData(data, {
         staticClass: 'navbar',
-        class: {
-          'd-print': props.print,
-          'sticky-top': props.sticky,
-          [`navbar-${props.type}`]: Boolean(props.type),
-          [`bg-${props.variant}`]: Boolean(props.variant),
-          [`fixed-${props.fixed}`]: Boolean(props.fixed),
-          [`${breakpoint}`]: Boolean(breakpoint)
-        },
+        class: [
+          props.light ? 'navbar-light' : 'navbar-dark',
+          {
+            'd-print': props.print,
+            'sticky-top': props.sticky,
+            [`bg-${props.variant}`]: Boolean(props.variant),
+            [`fixed-${props.fixed}`]: Boolean(props.fixed),
+            [`${breakpoint}`]: Boolean(breakpoint)
+          }
+        ],
         attrs: {
           role: props.tag === 'nav' ? null : 'navigation'
         }

src/components/Navbar/CNavbarNav.js

@@ -0,0 +1,26 @@
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  name: 'CNavbarNav',
+  functional: true,
+  props:{
+    tag: {
+      type: String,
+      default: 'ul'
+    },
+    fill: Boolean,
+    justified: Boolean,
+  },
+  render (h, { props, data, children }) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'navbar-nav',
+        class: {
+          'nav-fill': props.fill,
+          'nav-justified': props.justified
+        }
+      }),
+      children
+    )
+  }
+}

src/components/Navbar/CNavbarToggle.js

@@ -1,15 +1,18 @@
+import { mergeData } from 'vue-functional-data-merge'
+//todo animation to x
 export default {
   name: 'CNavbarToggle',
-  render (h) {
+  functional: true,
+  render (h, {data, slots}) {
     return h(
       'button',
-      {
-        class: ['navbar-toggler'],
+      mergeData(data, {
+        class: [ 'navbar-toggler' ],
         attrs: {
           type: 'button',
-        },
-      },
-      [this.$slots.default || h('span', { class: ['navbar-toggler-icon'] })]
+        }
+      }),
+      [ slots().default || h('span', { class: ['navbar-toggler-icon'] })]
     )
   }
 }

src/components/Navbar/index.js

@@ -1,7 +1,9 @@
 import CNavbar from './CNavbar'
+import CNavbarNav from './CNavbarNav'
 import CNavbarToggle from './CNavbarToggle'
 
 export {
   CNavbar,
+  CNavbarNav,
   CNavbarToggle
 }

src/components/index.js

@@ -8,6 +8,7 @@ export * from './Sidebar'
 export * from './Widgets'
 export * from './Charts'
 export * from './Nav'
+export * from './Navbar'
 export * from './Link'
 export * from './Badge'
 export * from './Progress'