AbramsOS sidebar: group nav into Money&Claims / Health / Home&Life / System sections (labels hidden in mobile row layout)

b3ececaf881de3b44d118faae526ebe635d8dcd3 · 2026-08-18 16:08:01 -0700 · Steve

Files touched

M public/css/app.css
M views/partials/header.ejs

Diff

commit b3ececaf881de3b44d118faae526ebe635d8dcd3
Author: Steve <steve@designerwallcoverings.com>
Date:   Tue Aug 18 16:08:01 2026 -0700

    AbramsOS sidebar: group nav into Money&Claims / Health / Home&Life / System sections (labels hidden in mobile row layout)
---
 public/css/app.css        |  2 ++
 views/partials/header.ejs | 16 ++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 5b953b7..4691e63 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -385,6 +385,7 @@ form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0
 }
 .sidebar .brand { padding: 4px 8px 6px; }
 .sidenav { display: flex; flex-direction: column; gap: 2px; margin: 0; }
+.nav-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); opacity: .6; padding: 12px 10px 3px; }
 .sidenav a { color: var(--text-dim); font-size: 14px; padding: 8px 10px; border-radius: 8px; }
 .sidenav a:hover { color: var(--text); background: var(--surface-strong); }
 .sidenav a.active { color: var(--text); background: var(--surface-strong); font-weight: 600; }
@@ -400,5 +401,6 @@ form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0
     flex-direction: row; flex-wrap: wrap; align-items: center;
   }
   .sidenav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
+  .nav-sec { display: none; }
   .side-actions { margin: 0 0 0 auto; border-top: none; }
 }
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 39e3b23..b7ccf6f 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -23,22 +23,26 @@
       </div>
       <nav class="sidenav">
         <a href="/">Home</a>
+        <div class="nav-sec">Money &amp; Claims</div>
         <a href="/settlements">Settlements</a>
         <a href="/claims">Claims</a>
         <a href="/deadlines">Deadlines</a>
         <a href="/bills">Bills</a>
-        <a href="/assets">Assets</a>
-        <a href="/neighborhood">Watch</a>
-        <a href="/warranties">Warranties</a>
-        <a href="/reorders">Reorders</a>
         <a href="/savings">Savings</a>
+        <a href="/assets">Assets</a>
+        <a href="/purchases">Purchases</a>
+        <div class="nav-sec">Health</div>
         <a href="/health">Health</a>
         <a href="/biometrics">Biometrics</a>
         <a href="/medications">Meds</a>
         <a href="/prescriptions">Rx</a>
-        <a href="/household">Household</a>
-        <a href="/purchases">Purchases</a>
         <a href="/recalls">Recalls</a>
+        <div class="nav-sec">Home &amp; Life</div>
+        <a href="/household">Household</a>
+        <a href="/warranties">Warranties</a>
+        <a href="/reorders">Reorders</a>
+        <a href="/neighborhood">Watch</a>
+        <div class="nav-sec">System</div>
         <a href="/import">Import</a>
         <a href="/connectors">Connectors</a>
         <a href="/audit">Audit</a>

← 889a18c AbramsOS nav: move 18 top tabs into a left sidebar panel + a · back to AbramsOS · auto-data-snapshot: 2026-08-18T16:08:33 (8 data files) — dat 61ad5f4 →