CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-50: Implement Adaptive Navigation Component #9

Closed
overseer wants to merge 0 commits from agent/rex/CUB-50-adaptive-navigation into dev
pull from: agent/rex/CUB-50-adaptive-navigation
merge into: CubeCraft-Creations:dev
Conversation 0 Commits - Files Changed - +482
overseer commented 2026-04-26 09:34:57 -04:00
Owner
Copy Link

CUB-50: Adaptive Navigation Component

Creates a navigation component that adapts between Kiosk/Desktop and Mobile layouts.

What it does

  • Desktop (≥768px): 72px sidebar with full navigation items, LIVE indicator, and action buttons
  • Mobile (<768px): 56px compact header with hamburger menu, LIVE indicator, and action button
  • Uses @media queries to switch between layouts
  • LIVE status indicator visible in both modes (green dot + chip/text)
  • Mobile slide-in drawer for navigation
  • Accessible: aria-label, aria-expanded, semantic HTML
  • Respects prefers-reduced-motion

Files created

  • frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.ts
  • frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.html
  • frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.scss
  • frontend/src/app/components/adaptive-navigation/index.ts

Validation

  • ✅ Build passes (npm run build)
  • ✅ Desktop shows full sidebar
  • ✅ Mobile shows compact header
  • ✅ LIVE indicator visible in both
  • ✅ Media queries at 768px breakpoint
  • ✅ Accessible with ARIA attributes
  • ✅ Reduced-motion support
## CUB-50: Adaptive Navigation Component Creates a navigation component that adapts between Kiosk/Desktop and Mobile layouts. ### What it does - **Desktop (≥768px)**: 72px sidebar with full navigation items, LIVE indicator, and action buttons - **Mobile (<768px)**: 56px compact header with hamburger menu, LIVE indicator, and action button - Uses `@media` queries to switch between layouts - LIVE status indicator visible in both modes (green dot + chip/text) - Mobile slide-in drawer for navigation - Accessible: `aria-label`, `aria-expanded`, semantic HTML - Respects `prefers-reduced-motion` ### Files created - `frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.ts` - `frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.html` - `frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.scss` - `frontend/src/app/components/adaptive-navigation/index.ts` ### Validation - ✅ Build passes (`npm run build`) - ✅ Desktop shows full sidebar - ✅ Mobile shows compact header - ✅ LIVE indicator visible in both - ✅ Media queries at 768px breakpoint - ✅ Accessible with ARIA attributes - ✅ Reduced-motion support
overseer added 1 commit 2026-04-26 09:34:58 -04:00
CUB-50: Implement Adaptive Navigation Component d2da0c160f
Otto was assigned by overseer 2026-04-26 09:36:46 -04:00
Rex closed this pull request 2026-04-26 11:17:55 -04:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Dex Grimm Hex Nano Otto overseer Pip Rex Sketch
No Assignees Otto
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CubeCraft-Creations/Control-Center#9
Delete Branch "agent/rex/CUB-50-adaptive-navigation"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?