/* Global CSS for optimized sidebar performance */ /* Sidebar collapse animations - uses CSS transforms for better performance */ [data-sidebar] { transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); width: 16rem; /* w-64 */ height: 100vh; position: fixed; top: 0; left: 0; z-index: 40; } [data-sidebar].sidebar-collapsed { width: 4rem; /* w-16 */ } /* Adjust main content margin when sidebar collapses */ [data-sidebar].sidebar-collapsed ~ .main-content { margin-left: 4rem; /* w-16 */ } [data-sidebar].sidebar-collapsed .sidebar-text { opacity: 0; width: 0; overflow: hidden; transition: opacity 150ms ease-out; } [data-sidebar].sidebar-collapsed .sidebar-logo { opacity: 0; transition: opacity 150ms ease-out; } [data-sidebar].sidebar-collapsed .sidebar-user-info { opacity: 0; transition: opacity 150ms ease-out; } /* Tooltip styles for collapsed sidebar */ [data-sidebar].sidebar-collapsed .sidebar-tooltip { position: absolute; left: 4rem; top: 50%; transform: translateY(-50%); z-index: 50; background-color: rgb(31, 41, 55); color: white; padding: 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; } [data-sidebar].sidebar-collapsed .sidebar-item:hover .sidebar-tooltip { opacity: 1; } /* Performance optimizations */ [data-sidebar] * { will-change: auto; /* Reset will-change when not needed */ } [data-sidebar].sidebar-collapsed * { will-change: opacity, width; } /* Fresh navigation active states using [data-current] */ .nav-item[data-current] { background-color: var(--color-gray-150) !important; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { [data-sidebar] { transition: none; } [data-sidebar].sidebar-collapsed .sidebar-text, [data-sidebar].sidebar-collapsed .sidebar-logo, [data-sidebar].sidebar-collapsed .sidebar-user-info { transition: none; } } /* * Desktop app title bar. * * The desktop shell opens its window with a transparent title bar, so the page * paints all the way to the top edge and there is no separate band of chrome * above the sidebar. The window controls then float over our own background, * and the workspace row has to step aside for them. * * `data-desktop` is stamped onto by the desktop proxy, never by the * hosted app, so none of this can affect the website. Its value is the OS, * because the controls sit left on macOS and right elsewhere. */ [data-desktop="darwin"] .sidebar-titlebar-row { /* Clears the traffic lights, which span roughly 78px from the window edge. */ padding-left: 78px; } /* * Structural fallback, for the window between writing this and deploying. * * The desktop app serves this stylesheet from the binary but proxies HTML from * production, so `.sidebar-titlebar-row` above does not exist in the page until * the markup change ships. `.layout-sidebar-left` is a stable, non-utility class * and the workspace row is the first child of the sidebar's flex column. * * Safe to delete once the LeftSidebar.tsx change is deployed. */ [data-desktop="darwin"] .layout-sidebar-left .h-full.flex.flex-col > div:first-child { padding-left: 78px; } /* * Windows and Linux put their controls top-right, which is over the content * pane rather than the sidebar, so the workspace row keeps its normal inset and * only needs to avoid the very top edge. */ [data-desktop="windows"] .sidebar-titlebar-row, [data-desktop="linux"] .sidebar-titlebar-row { padding-top: 2rem; }