Skip to content

New navigation settings layout options and styling#6645

Merged
zanesq merged 67 commits intomainfrom
spence/nav
Feb 23, 2026
Merged

New navigation settings layout options and styling#6645
zanesq merged 67 commits intomainfrom
spence/nav

Conversation

@spencrmartin
Copy link
Copy Markdown
Collaborator

@spencrmartin spencrmartin commented Jan 22, 2026

Customizable Navigation System

Overview

Replaces the old shadcn/ui-based sidebar with a new fully customizable navigation system. Users can now personalize how they navigate Goose with multiple layout options.

Key Features

Navigation Modes:

  • Push - Navigation pushes content aside (traditional sidebar behavior)
  • Overlay - Navigation floats over content without shifting it

Navigation Styles:

  • Tile (Expanded) - Large tile-based navigation with icons and labels
  • List (Condensed) - Compact list-style navigation

Navigation Positions:

  • Top, Bottom, Left, or Right placement
  • Responsive behavior: condensed nav becomes icon-only on smaller windows (<700px)

Additional Improvements:

  • Keyboard shortcut to toggle navigation (View → Toggle Navigation)
  • Open/closed navigation state persist across sessions via localStorage
  • Smooth animations using Framer Motion

Architecture Changes

Removed:

  • ui/desktop/src/components/GooseSidebar/AppSidebar.tsx (572 lines)
  • ui/desktop/src/components/ui/sidebar.tsx (711 lines) - shadcn sidebar primitives

Added:

  • NavigationContext.tsx - Central state management for nav preferences
  • CondensedNavigation.tsx - List-style navigation component
  • ExpandedNavigation.tsx - Tile-style navigation component
  • navigation/ subfolder - Reusable components (ChatSessionsDropdown, SessionsList, NavigationOverlay)
  • Settings UI components for customizing navigation
  • Custom hooks: useNavigationSessions, useNavigationItems, useNavigationDragDrop

Screenshots/Demos (for UX changes)

Before:
Screenshot 2026-01-22 at 2 06 30 PM

After:
Left sidebar (default)
Screenshot 2026-02-06 at 5 18 00 PM
Screenshot 2026-02-06 at 5 17 53 PM
Screenshot 2026-02-06 at 5 17 42 PM
Screenshot 2026-02-06 at 5 17 09 PM
Screenshot 2026-02-06 at 5 16 25 PM
Screenshot 2026-02-06 at 5 15 44 PM
Screenshot 2026-02-06 at 5 15 29 PM
Screenshot 2026-02-06 at 5 15 17 PM

- Add NavigationContext for centralized navigation state management
- Create ExpandedNavigation component with drag-drop reordering
- Create CondensedNavigation component with compact icon view
- Support multiple navigation modes: push and overlay
- Support multiple positions: top, bottom, left, right
- Add navigation settings in App Settings section
- Add chat dropdown with recent sessions in condensed horizontal mode
- Replace sidebar toggle with Goose logo button
- Move EnvironmentBadge to bottom right in chat view
- Add Framer Motion animations for smooth nav transitions
- Position nav controls in bottom right for bottom condensed push mode
- Force overlay mode for expanded nav when window < 700px
- Add effectiveNavigationMode to NavigationContext for responsive behavior
- Fix chat dropdown z-index to appear above overlay backdrop
- Use fixed 2-column grid for overlay mode
- Add scroll support to overlay navigation panel
- Add spacer tiles to fill grid spaces dynamically
- Increase tile sizes for top/bottom positions
…tings

- Add effectiveNavigationStyle to NavigationContext
- Overlay mode always uses expanded navigation (centered)
- Hide Style and Position selectors in settings when overlay mode selected
- Update AppLayout to use effectiveNavigationStyle for all rendering
- Changed overlay grid from fixed 2 columns to auto-fit with 120px minimum
- On larger screens: all tiles fit in single row
- On smaller screens: naturally wraps to 2 rows when needed
- Maintains flexibility for various viewport sizes
Opening animation:
- Added tilesReady state with 150ms delay after panel opens
- Tiles now stagger in one by one (50ms between each)
- Panel opens first, then tiles animate in smoothly

Closing animation:
- Animated minWidth from 200px to 0 (was static, causing stutter)
- Content is completely removed during close to prevent layout thrashing
- Added isClosing state to detect close transition

Other improvements:
- Added overflow-hidden to nav container
- Shortened opacity transition for snappier feel
- Consistent rounded-lg across all navigation elements
- Added isCondensedIconOnly to NavigationContext
- When window width < 700px and position is left/right:
  - Shows icon-only buttons (like top/bottom horizontal mode)
  - Chat item uses dropdown instead of inline expand
  - Hides labels, tags, drag handles, and spacers
  - Dropdown appears on right for left nav, left for right nav
