filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

sidebar is no penguin ui

Browse Source
This commit is contained in:
Priec
2026-06-17 21:24:45 +02:00
parent 126b1eeb7e
commit 1d747d9960
6 changed files with 310 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
hardcoded-inventory.md
View File

@@ -55,38 +55,35 @@ and then use it (instead of hand-rolling):
---
## 2. Sidebar (Admin)
**Penguin UI: `sidebar/` (6 variants)**
## 2. Sidebar (Admin) — ✅ DONE
**Penguin UI: `sidebar/simple-sidebar.html`**
| # | Location | What it is | Size |
|---|----------|------------|------|
| 3 | `assets/views/admin/base.html:56-98` | Admin fixed sidebar: 5 nav links (`aria-current`), bottom section (exit + logout button) | ~43 lines |
| 4 | `assets/views/admin/base.html:51-53` | Dark overlay behind sidebar on mobile (`x-show`, `x-transition.opacity`) | ~3 lines |
**Details for #3:**
- 60-column fixed left rail with CSS translate-X show/hide on mobile
- Nav links: Dashboard, Products, Categories, Orders, Shipping
- Each link has `data-nav` + manual `aria-current` logic
- Bottom section: "Exit to shop" link + logout `<form>` with danger button
- Inline chevron SVG for sidebar toggle (hamburger icon at `admin/base.html:106-108`)
- Exact upstream mirror at `assets/views/penguinui/sidebar/simple-sidebar.html` (reference only)
- Adapted at use-site in `assets/views/admin/base.html`: the nav links + bottom
exit/logout now use Penguin's link treatment (`hover:bg-primary/5`,
`underline-offset-2 focus-visible:underline focus:outline-hidden`) and the
subtle active state (`bg-primary/10` + `text-on-surface-strong`) mapped onto
our `data-nav`/`aria-current` so `markActiveNav()` still drives it.
- The fixed-rail translate-X show/hide mechanics + mobile overlay (#4) are layout
scaffolding, kept as-is. Icons were intentionally not added (no verified icon
set yet) — possible follow-up.
---
## 3. Sidebar (Category Accordion)
**Penguin UI: `sidebar/`**
## 3. Sidebar (Category Accordion) — ✅ DONE
**Penguin UI: `sidebar/sidebar-with-collapsible-menus.html`**
| # | Location | What it is | Size |
|---|----------|------------|------|
| 5 | `assets/views/shop/_sidebar.html:1-60` | Persistent category sidebar/accordion with expandable groups, tree indentation, and active-state routing | ~60 lines |
| 6 | `assets/views/base.html:195-196` | Dark overlay behind category drawer on mobile | ~2 lines |
**Details for #5:**
- "All Products" link at top
- Expandable parent categories (chevron rotates via Alpine `x-data="{ open: false }"`)
- Child categories indented with `padding-left: 28px` + `↳` arrow
- Every link has `data-nav` for the client-side `markActiveNav()` function
- Empty-state fallback paragraph
- The `<aside>` container in `base.html:202-206` uses `hx-preserve` and `hx-get` to load this partial
- Exact upstream mirror at `assets/views/penguinui/sidebar/sidebar-with-collapsible-menus.html` (reference only)
- Adapted at use-site in `assets/views/shop/_sidebar.html`: Penguin link treatment +
active state + chevron-down rotation (`rotate-180`); child items now sit in a
bordered/indented list instead of the old `padding-left:28px` + `↳`. Kept our
htmx partial, data-driven `category_groups`, auto-expand `x-init`, and
`data-nav`/`markActiveNav()` active routing.
- Deviations: group row keeps our link + chevron-toggle split (categories are
navigable, not just expandable); uses `x-show`/`x-transition` instead of
upstream's `x-collapse` (that Alpine plugin isn't bundled in our build).
- The `<aside>` drawer + mobile overlay (#6) in `base.html` are layout
scaffolding, kept as-is.
---