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

[Fix] Nav dropdown

Browse Source
This commit is contained in:
Baghaztra 2025-09-01 14:18:33 +07:00
parent 538c96e6b0
commit 5b4d7ac6f5
4 changed files with 65 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { inject } from "vue";
const {
logo,
items,
isOpen,
openDropdownIndex,
toggleDropdown,
logout
} = inject('navigationData');
@ -37,11 +37,13 @@ const {
</button>
<div v-if="openDropdownIndex === index"
class="absolute left-0 mt-2 w-full bg-white border rounded-md shadow-lg z-50">
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" class="block w-full h-full px-4 py-2 text-D">
<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>
@ -65,4 +67,4 @@ const {
</div>
</div>
</div>
</template>
</template>

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

@ -1,11 +1,12 @@
<script setup>
import { inject } from "vue";
// Mengambil data dan fungsi yang disediakan dari komponen induk
const {
logo,
items,
isOpen,
isMobileMenuOpen,
openDropdownIndex,
toggleDropdown,
toggleMobileMenu,
closeMobileMenu,
@ -15,11 +16,8 @@ const {
<template>
<div class="md:hidden">
<!-- Top Spacer -->
<div class="h-6"></div>
<div class="px-4 fixed flex items-center">
<!-- Hamburger Menu Button -->
<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"
@ -33,62 +31,64 @@ const {
</button>
</div>
<!-- Mobile Menu -->
<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">
<!-- Mobile Menu Header -->
<div class="px-4 py-3 flex justify-between items-center">
<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:bg-B transition-colors duration-200">
<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>
<!-- Mobile Menu Items -->
<div class="py-4">
<!-- Kasir with Dropdown -->
<div class="px-4 py-2">
<button @click="toggleDropdown"
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">
{{ items[0].label }}
<svg :class="{ 'rotate-180': isOpen }" 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>
<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>
<!-- Mobile Dropdown -->
<div v-if="isOpen" class="mt-2 ml-4 space-y-1">
<router-link v-for="(sub, index) in items[0].subItems" :key="index" :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>
</div>
<!-- Other Menu Items -->
<div class="px-4 space-y-1">
<template v-for="(item, index) in items.slice(1)" :key="index">
<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>
</template>
</div>
</div>
</template>
</nav>
<!-- Logout -->
<div class="fixed 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 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>
<!-- Mobile Menu Overlay -->
<div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black/75 z-40"></div>
</div>
</template>

21
resources/js/components/NavigationComponent.vue
View File

@ -4,11 +4,10 @@ import NavDesktop from "./NavDesktop.vue";
import NavMobile from "./NavMobile.vue";
import logo from "../../images/logo.png";
// Shared state
const isOpen = ref(false);
const isMobileMenuOpen = ref(false);
const openDropdownIndex = ref(null);
// Menu items configuration
const items = [
{ label: "Manajemen Produk", subItems: [
{ label: "Brankas", route: "/brankas" },
@ -22,19 +21,24 @@ const items = [
{ label: "Akun", route: "/akun" },
];
// Shared methods
const toggleDropdown = () => {
isOpen.value = !isOpen.value;
const toggleDropdown = (index = null) => {
if (index !== null) {
openDropdownIndex.value = openDropdownIndex.value === index ? null : index;
} else {
isOpen.value = !isOpen.value;
}
};
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value;
isOpen.value = false;
openDropdownIndex.value = null;
};
const closeMobileMenu = () => {
isMobileMenuOpen.value = false;
isOpen.value = false;
openDropdownIndex.value = null;
};
const logout = () => {
@ -48,6 +52,7 @@ provide('navigationData', {
items,
isOpen,
isMobileMenuOpen,
openDropdownIndex,
toggleDropdown,
toggleMobileMenu,
closeMobileMenu,
@ -65,9 +70,9 @@ provide('navigationData', {
<!-- Click Outside Handler for Desktop Dropdown -->
<div
v-if="isOpen && !isMobileMenuOpen"
@click="isOpen = false"
v-if="openDropdownIndex !== null && !isMobileMenuOpen"
@click="openDropdownIndex = null"
class="fixed inset-0 z-10"
></div>
</div>
</template>
</template>

2
resources/views/app.blade.php
View File

@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable-no" />
<title>Abbauf App</title>
</head>
<body>