Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Navigation menu active

Browse Source
This commit is contained in:
Baghaztra 2025-09-29 10:01:21 +07:00
parent 2c87edef82
commit 9c00f3db7d
2 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/components/NavDesktop.vue
View File

@ -1,5 +1,6 @@
<script setup>
import { inject } from "vue";
import { useRoute } from "vue-router";
const {
logo,
@ -8,6 +9,19 @@ const {
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>
@ -24,10 +38,13 @@ const {
<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">
<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"
@ -41,9 +58,13 @@ const {
<ul>
<li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
class="hover:bg-A transition-colors duration-200">
<router-link :to="sub.route"
<router-link
:to="sub.route"
@click="openDropdownIndex = null"
class="block w-full h-full px-4 py-2 text-D">
: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>
@ -51,8 +72,13 @@ const {
</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">
<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>

47
resources/js/components/NavMobile.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { inject } from "vue";
import { useRoute } from "vue-router";
// Mengambil data dan fungsi yang disediakan dari komponen induk
const {
logo,
items,
@ -12,21 +12,33 @@ const {
closeMobileMenu,
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>
<div class="md:hidden">
<div class="bg-D h-5 shadow-lg"></div>
<button @click="toggleMobileMenu"
<button @click="toggleMobileMenu"
:class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }"
class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
<svg 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>
</button>
class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
<svg 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>
</button>
<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">
@ -43,7 +55,10 @@ const {
<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">
: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',
{ 'bg-C': isMenuActive(item) }
]">
<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">
@ -62,16 +77,22 @@ const {
<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">
:class="[
'block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200',
{ 'bg-C': route.path === sub.route }
]">
{{ sub.label }}
</router-link>
</div>
</transition>
</div>
</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">
:class="[
'block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200',
{ 'bg-C': isMenuActive(item) }
]">
{{ item.label }}
</router-link>
</div>