From bdd787dbbde747b634e6c313f47bbe056d8a50d9 Mon Sep 17 00:00:00 2001
From: ardhikaxx <ardhikayanuar58@gmail.com>
Date: Mon, 25 May 2026 08:19:33 +0700
Subject: [PATCH] style: improve mobile navbar with floating overlay and smooth
 transitions

---
 public/css/app.css                        | 62 ++++++++++++++++++++++-
 resources/views/partials/navbar.blade.php | 52 ++++++++++++++-----
 2 files changed, 100 insertions(+), 14 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 9b7442f..cf4a651 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -2150,12 +2150,11 @@ @media (max-width: 1199.98px) {
 
 /* Ensure navbar container doesn't clip dropdown */
 .site-navbar .container {
-    position: static;
+    position: relative;
     overflow: visible !important;
 }
 
 .site-navbar .navbar-collapse {
-    position: static;
     overflow: visible !important;
 }
 
@@ -2164,6 +2163,65 @@ .site-navbar .nav-auth-actions {
     overflow: visible !important;
 }
 
+/* Mobile Overlay Navbar Styling */
+@media (max-width: 1199.98px) {
+    .site-navbar .navbar-collapse {
+        position: absolute !important;
+        top: 100% !important;
+        left: 0 !important;
+        right: 0 !important;
+        background: rgba(255, 255, 255, 0.98) !important;
+        backdrop-filter: blur(20px);
+        padding: 0 1.5rem !important;
+        margin-top: 1rem !important;
+        border-radius: var(--radius-lg) !important;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
+        border: 1px solid rgba(15, 118, 110, 0.15) !important;
+        z-index: 10000 !important;
+        
+        /* Transition properties */
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        display: block !important;
+        height: auto !important;
+    }
+
+    .site-navbar .navbar-collapse.show {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+        padding: 1.5rem !important;
+    }
+
+    .site-navbar .navbar-collapse.collapsing {
+        opacity: 0;
+        visibility: visible;
+        transform: translateY(-10px);
+        padding: 1.5rem !important;
+    }
+
+    .mobile-user-header {
+        background: rgba(15, 118, 110, 0.05);
+        padding: 0.75rem;
+        border-radius: var(--radius);
+        border: 1px solid rgba(15, 118, 110, 0.08);
+    }
+
+    .site-navbar .nav-link {
+        padding: 0.75rem 1rem !important;
+        border-radius: 12px;
+        margin-bottom: 0.25rem;
+    }
+
+    .site-navbar .nav-link:hover,
+    .site-navbar .nav-link.active {
+        background: rgba(15, 118, 110, 0.08);
+        color: var(--brand-deep) !important;
+    }
+}
+
 .site-navbar .dropdown {
     position: relative;
     overflow: visible !important;
diff --git a/resources/views/partials/navbar.blade.php b/resources/views/partials/navbar.blade.php
index dc77a5c..a49696b 100644
--- a/resources/views/partials/navbar.blade.php
+++ b/resources/views/partials/navbar.blade.php
@@ -13,6 +13,21 @@
         </button>
 
         <div class="collapse navbar-collapse" id="mainNav">
+            {{-- Mobile User Info (Only visible on mobile inside collapse) --}}
+            @auth
+                <div class="d-xl-none mobile-user-header mb-3">
+                    <div class="dropdown-user-info">
+                        <div class="dropdown-avatar">
+                            {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
+                        </div>
+                        <div>
+                            <div class="dropdown-user-name">{{ auth()->user()->name }}</div>
+                            <div class="dropdown-user-email">{{ auth()->user()->email }}</div>
+                        </div>
+                    </div>
+                </div>
+            @endauth
+
             <ul class="navbar-nav ms-auto align-items-xl-center gap-1 mt-3 mt-xl-0">
                 <li class="nav-item">
                     <a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">
@@ -23,13 +38,24 @@
                 @auth
                     @if(auth()->user()->hasRole('user'))
                         <li class="nav-item">
-                            <a class="nav-link {{ request()->routeIs('user.tickets.*') ? 'active' : '' }}" href="{{ route('user.tickets.index') }}">
-                                <i class="fas fa-ticket-alt me-1"></i>Tiket
+                            <a class="nav-link {{ request()->routeIs('user.tickets.index') ? 'active' : '' }}" href="{{ route('user.tickets.index') }}">
+                                <i class="fas fa-ticket-alt me-1"></i>Pesan Tiket
                             </a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link {{ request()->routeIs('user.bookings.*') ? 'active' : '' }}" href="{{ route('user.bookings.index') }}">
-                                <i class="fas fa-calendar-check me-1"></i>Booking
+                            <a class="nav-link {{ request()->routeIs('user.bookings.index') ? 'active' : '' }}" href="{{ route('user.bookings.index') }}">
+                                <i class="fas fa-calendar-check me-1"></i>Pesan Booking
+                            </a>
+                        </li>
+                        {{-- Mobile Only Links --}}
+                        <li class="nav-item d-xl-none">
+                            <a class="nav-link {{ request()->routeIs('user.tickets.history') ? 'active' : '' }}" href="{{ route('user.tickets.history') }}">
+                                <i class="fas fa-history me-1"></i>Tiket Saya
+                            </a>
+                        </li>
+                        <li class="nav-item d-xl-none">
+                            <a class="nav-link {{ request()->routeIs('user.bookings.history') ? 'active' : '' }}" href="{{ route('user.bookings.history') }}">
+                                <i class="fas fa-clock-rotate-left me-1"></i>Booking Saya
                             </a>
                         </li>
                         <li class="nav-item">
@@ -96,24 +122,26 @@
                     @endif
 
                     @if(auth()->user()->hasRole('admin'))
-                        <a class="btn btn-primary btn-sm" href="{{ route('admin.dashboard') }}">
+                        <a class="btn btn-primary btn-sm mb-2 mb-xl-0 d-block d-xl-inline-block" href="{{ route('admin.dashboard') }}">
                             <i class="fas fa-gauge-high me-1"></i>Dashboard Admin
                         </a>
                     @endif
 
                     <form action="{{ route('logout') }}" method="POST" class="d-inline logout-form">
                         @csrf
-                        <button class="btn btn-outline-primary btn-sm" type="submit">
+                        <button class="btn btn-outline-primary btn-sm w-100 w-xl-auto" type="submit">
                             <i class="fas fa-right-from-bracket me-1"></i>Logout
                         </button>
                     </form>
                 @else
-                    <a class="btn btn-outline-primary btn-sm" href="{{ route('register') }}">
-                        <i class="fas fa-user-plus me-1"></i>Daftar
-                    </a>
-                    <a class="btn btn-primary btn-sm" href="{{ route('login') }}">
-                        <i class="fas fa-right-to-bracket me-1"></i>Login
-                    </a>
+                    <div class="d-flex flex-column flex-xl-row gap-2">
+                        <a class="btn btn-outline-primary btn-sm" href="{{ route('register') }}">
+                            <i class="fas fa-user-plus me-1"></i>Daftar
+                        </a>
+                        <a class="btn btn-primary btn-sm" href="{{ route('login') }}">
+                            <i class="fas fa-right-to-bracket me-1"></i>Login
+                        </a>
+                    </div>
                 @endauth
             </div>
         </div>