alexey.bagno/pwa-homelab-mon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Size fix
Deploy / deploy (push) Successful in 8s
Details

Browse Source
This commit is contained in:
alexey.bagno
2026-08-29 13:51:48 +05:00
parent ca92b16965
commit 8bdf96e0de
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.tsx
+13 -11
View File
@@ -71,13 +71,13 @@ export function App() {
return ( return (
<div class="min-h-screen flex flex-col"> <div class="min-h-screen flex flex-col">
{/* Top bar: title on mobile, tab bar on desktop */} {/* Desktop: tab row, left-aligned; mobile: compact title bar */}
<div class="navbar bg-base-200 px-4 pt-[env(safe-area-inset-top)]"> <div class="bg-base-200 px-4 py-2 hidden md:block">
<span class="text-lg font-bold md:hidden">{cat.label}</span> <div class="max-w-4xl mx-auto flex items-center gap-2">
<div class="hidden md:flex flex-1 justify-center gap-1"> <span class="text-lg font-bold mr-4">Homelab</span>
{CATEGORIES.map((c) => ( {CATEGORIES.map((c) => (
<button <button
class={`btn btn-ghost btn-sm ${c.id === category ? "btn-primary" : ""}`} class={`btn btn-sm ${c.id === category ? "btn-primary" : "btn-ghost"}`}
onClick={() => { onClick={() => {
setCategory(c.id); setCategory(c.id);
setOpenDoc(null); setOpenDoc(null);
@@ -87,7 +87,9 @@ export function App() {
</button> </button>
))} ))}
</div> </div>
<span class="hidden md:block mx-auto text-lg font-bold absolute left-1/2 -translate-x-1/2 pointer-events-none">Homelab</span> </div>
<div class="navbar bg-base-200 px-4 py-3 md:hidden">
<span class="text-lg font-bold mx-auto">{cat.label}</span>
</div> </div>
<div class="flex-1 w-full max-w-md mx-auto px-4 pb-20 md:pb-6 pt-[env(safe-area-inset-top)]"> <div class="flex-1 w-full max-w-md mx-auto px-4 pb-20 md:pb-6 pt-[env(safe-area-inset-top)]">
@@ -106,12 +108,12 @@ export function App() {
))} ))}
</div> </div>
{/* Mobile footer nav */} {/* Mobile footer nav: equal quarters, large icons */}
<div class="btm-nav md:hidden bg-base-200 pb-[env(safe-area-inset-bottom)] z-10"> <div class="btm-nav md:hidden bg-base-200 pb-[env(safe-area-inset-bottom)] z-10 h-20">
{CATEGORIES.map((c) => ( {CATEGORIES.map((c) => (
<button class={c.id === category ? "active text-primary" : ""} onClick={() => { setCategory(c.id); setOpenDoc(null); }}> <button class={`flex-1 ${c.id === category ? "active text-primary" : "text-base-content/60"}`} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
<c.icon size={20} /> <c.icon size={28} />
<span class="text-[10px]">{c.label}</span> <span class="text-xs font-medium">{c.label}</span>
</button> </button>
))} ))}
</div> </div>