Megamenu test

docs/components/navbar.md

@@ -3,6 +3,7 @@ import FwbNavbarExample from './navbar/examples/FwbNavbarExample.vue'
 import FwbNavbarExampleSolid from './navbar/examples/FwbNavbarExampleSolid.vue'
 import FwbNavbarExampleActionButton from './navbar/examples/FwbNavbarExampleActionButton.vue'
 import FwbNavbarExampleCustomMobileIcon from './navbar/examples/FwbNavbarExampleCustomMobileIcon.vue'
+import FwbNavbarExampleMegamenu from './navbar/examples/FwbNavbarExampleMegamenu.vue'
 
 </script>
 # Vue Navbar – Flowbite
@@ -50,7 +51,7 @@ import {
 
 ## Solid navbar
 
-<fwb-navbar-example-solid />
+
 ```vue
 <template>
   <fwb-navbar solid>
@@ -137,6 +138,42 @@ import {
 ## Navbar with custom mobile icon
 
 <fwb-navbar-example-custom-mobile-icon />
+```vue
+<template>
+  <fwb-navbar>
+    <template #logo>
+      <fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
+        Flowbite
+      </fwb-navbar-logo>
+    </template>
+    <template #default="{isShowMenu}">
+      <fwb-navbar-collapse :is-show-menu="isShowMenu">
+        <fwb-navbar-link is-active link="#">
+          Home
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Services
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Pricing
+        </fwb-navbar-link>
+        <fwb-navbar-link link="#">
+          Contact
+        </fwb-navbar-link>
+      </fwb-navbar-collapse>
+    </template>
+    <template #menu-icon>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+      </svg>
+    </template>
+  </fwb-navbar>
+</template>
+```
+
+## Navbar with Megamenu
+<fwb-navbar-example-megamenu />
+
 ```vue
 <template>
   <fwb-navbar>