tuxarmy/persegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tambah hamburger menu untuk mobile dengan Alpine.js

Browse Source
This commit is contained in:
tuxarmy
2026-04-03 05:51:13 +07:00
parent 2a8d8a813c
commit 61ff827ca0
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/public/home.blade.php
-2
View File
@@ -215,6 +215,4 @@
</div>
</section>
<script src="//unpkg.com/alpinejs" defer></script>
@endsection
resources/views/public/layout.blade.php
+31 -6
View File
@@ -15,22 +15,47 @@
<body class="bg-white text-gray-900 font-sans antialiased">
{{-- Navbar --}}
<nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100">
<nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100" x-data="{open: false}">
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<a href="{{ route('home') }}" class="font-bold text-base tracking-tight whitespace-nowrap">Persegi <span class="text-gray-400">///</span></a>
<div class="flex items-center gap-3 md:gap-8 text-xs md:text-sm text-gray-600">
<a href="{{ route('home') }}" class="font-bold text-base tracking-tight">Persegi <span class="text-gray-400">///</span></a>
{{-- Desktop --}}
<div class="hidden md:flex items-center gap-8 text-sm text-gray-600">
<a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
<a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition hidden sm:inline">Kegiatan</a>
<a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition">Kegiatan</a>
<a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
<a href="{{ route('kontak') }}" class="hover:text-gray-900 transition">Kontak</a>
<a href="{{ route('filament.admin.auth.login') }}"
class="flex items-center gap-1 bg-gray-900 text-white text-xs font-medium px-3 py-1.5 rounded-full hover:bg-gray-700 transition whitespace-nowrap">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
class="flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-4 py-2 rounded-full hover:bg-gray-700 transition">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
Masuk
</a>
</div>
{{-- Hamburger --}}
<button @click="open = !open" class="md:hidden p-2 text-gray-600 hover:text-gray-900">
<svg x-show="!open" class="w-5 h-5" 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 x-show="open" x-cloak class="w-5 h-5" 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 --}}
<div x-show="open" x-cloak @click.outside="open = false"
class="md:hidden border-t border-gray-100 bg-white px-4 py-4 flex flex-col gap-4 text-sm text-gray-600">
<a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
<a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition">Kegiatan</a>
<a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
<a href="{{ route('kontak') }}" class="hover:text-gray-900 transition">Kontak</a>
<a href="{{ route('filament.admin.auth.login') }}"
class="inline-flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-4 py-2 rounded-full w-fit hover:bg-gray-700 transition">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
Masuk
</a>
</div>
</nav>
<script src="//unpkg.com/alpinejs" defer></script>
<main class="pt-16">
@yield('content')
</main>