Navigation

Learn how to navigate CodePlanet efficiently using the sidebar, keyboard shortcuts, and command palette.

The sidebar is your primary navigation tool. It can be expanded (showing icons + text) or collapsed (icons only).

Method	Action
Button	Click the collapse/expand button at the top of the sidebar
Keyboard	Press `Ctrl+B` (Windows/Linux) or `Cmd+B` (Mac)
Mobile	Swipe from the left edge of the screen

Section	Icon	Description
Home	🏠	Dashboard overview
Problems	💻	Browse and solve problems
Learning Paths	🗺️	Structured courses
Daily Challenge	⚡	Today's problem
Certificates	🎖️	Your earned certificates
Settings	⚙️	Account preferences
Help	❓	Documentation and support

Visual States

Expanded Sidebar (240px)

┌──────────────────────┐
│ 🏠 Home              │
│ 💻 Problems          │
│ 🗺️ Learning Paths    │
│ ⚡ Daily Challenge   │
│ ────────────────     │
│ ⚙️ Settings          │
│ ❓ Help              │
└──────────────────────┘

Collapsed Sidebar (64px)

┌────┐
│ 🏠 │
│ 💻 │
│ 🗺️ │
│ ⚡ │
│ ── │
│ ⚙️ │
│ ❓ │
└────┘

Command Palette

The command palette (Ctrl+K or Cmd+K) provides quick access to any feature:

┌─────────────────────────────────────────────┐
│ 🔍 Search commands and pages...             │
├─────────────────────────────────────────────┤
│ 📄 Go to Problems                           │
│ 📄 Go to Daily Challenge                    │
│ 📄 Go to Learning Paths                     │
│ ⚡ Submit Solution                          │
│ 🔧 Open Settings                            │
│ 📖 Open Documentation                       │
└─────────────────────────────────────────────┘

Available Commands

Command	Action
`Go to [page]`	Navigate to any page
`Search [query]`	Search problems
`Submit`	Submit current solution
`Run Tests`	Test without submitting
`Settings`	Open settings
`Theme`	Toggle dark/light mode
`Logout`	Sign out

Global Shortcuts

Shortcut	Action
`Ctrl+K` / `Cmd+K`	Open command palette
`Ctrl+B` / `Cmd+B`	Toggle sidebar
`Ctrl+/` / `Cmd+/`	Open search
`?`	Show all shortcuts
`Escape`	Close modal/menu

Go-To Shortcuts

Press G followed by another key to navigate:

Shortcut	Destination
`G H`	Home (Dashboard)
`G P`	Problems list
`G D`	Daily Challenge
`G L`	Learning Paths
`G S`	Settings
`G O`	Documentation

Problem Page Shortcuts

Shortcut	Action
`Ctrl+Enter`	Submit solution
`Ctrl+Shift+Enter`	Run tests
`Ctrl+S`	Save draft
`Ctrl+R`	Reset code
`Tab`	Focus code editor

Shortcut	Action
`J` / `K`	Move down/up in lists
`Enter`	Select focused item
`[` / `]`	Previous/Next problem
`H` / `L`	Previous/Next page

On mobile devices (< 768px):

Tap the hamburger menu (☰) to open
Tap outside or swipe left to close
Tap any item to navigate

Quick access to key sections:

┌───────────────────────────────────────────┐
│  🏠     💻     ⚡     🗺️     ⚙️         │
│ Home  Problems Daily  Paths Settings      │
└───────────────────────────────────────────┘

Gestures

Swipe right from left edge: Open sidebar
Swipe left on sidebar: Close sidebar
Pull down on lists: Refresh

On deeper pages, breadcrumbs show your location:

Dashboard > Problems > Two Sum

Click any part to navigate back.

Some sections have tabbed interfaces:

┌─────────────────────────────────────────────┐
│  [All] [Easy] [Medium] [Hard] [Solved]     │
├─────────────────────────────────────────────┤
│  Problem list filtered by selection...      │
└─────────────────────────────────────────────┘

Switch tabs with:

Click the tab
1-5 number keys
Arrow keys when focused

Focus Management

Press Tab on any page to reveal a "Skip to content" link.

Focus Trapping

When modals/drawers open, focus is trapped inside and restored on close.

Focus Indicators

All interactive elements have visible focus rings (:focus-visible).

Accessibility

Navigation is fully accessible:

Feature	Implementation
ARIA Labels	All buttons/links labeled
Landmarks	Semantic regions (`nav`, `main`, `aside`)
Screen Reader	Sidebar state announced
Reduced Motion	Animations respect user preference
Keyboard Only	Full navigation without mouse

Next Steps

Keyboard Shortcuts — Complete shortcut reference
Accessibility — Full accessibility guide
Dashboard Overview — Dashboard features

Sidebar Navigation

Toggle the Sidebar

Sidebar Sections

Visual States

Command Palette

Available Commands

Keyboard Navigation

Global Shortcuts

Go-To Shortcuts

Problem Page Shortcuts

Navigation Shortcuts

Mobile Navigation

Sidebar Drawer

Bottom Navigation