- Cleaned up unused imports in ExpandedNavigation
- Use matchMedia instead of resize event for reliable breakpoint detection
- Condensed left/right nav switches to icon-only mode below 700px
- Added top spacer (80px) and bottom spacer for icon-only vertical nav
- Consolidated breakpoint constants into single RESPONSIVE_BREAKPOINT
Condensed Navigation:
- Left/right: floating button appears on hover outside nav panel
- Top/bottom: floating button appears above/below chat button on hover
- Button hides when chat dropdown/menu is expanded
- Sub-chat items now in styled container with background

Expanded Navigation:
- New Chat button in bottom-right corner of chat tile
- Appears on hover with scale animation
- Prevents dropdown from opening when clicked

AppLayout:
- Condensed nav uses overflow-visible for floating buttons
- Expanded nav keeps overflow-hidden for animations
- Overlay mode now closes automatically when user selects a nav item
- Applies to: handleNavClick, handleNewChat, handleSessionClick
- Push mode behavior unchanged (stays open until manually closed)
- Updated both ExpandedNavigation and CondensedNavigation
- Overlay container now has overflow-y-auto for scrolling on small windows
- Removed max-h-[80vh] constraint from expanded nav content
- Both ExpandedNavigation and CondensedNavigation overlays are scrollable
- Content stays centered but scrolls when window is too small
- Moved button outside DropdownMenuTrigger to prevent event capture
- Button now correctly triggers handleNewChat instead of opening dropdown
- Wrapped trigger and button in relative container for proper positioning
- Added 12px mono text 'menu' next to Goose icon
- Added gap-1.5 for spacing between icon and text
- Text uses text-text-muted for subtle appearance
@spencrmartin spencrmartin marked this pull request as ready for review January 22, 2026 20:57
@spencrmartin
Copy link
Copy Markdown
Collaborator Author

Added quick chat on menu

Screen.Recording.2026-01-22.at.3.57.43.PM.mov

