✨ Navigation - Move primary navigation from top bar to sidebar to match Figma

[joshbermanssw]

▶️ Watch the video (00:35)

Cc: @ricksu978 @adamcogan @calumjs
Hi

Pain

Designers have provided a Figma mock with a left sidebar intended to be the app navigation, but the Electron app currently places navigation in the top bar. This inconsistency causes confusion and makes the implemented UI diverge from the approved design.

Suggested Solution

Update the Electron app shell/layout so navigation is rendered in a left sidebar consistent with the Figma design, and remove/replace the current top-bar navigation.

Acceptance Criteria

1. App navigation is displayed in a left sidebar consistent with the current Figma design.
2. Top bar navigation is removed or no longer used for primary navigation.
3. All existing navigation destinations remain accessible via the sidebar.
4. Sidebar navigation state indicates the currently active route.

Tasks

• Locate the current top-bar navigation component and its layout integration.
• Implement a sidebar navigation component matching the Figma structure.
• Wire sidebar items to existing routes so all destinations are reachable.
• Remove the top-bar navigation links from the app shell.
• Add active-route styling for the selected sidebar item.
• Verify navigation works across all windows/views without layout regressions.

More Information

Transcription context: Designers created a sidebar navigation in Figma, but the app currently uses top-bar navigation.

Screenshots

Thanks!

[joshbermanssw]

✅ Done and deployed

Figure: Sidebar for navigation