Skip to content

Sidebar Navigation & App Shell Improvements #310

@ElioNeto

Description

@ElioNeto

Sidebar Navigation & App Shell Improvements

Improve the Angular app shell with better navigation, breadcrumbs, search, and status indicators.

Current State

  • Static sidebar with hardcoded nav groups
  • No breadcrumbs
  • No global search
  • No server status indicator
  • VERSION is hardcoded in component

Requirements

1. Dynamic Sidebar Navigation

  • Config-driven: Navigation items defined in a config/service rather than hardcoded in template
  • Group Collapse: Collapsible nav groups with expand/collapse toggle
  • Badge Notifications: Optional badge count per nav item (e.g., compaction running)
  • Recent Items: Recently accessed pages at top of sidebar
  • Pin/Unpin: Pin favorite pages to top

2. Navigation Structure Update

Current groups:

General:    Dashboard, Statistics
Data:       Key Explorer, Feature Flags
Admin:      Tokens

Proposed groups:

Dashboard:  Overview, Health
Data:       Key Explorer, SQL Query, Search
Storage:    Compaction, Snapshots, Backups
Monitoring: Stats, Metrics, Rate Limits, Resilience
Integration:Replication, Webhooks, Pub/Sub, Data Sync
Admin:      Tokens, Access Control, Features, Models

3. Top Bar

  • Server Status: Green/Red dot + "Connected"/"Disconnected" label
  • Version: Display server version (fetched from API)
  • Clock: Current time
  • Theme Toggle: Dark/Light mode button
  • User Menu: Token management, logout

4. Breadcrumbs

  • Display current page path (e.g., Data > Key Explorer)
  • Clickable segments for navigation
  • Dynamically generated from route config

5. Global Search

  • Search Bar: In top bar, searches keys across the store
  • Keyboard Shortcut: Ctrl+K or Cmd+K to focus search
  • Results Dropdown: Quick results with link to full Key Explorer

Acceptance Criteria

  • Sidebar nav groups are collapsible
  • Server status indicator shows connection state
  • Breadcrumbs show correct path on every page
  • Global search returns results from API
  • Version info is dynamic (not hardcoded)
  • Navigation structure matches the proposed layout
  • Keyboard shortcuts work

Parent Epic

#290

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions