septianyoga09
/
septian_airpanaswebsite
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: improve mobile navbar with floating overlay and smooth transitions

This commit is contained in:
ardhikaxx 2026-05-25 08:19:33 +07:00
parent b98a4c0411
commit bdd787dbbd
2 changed files with 100 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/css/app.css
View File

@ -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;

52
resources/views/partials/navbar.blade.php
View File

@ -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>