97 lines
3.3 KiB
Vue
97 lines
3.3 KiB
Vue
<script setup>
|
|
import { inject } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const {
|
|
logo,
|
|
items,
|
|
openDropdownIndex,
|
|
toggleDropdown,
|
|
logout
|
|
} = inject('navigationData');
|
|
|
|
const route = useRoute();
|
|
|
|
// Function to check if a menu item or its subItems are active
|
|
const isMenuActive = (item) => {
|
|
if (item.route) {
|
|
return route.path === item.route;
|
|
}
|
|
if (item.subItems) {
|
|
return item.subItems.some(sub => route.path === sub.route);
|
|
}
|
|
return false;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Desktop Navbar -->
|
|
<div class="hidden md:block shadow-lg shadow-D rounded-b-md">
|
|
<div class="bg-D h-5 rounded-b-md shadow-lg"></div>
|
|
<div class="relative rounded-b-md shadow-lg">
|
|
<!-- Logo Row -->
|
|
<div class="flex justify-center items-center">
|
|
<img :src="logo" alt="Logo" class="h-12 w-auto" />
|
|
</div>
|
|
|
|
<!-- Menu Row -->
|
|
<div class="px-8 pb-4">
|
|
<div class="flex justify-around items-center gap-4">
|
|
<template v-for="(item, index) in items" :key="index">
|
|
<div v-if="item.subItems" class="relative flex-1">
|
|
<button
|
|
@click="toggleDropdown(index)"
|
|
:class="[
|
|
'w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2',
|
|
{ 'underline underline-offset-4': isMenuActive(item) }
|
|
]">
|
|
{{ item.label }}
|
|
<svg :class="{ 'rotate-180': openDropdownIndex === index }"
|
|
class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div v-if="openDropdownIndex === index"
|
|
class="absolute mt-2 w-full mx-4 bg-white border rounded-md shadow-lg z-50">
|
|
<ul>
|
|
<li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
|
|
class="hover:bg-A transition-colors duration-200">
|
|
<router-link
|
|
:to="sub.route"
|
|
@click="openDropdownIndex = null"
|
|
:class="[
|
|
'block w-full h-full px-4 py-2 text-D',
|
|
{ 'underline underline-offset-4': route.path === sub.route }
|
|
]">
|
|
{{ sub.label }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<router-link
|
|
v-else
|
|
:to="item.route"
|
|
:class="[
|
|
'flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2',
|
|
{ 'underline underline-offset-4': isMenuActive(item) }
|
|
]">
|
|
{{ item.label }}
|
|
</router-link>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-4 right-8">
|
|
<button @click="logout"
|
|
class="text-center font-bold text-lg text-red-400 hover:underline hover:text-red-600 cursor-pointer transition-colors duration-200">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|