james/carol

Fork

You've already forked carol

Code Issues 44 Pull requests 7 Projects Releases 25 Packages 1 Wiki Activity Actions

Sidebar: collapse/expand toggle + narrow-viewport auto-hide #162

New issue

Closed

opened 2026-06-20 01:55:28 +00:00 by james · 0 comments

james commented

2026-06-20 01:55:28 +00:00

Owner

Copy link

Follow-up to #140 (closed by #161), which deferred collapse behavior:

Mobile / narrow-viewport collapse — follow-up once tablet/phone use matters.

Add a manual collapse/expand toggle to the left sidebar (app/(app)/components/sidebar.tsx) and a narrow-viewport mode where the sidebar hides entirely and only the toggle button remains.

Behavior

Wide viewport, expanded (default):

Brand row shows logo + "Carol" wordmark on the left.
A small sidebar-toggle icon button sits at the right edge of the brand row (aligned to the sidebar's right border).
Clicking it collapses the sidebar.

Wide viewport, collapsed:

Sidebar narrows to a slim rail (icons only).
The logo + wordmark are replaced by the sidebar-toggle icon button, centered in the brand row's position. Clicking it expands the sidebar again.
Nav items show icons only — labels hidden visually but still part of the link's accessible name.
Footer (theme switch + user card + logout) collapses to a vertical stack of icon-only buttons:
- Theme switch becomes a single icon button that cycles or toggles light/dark (no segmented control).
- User card collapses to just the avatar tile.
- Logout stays as an icon button.
Each collapsed nav item / footer button gets a tooltip on hover/focus revealing its label. Use a native title attribute and a small visual tooltip component so sighted users see the label without waiting for the OS tooltip delay. Screen readers continue to use the link/button's accessible name.

Narrow viewport (below ~900px, exact breakpoint TBD by implementer):

The sidebar is hidden entirely — neither the expanded bar nor the collapsed rail is visible by default.
Only the sidebar-toggle button remains, floating in the top-left of the viewport (or anchored to a slim header — implementer's call, whichever reads cleanest against the main content's top edge).
Tapping the toggle opens the sidebar as an overlay/drawer over the main content (full expanded version — labels visible).
Tapping the toggle again, or tapping the scrim outside the drawer, hides it.
The narrow-viewport state is not "collapsed" — it's "hidden". The collapsed-rail mode is wide-viewport-only.

Persistence

Collapsed/expanded state persists to localStorage (per browser). Key suggestion: carol:sidebar:collapsed → "1" | "0".
No cookie, no DB column, no server round-trip. (Theme uses the ADR-0008 cookie+DB pattern; we're deliberately picking the lighter option here because the collapse preference is a per-device UX choice, not a per-user identity setting.)
On first load with no stored value, default to expanded on wide viewports.
On narrow viewports the stored value drives whether the overlay starts open; default closed.

Icon

Use PanelLeft / PanelLeftClose (or Sidebar / SidebarClose) from lucide-react. Pick whichever pair reads most clearly as a "collapse the left rail" affordance. Same icon library already used by sidebar-nav.tsx.

i18n

Add to messages/en.json under the nav namespace:

nav.collapseSidebar — "Collapse sidebar" (aria-label + tooltip when expanded)
nav.expandSidebar — "Expand sidebar" (aria-label + tooltip when collapsed or hidden)

Per CLAUDE.md, sibling locales fall back to English per-key — they don't need to be updated in the same PR.

Acceptance criteria

Wide viewport: a sidebar-toggle icon button sits at the right edge of the brand row when expanded.
Clicking the toggle collapses the sidebar to an icons-only rail; the logo+wordmark are replaced by the same toggle button (now centered) which expands it again.
When collapsed, nav items show icons only; hovering or focusing one reveals a visual tooltip with the translated label.
When collapsed, the footer becomes a vertical stack of icon-only buttons (single theme-toggle icon, avatar tile, logout icon), each with a tooltip.
Below ~900px viewport width, the sidebar is hidden entirely; only the toggle button is visible and tapping it reveals the full expanded sidebar as an overlay.
Collapsed/expanded preference persists across reloads via localStorage on the same browser.
Keyboard: the toggle is reachable via Tab; tooltips appear on focus; nav items remain reachable in both states.
aria-current="page" on the active nav item still works in both states.
Both themes (light/dark) render correctly in expanded, collapsed, and narrow-viewport modes.
Two new nav.* i18n keys added to messages/en.json.

Out of scope

Cookie / DB-backed persistence (deliberately localStorage-only — see Persistence above).
A separate hamburger button elsewhere in the layout — the only toggle is the sidebar-toggle icon itself.
Touch-gesture swipe-to-open on the narrow-viewport drawer.
Animating between states (a simple CSS transition on width is fine; no spring physics).

Composes with

#140 (sidebar app shell; closed by #161).
ADR-0023 (Carol DS tokens — keep using the --surface, --text, --border, --accent aliases already in sidebar.module.css).
ADR-0025 (next-intl — add new strings to messages/en.json nav namespace).

Follow-up to #140 (closed by #161), which deferred collapse behavior: > Mobile / narrow-viewport collapse — follow-up once tablet/phone use matters. Add a manual collapse/expand toggle to the left sidebar (`app/(app)/components/sidebar.tsx`) and a narrow-viewport mode where the sidebar hides entirely and only the toggle button remains. ## Behavior **Wide viewport, expanded (default):** - Brand row shows logo + "Carol" wordmark on the left. - A small sidebar-toggle icon button sits at the **right edge** of the brand row (aligned to the sidebar's right border). - Clicking it collapses the sidebar. **Wide viewport, collapsed:** - Sidebar narrows to a slim rail (icons only). - The logo + wordmark are **replaced by the sidebar-toggle icon button**, centered in the brand row's position. Clicking it expands the sidebar again. - Nav items show **icons only** — labels hidden visually but still part of the link's accessible name. - Footer (theme switch + user card + logout) collapses to a vertical stack of icon-only buttons: - Theme switch becomes a single icon button that cycles or toggles light/dark (no segmented control). - User card collapses to just the avatar tile. - Logout stays as an icon button. - Each collapsed nav item / footer button gets a tooltip on hover/focus revealing its label. Use a native `title` attribute **and** a small visual tooltip component so sighted users see the label without waiting for the OS tooltip delay. Screen readers continue to use the link/button's accessible name. **Narrow viewport (below ~900px, exact breakpoint TBD by implementer):** - The sidebar is **hidden entirely** — neither the expanded bar nor the collapsed rail is visible by default. - Only the sidebar-toggle button remains, floating in the top-left of the viewport (or anchored to a slim header — implementer's call, whichever reads cleanest against the main content's top edge). - Tapping the toggle opens the sidebar as an overlay/drawer over the main content (full expanded version — labels visible). - Tapping the toggle again, or tapping the scrim outside the drawer, hides it. - The narrow-viewport state is not "collapsed" — it's "hidden". The collapsed-rail mode is wide-viewport-only. ## Persistence - Collapsed/expanded state persists to **localStorage** (per browser). Key suggestion: `carol:sidebar:collapsed` → `"1" | "0"`. - No cookie, no DB column, no server round-trip. (Theme uses the ADR-0008 cookie+DB pattern; we're deliberately picking the lighter option here because the collapse preference is a per-device UX choice, not a per-user identity setting.) - On first load with no stored value, default to **expanded** on wide viewports. - On narrow viewports the stored value drives whether the overlay starts open; default closed. ## Icon Use `PanelLeft` / `PanelLeftClose` (or `Sidebar` / `SidebarClose`) from `lucide-react`. Pick whichever pair reads most clearly as a "collapse the left rail" affordance. Same icon library already used by `sidebar-nav.tsx`. ## i18n Add to `messages/en.json` under the `nav` namespace: - `nav.collapseSidebar` — "Collapse sidebar" (aria-label + tooltip when expanded) - `nav.expandSidebar` — "Expand sidebar" (aria-label + tooltip when collapsed or hidden) Per CLAUDE.md, sibling locales fall back to English per-key — they don't need to be updated in the same PR. ## Acceptance criteria - [ ] Wide viewport: a sidebar-toggle icon button sits at the right edge of the brand row when expanded. - [ ] Clicking the toggle collapses the sidebar to an icons-only rail; the logo+wordmark are replaced by the same toggle button (now centered) which expands it again. - [ ] When collapsed, nav items show icons only; hovering or focusing one reveals a visual tooltip with the translated label. - [ ] When collapsed, the footer becomes a vertical stack of icon-only buttons (single theme-toggle icon, avatar tile, logout icon), each with a tooltip. - [ ] Below ~900px viewport width, the sidebar is hidden entirely; only the toggle button is visible and tapping it reveals the full expanded sidebar as an overlay. - [ ] Collapsed/expanded preference persists across reloads via `localStorage` on the same browser. - [ ] Keyboard: the toggle is reachable via Tab; tooltips appear on focus; nav items remain reachable in both states. - [ ] `aria-current="page"` on the active nav item still works in both states. - [ ] Both themes (light/dark) render correctly in expanded, collapsed, and narrow-viewport modes. - [ ] Two new `nav.*` i18n keys added to `messages/en.json`. ## Out of scope - Cookie / DB-backed persistence (deliberately localStorage-only — see Persistence above). - A separate hamburger button elsewhere in the layout — the only toggle is the sidebar-toggle icon itself. - Touch-gesture swipe-to-open on the narrow-viewport drawer. - Animating between states (a simple CSS `transition` on width is fine; no spring physics). ## Composes with - #140 (sidebar app shell; closed by #161). - ADR-0023 (Carol DS tokens — keep using the `--surface`, `--text`, `--border`, `--accent` aliases already in `sidebar.module.css`). - ADR-0025 (next-intl — add new strings to `messages/en.json` `nav` namespace).

james added the

area:pwa

label

2026-06-20 01:55:40 +00:00

james referenced this issue from a commit

2026-06-20 02:26:53 +00:00

feat(pwa): collapsable sidebar with narrow-viewport drawer (#162)

james referenced this issue from a pull request that will close it,

2026-06-20 02:27:21 +00:00

feat(pwa): collapsable sidebar + narrow-viewport drawer (#162) #166

james closed this issue

2026-06-20 02:37:17 +00:00

james referenced this issue from a commit

2026-06-20 02:37:18 +00:00

Merge pull request 'feat(pwa): collapsable sidebar + narrow-viewport drawer (#162)' (#166) from 162-sidebar-collapse into main

No Branch/Tag specified

main

renovate-docker-login-action-4.x

renovate-typescript-6.x

renovate-pnpm-10.x

227-runner-image

237-devcontainer

renovate-eslint-config-prettier-10.x

renovate-node-24.x

100-oauth-callback-diagnostics

85-oidc

89-actionlint-ci

88-actionlint-prehook

69-dockerfile-allow-scripts

85-gitleaks-broaden-forgejo-mcp

83-cosign-pub-public-docs

81-cosign-no-rekor

79-cosign-version-fix

77-gitleaks-allowlist-forgejo-mcp

12-oauth

75-internal-registry-url

16-release-pipeline

67-auth-ui

20-navigation

43-tanstack

62-gitleaks-ci

46-ignore-scripts-allowlist

39-lefthook

44-renovate

19-theme-system

45-pin-actions-sha

42-nextjs-16-upgrade

15-static-analysis

18-pwa-configuration

14-ci-security-scanning

11-local-user-auth

10-authorization-middleware

9-containerize-service

13-ci-pipeline

8-db-abstraction

7-scaffold-nextjs-service

v0.0.1-rc.25

v0.0.1-rc.24

v0.0.1-rc.23

v0.0.1-rc.22

v0.0.1-rc.21

v0.0.1-rc.20

v0.0.1-rc.19

v0.0.1-rc.18

v0.0.1-rc.17

v0.0.1-rc.16

v0.0.1-rc.15

v0.0.1-rc.14

v0.0.1-rc.13

v0.0.1-rc.12

v0.0.1-rc.11

v0.0.1-rc.10

v0.0.1-rc.9

v0.0.1-rc.8

v0.0.1-rc.7

v0.0.1-rc.6

v0.0.1-rc.5

v0.0.1-rc.4

v0.0.1-rc.3

v0.0.1-rc.2

v0.0.1-rc.1

v0.0.1-rc.0

Labels

Clear labels

area:auth

Authentication and authorization

area:ci

Forgejo Actions, build, test, security, release

area:db

Database abstraction, migrations, persistence

area:infra

Containerization, deployment, foundational tooling

area:native

React Native app (Android + Linux Flatpak)

area:pwa

PWA / web frontend

area:service

Backend service, API routes, persistence

epic

High-level tracker; links several feature tickets

feature

A user-facing feature

foundation

Foundational work that other tickets build on

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

james/carol#162

Reference in a new issue

Repository

james/carol

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns