initial commit

resources/js/Components/NavBarMenu.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { StyleService } from '@/Stores/style.js'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
+import NavBarItem from '@/Components/NavBarItem.vue'
+import BaseIcon from '@/Components/BaseIcon.vue'
+
+const styleStore = StyleService()
+
+const isDropdownActive = ref(false)
+
+const toggleDropdownIcon = computed(() => isDropdownActive.value ? mdiChevronUp : mdiChevronDown)
+
+const toggle = () => {
+  isDropdownActive.value = !isDropdownActive.value
+}
+
+const root = ref(null)
+
+const forceClose = event => {
+  if (!root.value.$el.contains(event.target)) {
+    isDropdownActive.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', forceClose)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', forceClose)
+})
+</script>
+
+<template>
+  <NavBarItem
+    ref="root"
+    type="block"
+    :active="isDropdownActive"
+    dropdown
+    @click="toggle"
+  >
+    <a
+      class="flex items-center py-2 px-3 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent"
+      :class="styleStore.navBarMenuListUpperLabelStyle"
+    >
+      <slot />
+      <BaseIcon
+        :path="toggleDropdownIcon"
+        class="hidden lg:inline-flex transition-colors"
+      />
+    </a>
+    <div
+      class="-mx-px text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute
+          lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-b lg:dark:bg-slate-800
+          dark:border-slate-700"
+      :class="{'lg:hidden':!isDropdownActive}"
+    >
+      <slot name="dropdown" />
+    </div>
+  </NavBarItem>
+</template>