Footer menu

docs/test.md

@@ -9,4 +9,8 @@ Hello **world**, list:
 
 Edited OFFLINE
 
-Edited OFFLINE v3
+Edited OFFLINE v3
+| Col A | Col B | Col C | Col D | Col E | Col F | Col G |
+|-------|-------|-------|-------|-------|-------|-------|
+| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+| long text here to force overflow ........ | x | x | x | x | x |

web/src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "preact/hooks";
 import { createClient } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import { BookOpen, Gauge, Link as LinkIcon, Menu, Play } from "lucide-preact";
+import { BookOpen, Gauge, Link as LinkIcon, Play } from "lucide-preact";
 import type { Item, Link } from "./gen/homelab/v1/homelab_pb";
 import { HomelabService } from "./gen/homelab/v1/homelab_pb";
 import { MonitorCard } from "./components/MonitorCard";
@@ -44,7 +44,6 @@ export function App() {
     exec: [],
   });
   const [category, setCategory] = useState<Category>("monitor");
-  const [drawerOpen, setDrawerOpen] = useState(false);
   const [docs, setDocs] = useState(localDocs());
   const [openDoc, setOpenDoc] = useState<string | null>(null);
 
@@ -71,53 +70,50 @@ export function App() {
   const open = docs.find((d) => d.name === openDoc);
 
   return (
-    <div class="drawer min-h-screen">
-      <input id="nav-drawer" type="checkbox" class="drawer-toggle" checked={drawerOpen} onChange={() => setDrawerOpen((v) => !v)} />
-
-      <div class="drawer-content flex flex-col">
-        {/* Top bar */}
-        <div class="navbar bg-base-200 px-2 pt-[env(safe-area-inset-top)]">
-          <label class="btn btn-square btn-ghost" onClick={() => setDrawerOpen(true)}>
-            <Menu size={22} />
-          </label>
-          <span class="text-lg font-bold mx-auto">{open && category === "docs" ? open.name.replace(/\.md$/, "") : cat.label}</span>
-          <span class="w-11" />
-        </div>
-
-        <div class="max-w-md w-full mx-auto px-4 pb-[env(safe-area-inset-bottom)]">
-          {category === "links" && <LinkList links={content.links} />}
-          {category === "monitor" && (
-            <div class="flex flex-col gap-3 mt-4">
-              {content.monitors.map((it) => <MonitorCard s={it} />)}
-            </div>
-          )}
-          {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
-          {category === "docs" &&
-            (open ? (
-              <DocView doc={open} onBack={() => setOpenDoc(null)} />
-            ) : (
-              <DocsView docs={docs} onOpen={(d) => setOpenDoc(d.name)} />
-            ))}
-        </div>
-      </div>
-
-      {/* Sidebar */}
-      <div class="drawer-side z-20">
-        <label class="drawer-overlay" onClick={() => setDrawerOpen(false)} />
-        <nav class="bg-base-200 min-h-full w-56 p-3 pt-[calc(env(safe-area-inset-top)+1rem)] flex flex-col gap-1">
+    <div class="min-h-screen flex flex-col">
+      {/* Top bar: title on mobile, tab bar on desktop */}
+      <div class="navbar bg-base-200 px-4 pt-[env(safe-area-inset-top)]">
+        <span class="text-lg font-bold md:hidden">{cat.label}</span>
+        <div class="hidden md:flex flex-1 justify-center gap-1">
           {CATEGORIES.map((c) => (
             <button
-              class={`btn btn-ghost justify-start ${c.id === category ? "btn-primary" : ""}`}
+              class={`btn btn-ghost btn-sm ${c.id === category ? "btn-primary" : ""}`}
               onClick={() => {
                 setCategory(c.id);
                 setOpenDoc(null);
-                setDrawerOpen(false);
               }}
             >
               <c.icon size={18} /> {c.label}
             </button>
           ))}
-        </nav>
+        </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="flex-1 w-full max-w-md mx-auto px-4 pb-20 md:pb-6 pt-[env(safe-area-inset-top)]">
+        {category === "links" && <LinkList links={content.links} />}
+        {category === "monitor" && (
+          <div class="flex flex-col gap-3 mt-4">
+            {content.monitors.map((it) => <MonitorCard s={it} />)}
+          </div>
+        )}
+        {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
+        {category === "docs" &&
+          (open ? (
+            <DocView doc={open} onBack={() => setOpenDoc(null)} />
+          ) : (
+            <DocsView docs={docs} onOpen={(d) => setOpenDoc(d.name)} />
+          ))}
+      </div>
+
+      {/* Mobile footer nav */}
+      <div class="btm-nav md:hidden bg-base-200 pb-[env(safe-area-inset-bottom)] z-10">
+        {CATEGORIES.map((c) => (
+          <button class={c.id === category ? "active text-primary" : ""} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
+            <c.icon size={20} />
+            <span class="text-[10px]">{c.label}</span>
+          </button>
+        ))}
       </div>
     </div>
   );

web/src/app.css

@@ -2,3 +2,11 @@
 @plugin "daisyui" {
   themes: dark --default;
 }
+
+/* Markdown reader: tables scroll sideways instead of overflowing the card. */
+.prose table {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+