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

Fix top navigation bar to prevent scrolling

Browse Source 
- Add fixed positioning to navbar with top-0, left-0, right-0, z-50 classes
- Increase main content top padding to pt-20 to account for fixed navbar height
- Ensure navbar stays visible at top of screen during page scrolling
This commit is contained in:
Ivan Li
2025-07-07 14:59:42 +08:00
parent d1a614fbbb
commit d1fc5713a1
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -47,8 +47,8 @@ function App() {
return ( return (
<div class="min-h-screen bg-base-100" data-theme="dark"> <div class="min-h-screen bg-base-100" data-theme="dark">
{/* Navigation */} {/* Fixed Navigation */}
<div class="navbar bg-base-200 shadow-lg"> <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">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@ -80,8 +80,8 @@ function App() {
</div> </div>
</div> </div>
{/* Main Content */} {/* Main Content with top padding to account for fixed navbar */}
<main class="container mx-auto p-4"> <main class="container mx-auto p-4 pt-20">
<Routes> <Routes>
<Route path="/info" component={InfoIndex} /> <Route path="/info" component={InfoIndex} />
<Route path="/displays" component={DisplayStateIndex} /> <Route path="/displays" component={DisplayStateIndex} />