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>

docs/components/navbar/examples/FwbNavbarExampleMegamenu.vue

@@ -0,0 +1,50 @@
+<template>
+<div class="vp-raw">
+    <fwb-navbar>
+        <template #logo>
+            <fwb-navbar-logo alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg" link="https://www.google.com/">
+                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-mega-menu link="#">
+                    Company
+                </fwb-mega-menu>
+                <fwb-navbar-link link="#">
+                    Contact
+                </fwb-navbar-link>
+            </fwb-navbar-collapse>
+        </template>
+        <template #right-side>
+            <fwb-button>
+                Get started
+            </fwb-button>
+        </template>
+        <template #mega-menu-dropdown>
+            <fwb-mega-menu-dropdown />
+        </template>
+    </fwb-navbar>
+
+</div>
+</template>
+
+  
+  
+<script setup>
+import {
+    FwbButton,
+    FwbNavbar,
+    FwbNavbarCollapse,
+    FwbNavbarLink,
+    FwbNavbarLogo,
+    FwbMegaMenu,
+    FwbMegaMenuDropdown,
+} from '../../../../src/index'
+</script>

src/components/FwbNavbar/FwbMegaMenuDropdown.vue

@@ -0,0 +1,12 @@
+<template>
+    <div  id="mega-menu-full-cta-dropdown" :class="megaMenuVisble == false ? 'hidden' : ''" class="mt-1 bg-white border-gray-200 shadow-sm border-y dark:bg-gray-800 dark:border-gray-600">
+        <div class="grid max-w-screen-xl px-4 py-5 mx-auto text-sm text-gray-500 dark:text-gray-400 md:grid-cols-3 md:px-6">
+            <slot name="default"></slot>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, toRef, inject } from 'vue'
+
+const { megaMenuVisble, toggleMenu } = inject('megaMenuToggle')
+</script>

src/components/FwbNavbar/FwbNavbar.vue

@@ -35,11 +35,14 @@
         <slot name="right-side" />
       </div>
     </div>
+    <slot name="mega-menu-dropdown">
+
+    </slot>
   </nav>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useSlots } from 'vue'
+import { computed, ref, useSlots, provide } from 'vue'
 import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
 import { useMergeClasses } from '@/composables/useMergeClasses'
 
@@ -62,6 +65,17 @@ const props = defineProps({
   },
 })
 
+const megaMenuVisble = ref(false)
+
+function toggleMenu() {
+  megaMenuVisble.value = !megaMenuVisble.value;
+}
+
+provide('megaMenuToggle', {
+  megaMenuVisble,
+  toggleMenu
+})
+
 const slots = useSlots()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)

src/index.ts

@@ -28,6 +28,8 @@ export { default as FwbNavbar } from './components/FwbNavbar/FwbNavbar.vue'
 export { default as FwbNavbarCollapse } from './components/FwbNavbar/FwbNavbarCollapse.vue'
 export { default as FwbNavbarLink } from './components/FwbNavbar/FwbNavbarLink.vue'
 export { default as FwbNavbarLogo } from './components/FwbNavbar/FwbNavbarLogo.vue'
+export { default as FwbMegaMenu } from './components/FwbNavbar/FwbMegaMenu.vue'
+export { default as FwbMegaMenuDropdown } from './components/FwbNavbar/FwbMegaMenuDropdown.vue'
 export { default as FwbPagination } from './components/FwbPagination/FwbPagination.vue'
 export { default as FwbProgress } from './components/FwbProgress/FwbProgress.vue'
 export { default as FwbRating } from './components/FwbRating/FwbRating.vue'