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

CUB-27: Responsive layout and adaptive navigation
All checks were successful
Dev Build / build-test (pull_request) Successful in 2m46s
Details

Browse Source
This commit is contained in:
rex-bot
2026-04-28 08:43:57 -04:00
committed by Rex
parent 048101e85c
commit 999f6614ce
13 changed files with 558 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/app/layout/nav-rail/nav-rail.component.scss
View File

@@ -1,11 +1,14 @@
// ============================================================================
// Nav Rail — Desktop/Kiosk Navigation
// Per spec Section 3.1: 72px collapsed / 256px expanded
// Per CUB-27 spec breakpoints:
// Compact (0–599px): Hidden — bottom nav takes over
// Medium (600–1023px): Collapsed (72px), icon-only
// Expanded (≥1024px): Expandable (72px collapsed / 256px expanded on hover)
// Section 5.4: Spacing & Grid
// ============================================================================
.nav-rail {
display: flex;
display: none; // Hidden by default (mobile-first)
flex-direction: column;
width: var(--cc-nav-rail-collapsed-width);
min-height: 100vh;
@@ -104,9 +107,52 @@
text-overflow: ellipsis;
}
// Responsive: Hide nav rail on mobile (bottom nav takes over)
@media (max-width: 599px) {
// ---------------------------------------------------------------------------
// Medium (600–1023px): Show collapsed nav rail (icon-only)
// ---------------------------------------------------------------------------
@media (min-width: 600px) and (max-width: 1023px) {
.nav-rail {
display: flex;
width: var(--cc-nav-rail-collapsed-width);
}
// Always collapsed on medium — hide labels
.nav-rail__brand,
.nav-rail__label {
display: none;
}
.nav-rail__header {
justify-content: center;
padding: 16px 0;
}
.nav-rail__item {
justify-content: center;
padding: 0;
margin: 2px 8px;
}
// Disable expand on medium
.nav-rail--expanded {
width: var(--cc-nav-rail-collapsed-width);
}
}
// ---------------------------------------------------------------------------
// Expanded (≥1024px): Full expandable nav rail
// ---------------------------------------------------------------------------
@media (min-width: 1024px) {
.nav-rail {
display: flex;
}
}
// ---------------------------------------------------------------------------
// Accessibility: Reduced Motion
// ---------------------------------------------------------------------------
@media (prefers-reduced-motion: reduce) {
.nav-rail {
transition: none;
}
}