94 lines
4.2 KiB
Vue
94 lines
4.2 KiB
Vue
<script setup>
|
|
import { inject } from "vue";
|
|
|
|
// Mengambil data dan fungsi yang disediakan dari komponen induk
|
|
const {
|
|
logo,
|
|
items,
|
|
isMobileMenuOpen,
|
|
openDropdownIndex,
|
|
toggleDropdown,
|
|
toggleMobileMenu,
|
|
closeMobileMenu,
|
|
logout
|
|
} = inject('navigationData');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="md:hidden">
|
|
<div class="bg-D h-5 shadow-lg"></div>
|
|
<div class="px-4 fixed flex items-center mt-2">
|
|
<button @click="toggleMobileMenu"
|
|
class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
|
|
<svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<svg :class="{ 'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen }" class="w-6 h-6" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
|
|
class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
|
|
<div class="px-4 py-3 flex justify-between items-center border-b border-B">
|
|
<img :src="logo" alt="Logo" class="h-8 w-auto" />
|
|
<button @click="closeMobileMenu" class="text-D hover:text-red-500 transition-colors duration-200">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="py-4">
|
|
<template v-for="(item, index) in items" :key="index">
|
|
<div v-if="item.subItems" class="px-4 py-2">
|
|
<button @click="toggleDropdown(index)"
|
|
class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
|
|
<span>{{ item.label }}</span>
|
|
<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>
|
|
|
|
<transition
|
|
enter-active-class="transition-all ease-in-out duration-300"
|
|
enter-from-class="transform opacity-0 max-h-0"
|
|
enter-to-class="transform opacity-100 max-h-96"
|
|
leave-active-class="transition-all ease-in-out duration-200"
|
|
leave-from-class="transform opacity-100 max-h-96"
|
|
leave-to-class="transform opacity-0 max-h-0"
|
|
>
|
|
<div v-if="openDropdownIndex === index" class="mt-2 ml-4 space-y-1 overflow-hidden">
|
|
<router-link v-for="(sub, subIndex) in item.subItems" :key="subIndex" :to="sub.route"
|
|
@click="closeMobileMenu"
|
|
class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
|
|
{{ sub.label }}
|
|
</router-link>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
|
|
<div v-else class="px-4">
|
|
<router-link :to="item.route" @click="closeMobileMenu"
|
|
class="block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200">
|
|
{{ item.label }}
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</nav>
|
|
|
|
<div class="absolute bottom-0 w-full px-4 py-3 bg-A border-t border-B">
|
|
<button @click="logout"
|
|
class="block w-full text-left px-3 py-2 text-lg font-bold text-red-400 hover:text-white hover:bg-red-400 rounded-md transition-colors duration-200">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black/75 z-40"></div>
|
|
</div>
|
|
</template> |