style: improve mobile navbar with floating overlay and smooth transitions
This commit is contained in:
ardhikaxx
parent
b98a4c0411
commit
bdd787dbbd
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue