/** * sidebar.css * * The collapsible half of the admin sidebar. The sidebar itself (position, * width, link colours) lives in admin.css; everything here is about the * collapsed state and the control that gets you into it. * * The state class sits on , not on . It is written by sidebar.js * from the head, before the body element exists, so that a reader who left the * sidebar collapsed never sees it flash open on the next page load. */ /* The control itself: a small round button on the sidebar's right edge, so it reads as belonging to the boundary it moves rather than to the menu. */ .sidebar-toggle { position: absolute; /* The sidebar's box starts at y=0 and is padded down 48px to clear the fixed navbar, so an absolute offset has to clear it too — 8px above that would put the button behind the navbar, which sits far higher in the stack. */ top: 56px; right: -14px; z-index: 101; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, .12); border-radius: 50%; background: #fff; color: #555; font-size: 12px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); cursor: pointer; } .sidebar-toggle:hover { color: #000; background: #f1f1f1; } .sidebar-toggle:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, .35); } /* The icon column every menu label starts with. Fixed width rather than intrinsic, so the labels line up under each other whatever the glyph. */ .sidebar-icon { display: inline-block; width: 1.25rem; margin-right: .5rem; text-align: center; color: #999; } .sidebar .nav-link.active .sidebar-icon, .sidebar .nav-item.active > .nav-link .sidebar-icon { color: inherit; } /* -------------------------------------------------------------------------- Collapsed state — md and up only -------------------------------------------------------------------------- The sidebar carries `d-md-block` on top of `collapse`, and Bootstrap's display utilities are !important, so from 768px up it is permanently on screen and the navbar's hamburger does nothing. Below that it is a plain collapse: full width or not there at all, where a second control that makes it 56px wide would only be a way to get stuck. So the whole collapsed state is scoped to the breakpoint where the sidebar is always visible, rather than declared and then undone underneath it. */ @media (min-width: 768px) { /* The width change is the whole effect, so it is the only thing animated — fading the labels as well only makes the motion look slower than it is. */ .sidebar, main[role="main"] { transition: width .15s ease, max-width .15s ease, flex-basis .15s ease; } html.sidebar-collapsed .sidebar { width: 56px; max-width: 56px; flex: 0 0 56px; } /* The main column is pushed right by `ml-sm-auto` rather than by a margin of its own, so giving it the remaining width is enough to close the gap. */ html.sidebar-collapsed main[role="main"] { max-width: calc(100% - 56px); flex: 0 0 calc(100% - 56px); } /* What is left when there is no room for words: the icons, centred. !important throughout, because every one of these carries a Bootstrap display utility (`d-flex` on the heading, `d-flex` on the settings link's arrow) and those are !important themselves. */ html.sidebar-collapsed .sidebar .sidebar-label, html.sidebar-collapsed .sidebar .sidebar-heading, html.sidebar-collapsed .sidebar #settings-arrow { display: none !important; } /* The settings submenu is eleven text-only entries with nowhere to go in a 56px column, so it closes with the sidebar. sidebar.js also resets the inline `display` and the arrow, which is what this has to beat while that has not run yet — and what keeps the submenu from springing back open on its own when the sidebar is expanded again. */ html.sidebar-collapsed .sidebar #settings-submenu { display: none !important; } /* !important because the settings toggle carries Bootstrap's `justify-content-between` utility, and those are !important themselves. */ html.sidebar-collapsed .sidebar .nav-link { justify-content: center !important; padding-left: 0; padding-right: 0; text-align: center; } html.sidebar-collapsed .sidebar .sidebar-icon { margin-right: 0; } }