feat: add sidebar and breadcrumb CSS exports #3

New Issue

brendan · 2026-05-15T00:11:17Z

brendan commented

2026-05-15 00:11:17 +00:00

Goal

Add layout component styles to the package so projects can import canonical sidebar and breadcrumb CSS from @bchen/ui rather than writing them locally.

New files

`dist/sidebar.css`

Structural styles for the desktop sidebar layout:

Grid or flex body layout placing the sidebar beside <main> at ≥ 768px
Sidebar width (~180–200px), fixed/sticky positioning
Nav link styles (hover, focus)
Active-nav indicator (e.g. font-weight or accent dot)
@media (max-width: 767px) — sidebar hidden, top bar shown instead

`dist/breadcrumb.css`

Separator between crumb segments (/ or ›)
Muted small-text typography consistent with the token palette
aria-current="page" styling for the current segment (plain text, no underline)

Package exports

Add to package.json:

"./sidebar.css":     "./dist/sidebar.css",
"./breadcrumb.css":  "./dist/breadcrumb.css"

Tests

Add snapshot or string-contains tests in tests/ verifying the new CSS files export non-empty content and reference the expected token variables (e.g. --fg, --bg, --accent).

## Goal Add layout component styles to the package so projects can import canonical sidebar and breadcrumb CSS from `@bchen/ui` rather than writing them locally. ## New files ### `dist/sidebar.css` Structural styles for the desktop sidebar layout: - Grid or flex body layout placing the sidebar beside `<main>` at `≥ 768px` - Sidebar width (~180–200px), fixed/sticky positioning - Nav link styles (hover, focus) - Active-nav indicator (e.g. font-weight or accent dot) - `@media (max-width: 767px)` — sidebar hidden, top bar shown instead ### `dist/breadcrumb.css` - Separator between crumb segments (`/` or `›`) - Muted small-text typography consistent with the token palette - `aria-current="page"` styling for the current segment (plain text, no underline) ## Package exports Add to `package.json`: ```json "./sidebar.css": "./dist/sidebar.css", "./breadcrumb.css": "./dist/breadcrumb.css" ``` ## Tests Add snapshot or string-contains tests in `tests/` verifying the new CSS files export non-empty content and reference the expected token variables (e.g. `--fg`, `--bg`, `--accent`).

brendan added the feature label 2026-05-15 00:11:17 +00:00

brendan referenced this issue from a commit

2026-05-15 10:48:01 +00:00

feat: add sidebar and breadcrumb CSS exports

brendan referenced a pull request that will close this issue

2026-05-15 10:48:36 +00:00

feat: add sidebar and breadcrumb CSS exports #5

brendan closed this issue

2026-05-15 10:48:46 +00:00

brendan commented

2026-05-15 10:49:28 +00:00

Resolved: PR #5 (merge_commit 4a1a01347c)