Footer menu

docs/test.md

@@ -10,3 +10,7 @@ Hello **world**, list:
 Edited OFFLINE
 
 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,20 +70,27 @@ 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 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 btn-sm ${c.id === category ? "btn-primary" : ""}`}
+              onClick={() => {
+                setCategory(c.id);
+                setOpenDoc(null);
+              }}
+            >
+              <c.icon size={18} /> {c.label}
+            </button>
+          ))}
+        </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="max-w-md w-full mx-auto px-4 pb-[env(safe-area-inset-bottom)]">
+      <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">
@@ -99,25 +105,15 @@ export function App() {
             <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">
+      {/* 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={`btn btn-ghost justify-start ${c.id === category ? "btn-primary" : ""}`}
-              onClick={() => {
-                setCategory(c.id);
-                setOpenDoc(null);
-                setDrawerOpen(false);
-              }}
-            >
-              <c.icon size={18} /> {c.label}
+          <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>
         ))}
-        </nav>
       </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;
+}
+