bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add responsive sidebar CSS breakpoints for mobile

Browse Source
This commit is contained in:
saravanakumardb1 2026-03-28 23:30:02 -07:00
parent 7ee0c6d481
commit e362f2aefe
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/app/globals.css
View File

@ -236,6 +236,27 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
border: 2px solid var(--nl-accent); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
}
/* Responsive sidebar */
@media (max-width: 768px) {
.app-sidebar {
position: fixed;
left: -260px;
top: 0;
z-index: 40;
width: 240px;
height: 100vh;
transition: left 0.2s ease;
}
.app-sidebar.open { left: 0; }
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,0.5); }
.sidebar-overlay.open { display: block; }
.sidebar-toggle { display: flex; }
}
@media (min-width: 769px) {
.sidebar-toggle { display: none; }
.sidebar-overlay { display: none; }
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {