Megamenu test

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'