71 lines
2.6 KiB
Vue
71 lines
2.6 KiB
Vue
<script setup>
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
logo,
|
|
items,
|
|
openDropdownIndex,
|
|
toggleDropdown,
|
|
logout
|
|
} = inject('navigationData');
|
|
</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">
|
|
{{ 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">
|
|
{{ 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">
|
|
{{ 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>
|