lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端折叠导航栏优化

Browse Source
This commit is contained in:
流星
2026-03-12 09:41:17 +08:00
parent 0ab0483603
commit dde080f69b
1 changed files with 76 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/app.blade.php
+76 -2
View File
@@ -50,8 +50,9 @@
<body class="bg-gray-100 min-h-screen text-gray-800 text-sm flex flex-col @yield('body-class')" @yield('body-data')>
{{-- ═══════════ 顶部导航栏（统一风格） ═══════════ --}}
<header class="bg-indigo-900 border-b border-indigo-800 text-white shadow-md sticky top-0 z-50 shrink-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<header class="bg-indigo-900 border-b border-indigo-800 text-white shadow-md sticky top-0 z-50 shrink-0"
x-data="{ mobileMenuOpen: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="flex items-center justify-between h-14">
{{-- 左侧：返回 + 标题 --}}
@@ -68,6 +69,22 @@
{{-- 右侧：操作区 --}}
<div class="flex items-center space-x-3 text-sm">
{{-- 移动端菜单按钮 --}}
<button @click="mobileMenuOpen = !mobileMenuOpen"
class="sm:hidden text-indigo-200 hover:text-white focus:outline-none p-1 transition ml-2"
aria-label="Toggle menu">
<svg x-show="!mobileMenuOpen" 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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg x-show="mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor"
viewBox="0 0 24 24" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
{{-- 公共导航链接 --}}
<a href="{{ route('rooms.index') }}"
class="text-indigo-200 hover:text-white font-bold flex items-center transition hidden sm:flex">
@@ -140,6 +157,63 @@
@endauth
</div>
</div>
{{-- 移动端折叠菜单下拉面板 --}}
<div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2"
@click.away="mobileMenuOpen = false"
class="sm:hidden absolute top-14 left-0 w-full bg-indigo-800 border-b border-indigo-700 shadow-xl z-50 flex flex-col pt-1 pb-3"
style="display: none;">
<a href="{{ route('rooms.index') }}"
class="px-4 py-2.5 text-indigo-100 hover:bg-indigo-700 hover:text-white font-medium border-l-4 {{ request()->routeIs('rooms.index') ? 'border-indigo-400 bg-indigo-700/50' : 'border-transparent' }}">
大厅
</a>
<a href="{{ route('invite.leaderboard') }}"
class="px-4 py-2.5 text-rose-300 hover:bg-indigo-700 hover:text-rose-200 font-medium border-l-4 {{ request()->routeIs('invite.leaderboard') ? 'border-rose-400 bg-indigo-700/50' : 'border-transparent' }}">
邀请排行
</a>
<a href="{{ route('leaderboard.index') }}"
class="px-4 py-2.5 text-yellow-300 hover:bg-indigo-700 hover:text-yellow-200 font-medium border-l-4 {{ request()->routeIs('leaderboard.index') ? 'border-yellow-400 bg-indigo-700/50' : 'border-transparent' }}">
风云榜
</a>
<a href="{{ route('leaderboard.today') }}"
class="px-4 py-2.5 text-green-300 hover:bg-indigo-700 hover:text-green-200 font-medium border-l-4 {{ request()->routeIs('leaderboard.today') ? 'border-green-400 bg-indigo-700/50' : 'border-transparent' }}">
今日榜
</a>
<a href="{{ route('duty-hall.index') }}"
class="px-4 py-2.5 text-purple-200 hover:bg-indigo-700 hover:text-white font-medium border-l-4 {{ request()->routeIs('duty-hall.*') ? 'border-purple-400 bg-indigo-700/50' : 'border-transparent' }}">
勤务台
</a>
<a href="{{ route('guestbook.index') }}"
class="px-4 py-2.5 text-indigo-100 hover:bg-indigo-700 hover:text-white font-medium border-l-4 {{ request()->routeIs('guestbook.*') ? 'border-indigo-400 bg-indigo-700/50' : 'border-transparent' }}">
留言板
</a>
<a href="{{ route('changelog.index') }}"
class="px-4 py-2.5 text-purple-200 hover:bg-indigo-700 hover:text-white font-medium border-l-4 {{ request()->routeIs('changelog.*') ? 'border-purple-400 bg-indigo-700/50' : 'border-transparent' }}">
更新日志
</a>
<a href="{{ route('feedback.index') }}"
class="px-4 py-2.5 text-sky-200 hover:bg-indigo-700 hover:text-white font-medium border-l-4 {{ request()->routeIs('feedback.*') ? 'border-sky-400 bg-indigo-700/50' : 'border-transparent' }}">
用户反馈
</a>
@auth
<div class="my-1 border-t border-indigo-700/50"></div>
<a href="{{ route('guide') }}"
class="px-4 py-2.5 text-indigo-100 hover:bg-indigo-700 hover:text-white font-medium border-l-4 border-transparent">
说明
</a>
@if (Auth::user()->user_level >= 15)
<a href="{{ route('admin.dashboard') }}"
class="px-4 py-2.5 text-amber-300 hover:bg-indigo-700 hover:text-amber-200 font-medium border-l-4 border-transparent">
后台管理
</a>
@endif
@endauth
</div>
</div>
</header>