navbar is now penguinui

2026-06-18 16:06:51 +02:00
parent 36a5e7c5fc
commit 68381d558a
5 changed files with 87 additions and 48 deletions
--- a/hardcoded-inventory.md
+++ b/hardcoded-inventory.md
@@ -50,29 +50,35 @@ from the build. If the build ever balloons, check that exclusion is intact.

 ---

-## 1. Navbar — PENDING
-**Penguin UI: `navbar/`**
+## 1. Navbar — ✅ DONE
+**Penguin UI: `navbar/default-navbar.html`**

-> **Priority: MEDIUM** | ~143 lines across2 sites.
-> Penguin match: `navbar/default-navbar.html` — provides mobile-responsive structure,
-> hamburger animation, and link treatment that would replace our hand-rolled `<nav>`.
-> **Watch out:** tight integration needed for cart badge, settings dropdown partial,
-> language switcher, and Alpine mobile toggle — don't lose any of those.
+- Exact upstream mirror at `penguinui-components/navbar/default-navbar.html` (reference only)
+- **Link treatment** adopted from Penguin (matches the already-ported sidebars): the
+  desktop nav links lost the pill-hover (`hover:bg-surface-alt` + `px-3 py-1.5`) for
+  Penguin's text-only `underline-offset-2 hover:text-primary focus-visible:underline
+  focus:outline-hidden`, active (`aria-current=page`, set by `markActiveNav()` via
+  `data-nav`) = `font-semibold` + primary. Centralized into a `ui::nav_link(label,
+  href, data_nav, variant, attrs)` macro in `macros/ui.html` (variant ∈ default |
+  warning admin | danger). Logout stays an inline `<form><button>` (not an `<a>`).
+- **Hamburger animation** adopted: both the site mobile-menu button and the admin
+  sidebar toggle now swap bars ↔ X (`x-show="!open"`/`x-show="open"`, Penguin X-path
+  `M6 18 18 6M6 6l12 12`), kept inside our ghost-square icon-button shell for
+  consistency with the cart/gear buttons.
+- **Mobile menu panel**: kept our compact dropdown (better for this app's dense top
+  bar than Penguin's full-screen `fixed inset-x-0 top-0 pt-20` overlay, which would
+  cover the cart/settings/category-toggle). Items now use the sidebar menu-row
+  treatment (`hover:bg-primary/5`, underline focus) + `data-nav` so they show the
+  active state too.
+- **Preserved intact** (the integration risks flagged here): cart icon + live
+  cookie-read badge, the `partials/settings_dropdown.html` include (language switcher
+  + theme tristate), the mobile category-drawer toggle, and all Alpine toggles
+  (`mobile`, `cats`, `showSidebar`).

-| # | Location | What it is | Size |
-|---|----------|------------|------|
-| 1 | `assets/views/base.html:63-191` | Full site navbar: brand, desktop nav links, cart icon+badge, settings dropdown, mobile hamburger → mobile panel | ~130 lines |
-| 2 | `assets/views/admin/base.html:102-114` | Admin top bar: hamburger toggle + breadcrumb text | ~13 lines |
-
-**Details for #1 (site navbar):**
- **Brand/logo**: `base.html:74-77` — plain `<a>` with text
- **Desktop nav links**: `base.html:80-92` — `<ul>` with 4–5 items, manual `aria-current` routing
- **Cart icon + badge**: `base.html:96-109` — hand-rolled SVG cart icon + an Alpine `x-data` badge that reads `document.cookie` directly
- **Settings dropdown**: `base.html:110-162` — gear-icon trigger + language-switcher `<form>` + theme tristate (system/light/dark)
- **Mobile hamburger**: `base.html:164-172` — hamburger SVG button
- **Mobile menu panel**: `base.html:175-190` — dropdown `<ul>` with duplicated nav links
-
-**Penguin navbar variants:** `default-navbar.html`, `with-call-to-action.html`, `with-search.html`, `with-user-profile.html`
+| # | Location | What it is |
+|---|----------|------------|
+| 1 | `assets/views/base.html` | Full site navbar (brand, links, cart badge, settings, mobile menu) |
+| 2 | `assets/views/admin/base.html` | Admin top bar: animated hamburger + breadcrumb + settings |

 ---

@@ -546,7 +552,7 @@ Both are wrapped in a single card-style `<form>`.

 | # | Component | Penguin match | Est. effort | Lines saved |
 |---|-----------|---------------|-------------|-------------|
-| 1 | Navbar | `navbar/default-navbar.html` | Large | ~143 |
+| ~~1~~ | ~~Navbar~~ | ✅ DONE — `navbar/default-navbar.html` (link treatment + animated hamburger; `ui::nav_link`) | Large | ~143 |

 ### Phase 3 — LOW (mostly already Penguin, or no good match)

@@ -563,11 +569,12 @@ Both are wrapped in a single card-style `<form>`.
 | 26 | Shipping Settings Row | Already fully uses Penguin macros |
 | 27 | Form Wrappers | Already fully uses Penguin macros |

-### Already DONE (16 of 27)
+### Already DONE (17 of 27)

 | # | Component |
 |---|-----------|
 | 0 | Toast |
+| 1 | Navbar |
 | 2 | Sidebar (Admin) |
 | 3 | Sidebar (Category Accordion) |
 | 4 | Dropdown (Settings) |
@@ -584,9 +591,9 @@ Both are wrapped in a single card-style `<form>`.
 | 16 | Badge / Status Pill |
 | 17 | Buttons |

-**Remaining real port: just #1 Navbar (~143 lines, Large).** #5 Combobox is a
-conscious WON'T-PORT (Alpine Focus plugin dependency). The Phase-3 items are
-already internally Penguin-adapted or have no applicable component.
+**No real ports remain.** #5 Combobox is a conscious WON'T-PORT (Alpine Focus
+plugin dependency). All Phase-3 items (#18–27) are already internally
+Penguin-adapted or have no applicable component — leave as-is.

 ---

@@ -595,7 +602,7 @@ already internally Penguin-adapted or have no applicable component.
 | # | Component | Penguin UI Directory | Status | Lines |
 |---|-----------|---------------------|--------|-------|
 | 0 | Toast | `toast-notification/` | ✅ DONE | — |
-| 1 | Navbar | `navbar/` | PENDING (MED) | ~143 |
+| 1 | Navbar | `navbar/` | ✅ DONE | ~143 |
 | 2 | Sidebar (admin) | `sidebar/` | ✅ DONE | ~46 |
 | 3 | Sidebar (category accordion) | `sidebar/` | ✅ DONE | ~62 |
 | 4 | Dropdown (settings) | `dropdowns/` | ✅ DONE | ~103 |
@@ -623,7 +630,7 @@ already internally Penguin-adapted or have no applicable component.
 | 26 | Shipping settings row | `card/` | LOW | ~21 |
 | 27 | Form wrappers | `card/` | LOW | ~150 |

-**Status: 16 of 27 components fully ported to Penguin UI. Only 1 real port
-remains — #1 Navbar (MED). #5 Combobox is a conscious WON'T-PORT (Alpine Focus
-plugin dependency). The remaining Phase-3 items are already internally
-Penguin-adapted or have no applicable match.**
+**Status: 17 of 27 components fully ported to Penguin UI. No real ports remain.
+#5 Combobox is a conscious WON'T-PORT (Alpine Focus plugin dependency). The
+remaining Phase-3 items (#18–27) are already internally Penguin-adapted or have
+no applicable match — the migration is effectively complete.**