display-ambient-light/desktop
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

Fix hamburger menu button click issue

Browse Source 
- Add dropdown-hover class for better interaction
- Add onClick handler to ensure proper focus management
- Increase z-index from z-[1] to z-[100] to prevent overlay issues
- Remove conflicting tabindex from menu items
- Add border and hover effects for better visual feedback
This commit is contained in:
Ivan Li
2025-07-07 19:20:05 +08:00
parent d1fc5713a1
commit 92349eebb6
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.tsx
View File

@ -50,18 +50,18 @@ function App() {
{/* Fixed Navigation */} {/* Fixed Navigation */}
<div class="navbar bg-base-200 shadow-lg fixed top-0 left-0 right-0 z-50"> <div class="navbar bg-base-200 shadow-lg fixed top-0 left-0 right-0 z-50">
<div class="navbar-start"> <div class="navbar-start">
<div class="dropdown"> <div class="dropdown dropdown-hover">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" onClick={(e) => e.currentTarget.focus()}>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg 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 12h8m-8 6h16"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
</svg> </svg>
</div> </div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"> <ul class="menu menu-sm dropdown-content mt-3 z-[100] p-2 shadow bg-base-100 rounded-box w-52 border border-base-300">
<li><A href="/info" class="text-base-content">基本信息</A></li> <li><A href="/info" class="text-base-content hover:bg-base-200">基本信息</A></li>
<li><A href="/displays" class="text-base-content">显示器信息</A></li> <li><A href="/displays" class="text-base-content hover:bg-base-200">显示器信息</A></li>
<li><A href="/led-strips-configuration" class="text-base-content">灯条配置</A></li> <li><A href="/led-strips-configuration" class="text-base-content hover:bg-base-200">灯条配置</A></li>
<li><A href="/white-balance" class="text-base-content">白平衡</A></li> <li><A href="/white-balance" class="text-base-content hover:bg-base-200">白平衡</A></li>
<li><A href="/led-strip-test" class="text-base-content">灯带测试</A></li> <li><A href="/led-strip-test" class="text-base-content hover:bg-base-200">灯带测试</A></li>
</ul> </ul>
</div> </div>
<a class="btn btn-ghost text-xl text-primary font-bold">环境光控制</a> <a class="btn btn-ghost text-xl text-primary font-bold">环境光控制</a>