/* Sidebar layout styles */ #page-wrapper { min-height: 100vh; } .sidebar { width: 220px; min-height: 100vh; transition: margin-left 0.25s ease-out; } /* The menu stays on screen while the page scrolls. On a long page - the dashboard being the worst offender - the whole navigation otherwise scrolls off the top, so reaching another section means scrolling back up first. align-self is load-bearing here: #page-wrapper is a flex row and its items stretch to full height by default, and a sticky item that already fills its container has nowhere to move to. Desktop only: below 768px the sidebar is off-canvas and position:fixed already, and sticky would fight that. */ @media (min-width: 768px) { .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; min-height: 0; overflow-y: auto; } } .sidebar-brand img { max-width: 100%; } .sidebar-nav .nav-link { padding: 0.65rem 1.25rem; border-radius: 0; font-weight: 500; } .sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background-color: rgba(0, 0, 0, 0.05); } .sidebar-heading { padding: 0.9rem 1.25rem 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6c757d; } #page-content-wrapper { min-width: 0; } .sidebar-brand-mark { display: none; height: 32px; } .sidebar-toggle { color: #6c757d; line-height: 1; } .sidebar-toggle:hover, .sidebar-toggle:focus-visible { color: #14508f; } /* Collapsed: an icon RAIL, not a disappearance. The previous behaviour set display:none on the whole sidebar from a control in the account dropdown. Collapsing to a rail keeps the toggle and every icon on screen, so the menu can always be brought back from the menu itself, and the icons stay usable while collapsed. Scoped to desktop: below 768px the sidebar is already off-canvas and driven by the hamburger's .show class, so collapsing it here would fight that. The class sits on rather than so the inline script in can apply it before first paint - applied after load, the full-width menu visibly flashes before narrowing. */ @media (min-width: 768px) { html.sidebar-collapsed .sidebar { width: 64px; } html.sidebar-collapsed .nav-label { display: none; } html.sidebar-collapsed .sidebar-heading { padding: 0.5rem 0; } /* A heading with its text hidden would otherwise leave an unexplained gap. */ html.sidebar-collapsed .sidebar-heading::after { content: ""; display: block; margin: 0 auto; width: 24px; border-top: 1px solid rgba(0, 0, 0, 0.1); } html.sidebar-collapsed .sidebar-nav .nav-link { padding: 0.65rem 0; text-align: center; } html.sidebar-collapsed .sidebar-nav .nav-link i { margin-right: 0 !important; } html.sidebar-collapsed .sidebar-head { flex-direction: column; } html.sidebar-collapsed .sidebar-brand img:not(.sidebar-brand-mark) { display: none; } html.sidebar-collapsed .sidebar-brand-mark { display: inline-block; } } /* Mobile: sidebar collapses off-canvas */ @media (max-width: 767.98px) { .sidebar { position: fixed; top: 0; left: 0; z-index: 1045; margin-left: -220px; } .sidebar.show { margin-left: 0; } }