@spencrmartin spencrmartin requested a review from zanesq January 22, 2026 21:12
spencrmartin and others added 15 commits January 22, 2026 16:28
* origin/main:
  fix: dispatch ADD_ACTIVE_SESSION event before navigating from "View All" (#6679)
  Speed up Databricks provider init by removing fetch of supported models (#6616)
  fix: correct typos in documentation and Justfile (#6686)
  docs: frameDomains and baseUriDomains for mcp apps (#6684)
  docs: add Remotion video creation tutorial (#6675)
  docs: export recipe and copy yaml (#6680)
  Test against fastmcp (#6666)
  docs: mid-session changes (#6672)
  Fix MCP elicitation deadlock and improve UX (#6650)
  chore: upgrade to rmcp 0.14.0 (#6674)
  [docs] add MCP-UI to MCP Apps blog (#6664)
  ACP get working dir from args.cwd (#6653)
  Optimise load config in UI (#6662)

# Conflicts:
#	ui/desktop/src/components/Layout/AppLayout.tsx
* 'main' of github.com:block/goose:
  Create default gooseignore file when missing (#6498)
  fix slash and @ keyboard navigation popover background color (#6550)
  fix[format/openai]: return error on empty msg. (#6511)
  Fix: ElevenLabs API Key Not Persisting (#6557)
  Logging uplift for model training purposes (command injection model) [Small change] (#6330)
  fix(goose): only send agent-session-id when a session exists (#6657)
  BERT-based command injection detection in tool calls (#6599)
  chore: [CONTRIBUTING.md] add Hermit to instructions (#6518)
  fix: update Gemini context limits (#6536)
  Document r slash command (#6724)
  Upgrade GitHub Actions to latest versions (#6700)
  fix: Manual compaction does not update context window. (#6682)
  Removed the Acceptable Usage Policy (#6204)
  Document spellcheck toggle (#6721)
  fix: docs workflow cleanup and prevent cancellations (#6713)
  Docs: file bug directly (#6718)
* 'main' of github.com:block/goose: (62 commits)
  Swap canonical model from openrouter to models.dev (#6625)
  Hook thinking status (#6815)
  Fetch new skills hourly (#6814)
  copilot instructions: Update "No prerelease docs" instruction (#6795)
  refactor: centralize audience filtering before providers receive messages (#6728)
  update doc to remind contributors to activate hermit and document minimal npm and node version (#6727)
  nit: don't spit out compaction when in term mode as it fills up the screen (#6799)
  fix: correct tool support detection in Tetrate provider model fetching (#6808)
  Session manager fixes (#6809)
  fix(desktop): handle quoted paths with spaces in extension commands (#6430)
  fix: we can default gooseignore without writing it out (#6802)
  fix broken link (#6810)
  docs: add Beads MCP extension tutorial (#6792)
  feat(goose): add support for AWS_BEARER_TOKEN_BEDROCK environment variable (#6739)
  [docs] Add OSS Skills Marketplace (#6752)
  feat: make skills available in codemode (#6763)
  Fix: Recipe Extensions Not Loading in Desktop (#6777)
  Different approach to determining final confidence level of prompt injection evaluation outcomes (#6729)
  fix: read_resource_tool deadlock causing test_compaction to hang (#6737)
  Upgrade error handling (#6747)
  ...
* 'main' of github.com:block/goose:
  Fix: Small update UI settings prompt injection (#6830)
  Remove autogenerated .gooseignore files that don't belong in repo (#6824)
  Fix case-insensitive matching for builtin extension names (#6825)
  docs: cli newline keybinding (#6823)
  Update version to 1.22.0 (#6821)
  Refactor: move persisting extension to session outside of route (#6685)
  acp: load configured extensions and refactor tests (#6803)
  docs: usage data collection (#6822)
  feat: platform extension migrator + code mode rename (#6611)
  feat: CLI flag to skip loading profile extensions (#6780)
* 'main' of github.com:block/goose:
  upgrade react and electron to latest (#6845)
localStorage.setItem('navigation_expanded', String(expanded));
}, []);

const setNavigationMode = useCallback((mode: NavigationMode) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is all messy and overcomplicated due to the global dom event system in place. I will follow up with cleaning this up when we move to a global state library.

Copy link
Copy Markdown
Contributor

@zanesq zanesq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok looking good now, using way less hooks and a single Navigation component with pure renderers. cc @DOsinga

Copy link
Copy Markdown
Collaborator

@alexhancock alexhancock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commented on a couple files it seems like may be unused, but LGTM otherwise! Nice

@zanesq zanesq enabled auto-merge February 23, 2026 16:50
@zanesq zanesq added this pull request to the merge queue Feb 23, 2026
@zanesq zanesq removed this pull request from the merge queue due to a manual request Feb 23, 2026
@zanesq zanesq merged commit 5349dd6 into main Feb 23, 2026
20 checks passed
@zanesq zanesq deleted the spence/nav branch February 23, 2026 16:56
zanesq added a commit that referenced this pull request Feb 23, 2026
…oviders

* 'main' of github.com:block/goose:
  New navigation settings layout options and styling (#6645)
  refactor: MCP-compliant theme tokens and CSS class rename (#7275)
  Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434)
  refactor: change open recipe in new window to pass recipe id (#7392)
  fix: handle truncated tool calls that break conversation alternation (#7424)
  streamline some github actions (#7430)
  Enable bedrock prompt cache (#6710)
  fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429)
  Display working dir (#7419)
  dev: add cmake to hermitized env (#7399)
  refactor: remove allows_unlisted_models flag, always allow custom model entry (#7255)
  feat: expose context window utilization to agent via MOIM (#7418)
  Small model naming (#7394)
  chore(deps): bump ajv in /documentation (#7416)
  doc: groq models (#7404)
  Client settings (#7381)
  Fix settings tabs getting cut off in narrow windows (#7379)

# Conflicts:
#	ui/desktop/src/components/settings/dictation/DictationSettings.tsx
michaelneale added a commit that referenced this pull request Feb 23, 2026
…xt-edit

* origin/main: (35 commits)
  docs: generate manpages (#7443)
  Blog/goose v1 25 0 release (#7433)
  fix: detect truncated LLM responses in apps extension (#7354)
  fix: removed unnecessary version for goose acp macro dependency (#7428)
  add flag to hide select voice providers (#7406)
  New navigation settings layout options and styling (#6645)
  refactor: MCP-compliant theme tokens and CSS class rename (#7275)
  Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434)
  refactor: change open recipe in new window to pass recipe id (#7392)
  fix: handle truncated tool calls that break conversation alternation (#7424)
  streamline some github actions (#7430)
  Enable bedrock prompt cache (#6710)
  fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429)
  Display working dir (#7419)
  dev: add cmake to hermitized env (#7399)
  refactor: remove allows_unlisted_models flag, always allow custom model entry (#7255)
  feat: expose context window utilization to agent via MOIM (#7418)
  Small model naming (#7394)
  chore(deps): bump ajv in /documentation (#7416)
  doc: groq models (#7404)
  ...
lifeizhou-ap added a commit that referenced this pull request Feb 24, 2026
* main:
  Simplified custom model flow with canonical models (#6934)
  feat: simplify the text editor to be more like pi (#7426)
  docs: add YouTube short embed to Neighborhood extension tutorial (#7456)
  fix: flake.nix build failure and deprecation warning (#7408)
  feat(claude-code): add permission prompt routing for approve mode (#7420)
  docs: generate manpages (#7443)
  Blog/goose v1 25 0 release (#7433)
  fix: detect truncated LLM responses in apps extension (#7354)
  fix: removed unnecessary version for goose acp macro dependency (#7428)
  add flag to hide select voice providers (#7406)
  New navigation settings layout options and styling (#6645)
  refactor: MCP-compliant theme tokens and CSS class rename (#7275)
  Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434)
  refactor: change open recipe in new window to pass recipe id (#7392)
  fix: handle truncated tool calls that break conversation alternation (#7424)
  streamline some github actions (#7430)
  Enable bedrock prompt cache (#6710)
  fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429)
  Display working dir (#7419)
lifeizhou-ap added a commit that referenced this pull request Feb 24, 2026
* main: (171 commits)
  fix: TLDR CLI tab in Neighborhood MCP docs (#7461)
  fix(summon): restore skill supporting files and directory path in load output (#7457)
  Simplified custom model flow with canonical models (#6934)
  feat: simplify the text editor to be more like pi (#7426)
  docs: add YouTube short embed to Neighborhood extension tutorial (#7456)
  fix: flake.nix build failure and deprecation warning (#7408)
  feat(claude-code): add permission prompt routing for approve mode (#7420)
  docs: generate manpages (#7443)
  Blog/goose v1 25 0 release (#7433)
  fix: detect truncated LLM responses in apps extension (#7354)
  fix: removed unnecessary version for goose acp macro dependency (#7428)
  add flag to hide select voice providers (#7406)
  New navigation settings layout options and styling (#6645)
  refactor: MCP-compliant theme tokens and CSS class rename (#7275)
  Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434)
  refactor: change open recipe in new window to pass recipe id (#7392)
  fix: handle truncated tool calls that break conversation alternation (#7424)
  streamline some github actions (#7430)
  Enable bedrock prompt cache (#6710)
  fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429)
  ...
aharvard added a commit that referenced this pull request Feb 24, 2026
* origin/main: (49 commits)
  add flag to hide select voice providers (#7406)
  New navigation settings layout options and styling (#6645)
  refactor: MCP-compliant theme tokens and CSS class rename (#7275)
  Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434)
  refactor: change open recipe in new window to pass recipe id (#7392)
  fix: handle truncated tool calls that break conversation alternation (#7424)
  streamline some github actions (#7430)
  Enable bedrock prompt cache (#6710)
  fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429)
  Display working dir (#7419)
  dev: add cmake to hermitized env (#7399)
  refactor: remove allows_unlisted_models flag, always allow custom model entry (#7255)
  feat: expose context window utilization to agent via MOIM (#7418)
  Small model naming (#7394)
  chore(deps): bump ajv in /documentation (#7416)
  doc: groq models (#7404)
  Client settings (#7381)
  Fix settings tabs getting cut off in narrow windows (#7379)
  docs: voice dictation updates (#7396)
  [docs] Add Excalidraw MCP App Tutorial (#7401)
  ...

# Conflicts:
#	ui/desktop/src/components/McpApps/McpAppRenderer.tsx
blackgirlbytes added a commit that referenced this pull request Mar 4, 2026
Add new documentation for the sidebar customization feature introduced
in PR #6645. Users can now change the sidebar's style (tile/list),
position (left/right/top/bottom), and mode (push/overlay), as well as
reorder and hide navigation items.

- New guide: documentation/docs/guides/desktop-navigation.md
- Add quick tip linking to the new guide in tips.md
blackgirlbytes added a commit that referenced this pull request Mar 4, 2026
Add new documentation for the sidebar customization feature introduced
in PR #6645. Users can now change the sidebar's style (tile/list),
position (left/right/top/bottom), and mode (push/overlay), as well as
reorder and hide navigation items.

- New guide: documentation/docs/guides/desktop-navigation.md
- Add quick tip linking to the new guide in tips.md
blackgirlbytes added a commit that referenced this pull request Mar 4, 2026
Add new documentation for the sidebar customization feature introduced
in PR #6645. Users can now change the sidebar's style (tile/list),
position (left/right/top/bottom), and mode (push/overlay), as well as
reorder and hide navigation items.

- New guide: documentation/docs/guides/desktop-navigation.md
- Add quick tip linking to the new guide in tips.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants