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

refactor(ui): remove legacy shell css

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 13:40:24 -07:00
parent 2ba846698f
commit db9b4557d8
2 changed files with 1 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,27 +80,12 @@ button {
cursor: pointer;
}
.app-shell {
min-height: 100vh;
padding-left: 280px;
}
.sidebar {
border-right: 1px solid var(--nl-border-default);
background: var(--nl-surface-sidebar);
backdrop-filter: blur(16px);
}
.main-panel {
min-width: 0;
padding: var(--nl-space-8);
padding-left: calc(var(--bl-app-sidebar-width, 280px) + var(--nl-space-8));
}
.app-shell > .sidebar {
width: 280px;
}
.surface-card {
border: 1px solid var(--nl-border-default);
border-radius: var(--nl-radius-md);
@ -150,15 +135,6 @@ button {
}
@media (max-width: 980px) {
.app-shell {
padding-left: 0;
}
.sidebar {
border-right: 0;
border-bottom: 1px solid var(--nl-border-default);
}
.main-panel {
padding: var(--nl-space-5);
}
@ -222,36 +198,6 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
border: 2px solid var(--nl-accent-primary); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
}
/* Responsive sidebar */
@media (max-width: 768px) {
.app-sidebar {
position: fixed !important;
left: -280px !important;
top: 0 !important;
z-index: 40;
width: 260px !important;
height: 100vh !important;
transition: left 0.2s ease;
overflow-y: auto;
}
.app-sidebar.open { left: 0 !important; }
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: var(--nl-overlay-scrim); }
.sidebar-overlay.open { display: block; }
.sidebar-toggle {
display: flex; align-items: center; justify-content: center;
position: fixed; top: 12px; left: 12px; z-index: 38;
width: 40px; height: 40px; border-radius: 8px;
border: 1px solid var(--nl-border-default);
background: var(--nl-bg-elevated);
color: var(--nl-text-primary);
cursor: pointer; font-size: 20px; line-height: 1;
}
}
@media (min-width: 769px) {
.sidebar-toggle { display: none !important; }
.sidebar-overlay { display: none !important; }
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
@ -261,75 +207,3 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
scroll-behavior: auto !important;
}
}
/* ── Responsive Sidebar ──────────────────────────────────────── */
.app-layout {
display: flex;
min-height: 100vh;
}
.app-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 40;
transition: transform 0.22s ease;
}
.app-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--nl-overlay-scrim);
z-index: 39;
}
.app-main {
flex: 1;
min-width: 0;
}
@media (max-width: 768px) {
.app-sidebar {
transform: translateX(-100%);
}
.app-sidebar[data-open="true"] {
transform: translateX(0);
}
.app-sidebar-overlay[data-open="true"] {
display: block;
}
.app-main {
margin-left: 0 !important;
}
}
@media (min-width: 769px) {
.app-sidebar {
transform: translateX(0);
}
}
.mobile-menu-btn {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 38;
width: 40px;
height: 40px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 20px;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: flex;
}
}

2
web/src/components/Sidebar.tsx
View File

@ -17,7 +17,7 @@ export function Sidebar({ open }: { open?: boolean }) {
const pathname = usePathname() ?? "";
return (
<AppShellSidebar open={open ?? false} width={280} className="sidebar p-[var(--nl-space-6)]">
<AppShellSidebar open={open ?? false} width={280} className="p-[var(--nl-space-6)]">
<div style={{ display: "grid", gap: "var(--nl-space-6)" }}>
<Panel as="div" style={{ display: "grid", gap: "var(--nl-space-3)" }}>
<Badge style={{ width: "fit-content" }}>