diff --git a/web/src/app/globals.css b/web/src/app/globals.css index b043a79..c2b18bb 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -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; - } -} diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 2d21bf4..a1cd53a 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -17,7 +17,7 @@ export function Sidebar({ open }: { open?: boolean }) { const pathname = usePathname() ?? ""; return ( - +