feat(chat,examples-chat): sidenav collapse toggle + remove leftover hamburger#272
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…amburger Replaces the leftover floating "☰" hamburger (vestige of when the sidenav was a palette-toggled drawer) with proper collapse/expand controls inside the sidenav itself. - New chevron toggle button in the sidenav header — flips between expanded (280px) and collapsed (56px icon-strip) modes. - Cmd+B / Ctrl+B keyboard shortcut (VS Code convention) toggles the same. - Demo-shell stores the chosen desktop mode in localStorage so the preference persists across reloads. - Collapsed-mode CSS was already fully wired (icon-strip width, label hiding) — this commit just adds the entry point. - Mobile (<1024px) still uses drawer mode with a small floating hamburger as the open trigger. The hamburger renders only when the drawer is closed and the viewport is narrow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
blove
force-pushed
the
claude/sidenav-collapse-toggle
branch
from
fd32cac to
ec01e5b
Compare
Merged
8 tasks
blove
added a commit
that referenced
this pull request
May 13, 2026
…trast, mobile drawer (#276) Three fixes identified during visual review of #272: 1. Sidenav header trim. The expanded sidenav previously stacked three full-width rows (New chat, Search, Collapse) which felt heavy. Introduce a new .chat-sidenav__topbar row that hosts the New chat and Collapse/Expand buttons as icon-only controls with space-between, and keep the Search button as the sole full-width row in .chat-sidenav__actions. Labels on topbar buttons are hidden in every mode (display: none scoped to .chat-sidenav__topbar) so the topbar stays icon-only in expanded mode and centers in collapsed mode. 2. GenUI dark mode contrast. examples/chat/angular sets a dark body background via styles.css but never opted the chat lib into dark tokens, so --ngaf-chat-text stayed at rgb(28, 28, 28) and headings inside <chat> (including A2UI surface titles) inherited near-black on a dark background. Setting data-ngaf-chat-theme="dark" on <html> activates the dark token block at libs/chat/src/lib/styles/chat.css so text becomes rgb(245, 245, 245) and headings are legible. 3. Mobile drawer fixes. Drawer mode incorrectly applied position: relative to the host (originally added in #272 to avoid reserving space when closed), which caused the host to stretch to its parent's full width and made the inner .chat-sidenav fill the entire viewport. The host is now position: fixed top/left/bottom with width set from --ngaf-chat-sidenav-width-drawer (280px), and the inner wrapper handles the translate-X open/close transition. A new icon-only Close (X) button is rendered in the topbar exclusively in drawer mode (aria-label "Close conversations"), wired to emit openChange(false). The dark-mode fix from item 2 also resolves the drawer rendering in light mode. Tests: - libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts: 5 new specs covering the topbar structure, search-row isolation, and the drawer-mode Close button.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the leftover floating "☰" hamburger (vestige of when the sidenav was a palette-toggled drawer) with proper collapse/expand controls inside the sidenav itself.
Tests