/* ===================================================================== assets/css/lw-sidebar.css — collapsed (icon) sidebar repair --------------------------------------------------------------------- Load AFTER app.css. Every rule here is scoped to [data-sidebar-size=sm] and changes nothing in any other mode. WHY THIS FILE EXISTS Velzon's icon-mode sidebar is built on the assumption that the icon list is short enough to never need scrolling. This console's menu is not. Three vendor rules in app.css follow from that assumption, and all three are wrong here: 1. [data-sidebar-size=sm] .navbar-menu { position: absolute; } The expanded sidebar is position: fixed with top:0; bottom:0. Icon mode overrides it to absolute, which anchors the sidebar to the top of the DOCUMENT instead of the viewport — so it scrolls away with the page. That is the "it doesn't stay static" symptom. 2. [data-sidebar-size=sm] { min-height: 1400px; } A hack that props the document open far enough for that absolutely-positioned sidebar to have somewhere to live. It also forces a page scrollbar onto every short page. Once the sidebar is fixed again, it is not merely unnecessary — it is harmful. 3. [data-sidebar-size=sm] .navbar-menu .simplebar-mask, [data-sidebar-size=sm] .navbar-menu .simplebar-content-wrapper { overflow: visible !important; } [data-sidebar-size=sm] .navbar-menu .simplebar-scrollbar { display: none !important; } Scrolling is switched off outright, because the vendor's icon list always fits and because hover flyouts have to escape the sidebar's box. With a menu that does not fit, everything past the fold is simply unreachable. That is the "cut off" symptom. THE TRADE THIS FILE MAKES A box cannot both scroll vertically and let content spill horizontally: CSS computes overflow: visible to auto on the other axis the moment one axis scrolls. So restoring the scroll costs the flyouts their escape route — unless the flyouts stop depending on it. They do here. Switching .menu-dropdown from absolute to fixed takes it out of the scroll container's overflow entirely. Placement still works with no JavaScript: a fixed box with top: auto is laid out at its STATIC position, which is exactly where the absolute version sat. Only left needs restating, because a fixed box measures it from the viewport rather than from the .nav-item. The hover-expanding label on a leaf icon is the one thing that cannot be rescued this way — it is the itself widening, so it cannot be lifted out of flow without collapsing the row. Where the browser supports overflow-clip-margin (Chrome 90+, Firefox 102+, Safari 16+) it still paints. Everywhere else it is clipped at the icon, and the title="" attributes already on the sidebar links carry the name instead. SPECIFICITY NOTE The vendor rules use !important at (0,4,0). Ours therefore lead with html[data-layout=...][data-sidebar-size=sm] .app-menu.navbar-menu, which is (0,5,1) or better. Do not "simplify" these selectors. ===================================================================== */ :root { /* Height of .navbar-brand-box, which is position:fixed over the top of the sidebar in icon mode. Vendor hard-codes 70px in several places. */ --lw-sidebar-brand-h: 70px; /* Clearance under the last menu item when the list is scrolled to the bottom. The expanded sidebar gets this from .navbar-menu { padding-bottom: calc(70px + 25px) }, which section 1 has to zero out in icon mode — so it is reapplied inside the scroll content instead, where it actually lengthens the scroll range. Sized to clear the floating chat launcher in the bottom-left corner, which sits over the icon rail and would otherwise cover Logout. */ --lw-sidebar-bottom-gap: 120px; } /* ===================================================================== 1. Pin the sidebar to the viewport, exactly like the expanded one ===================================================================== */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu { position: fixed !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; /* mobile browser chrome; ignored where unsupported */ /* The base rule adds padding-bottom: calc(70px + 25px), which was there to keep the last item clear of a footer that icon mode does not have. Kept as height on the scroller below instead. */ padding-bottom: 0 !important; } /* Undo the 1400px document prop. */ html[data-layout=vertical][data-sidebar-size=sm], html[data-layout=semibox][data-sidebar-size=sm] { min-height: 0 !important; } @media (min-width: 768px) { html[data-layout=vertical][data-sidebar-size=sm], html[data-layout=semibox][data-sidebar-size=sm] { min-height: 0 !important; } } /* ===================================================================== 2. Give the icon list a real scroll container ===================================================================== */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu #scrollbar, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu #scrollbar { height: calc(100vh - var(--lw-sidebar-brand-h)) !important; max-height: calc(100vh - var(--lw-sidebar-brand-h)) !important; overflow: hidden !important; } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-wrapper, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-wrapper, html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-height-auto-observer-wrapper, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-height-auto-observer-wrapper { height: 100% !important; max-height: none !important; } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-mask, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-mask { overflow: hidden !important; height: 100% !important; } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-offset, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-offset { bottom: 0 !important; height: 100% !important; } /* THE scroll container. overflow-x is declared twice on purpose: a browser that does not understand `clip` drops that line and keeps `hidden`, which scrolls correctly and merely clips the hover label. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper { height: 100% !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; overflow-x: clip !important; overflow-clip-margin: 300px; overscroll-behavior: contain; /* Firefox. See the scrollbar section below for why this element, and not SimpleBar's overlay thumb, is the one that gets styled. */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.32) transparent; } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content { height: auto !important; max-height: none !important; /* Breathing room so the last items clear the chat launcher. */ padding-bottom: var(--lw-sidebar-bottom-gap) !important; } /* Restate the vendor's display:none for menu groups at THIS file's specificity. Without it a .collapse.show — which Bootstrap sets, and which lw-menu.js's expandAncestors() sets for the active page's group — can leak a second copy of the submenu into the flow. Section 3 turns exactly one of these back on, on hover. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .menu-dropdown, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .menu-dropdown { display: none !important; height: auto !important; } /* --------------------------------------------------------------------- The scrollbar. FIRST ATTEMPT, AND WHY IT DID NOT SHOW The obvious move was to un-hide SimpleBar's overlay thumb, since that is what the expanded sidebar uses. It never appeared. SimpleBar only draws a thumb for a scroll range it computed itself, and this file took that computation away from it: section 2 overrides the heights and the overflow of every element in the SimpleBar chain with !important, so SimpleBar's cached geometry no longer describes the box that is actually scrolling. Its track stays zero-height or hidden, and no amount of display:block on .simplebar-scrollbar puts a thumb on screen. Forcing a recalculate() from lw-menu.js would paper over it until the next resize. So the scrollbar is taken from the element we DO control — the one with overflow-y: auto in section 2 — using native styling. That element is scrolling by definition, so its bar exists by definition. 6px, and it occupies layout width rather than overlaying. Out of 70px that is affordable, and it means the bar can never sit on top of an icon. Scoped to icon mode on purpose. The expanded sidebar has the same invisible-thumb problem for the same reason; fixing it there means loading subtle-scrollbars.css, which is a console-wide change. --------------------------------------------------------------------- */ /* SimpleBar's own thumb stays hidden — vendor already does this in icon mode, and this file no longer fights it. Restated so a future edit does not accidentally produce two scrollbars side by side. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-scrollbar, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-scrollbar, html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-track, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-track { display: none !important; } /* WebKit / Chromium / Edge / Safari. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar { width: 6px; height: 0; } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-track, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-track { background: transparent; } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.24); border-radius: 3px; transition: background-color 0.18s ease-in-out; } /* Clearer once the pointer is in the sidebar, clearer still on the thumb. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu:hover .simplebar-content-wrapper::-webkit-scrollbar-thumb, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu:hover .simplebar-content-wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.42); } html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb:hover, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.62); } /* A light sidebar needs the opposite contrast. */ html[data-sidebar=light][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; } html[data-sidebar=light][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.22); } html[data-sidebar=light][data-sidebar-size=sm] .app-menu.navbar-menu:hover .simplebar-content-wrapper::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.38); } html[data-sidebar=light][data-sidebar-size=sm] .app-menu.navbar-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.55); } /* The inner SimpleBar app.js puts on #navbar-nav must never impose its own ceiling, or it clips the tail of the list inside the outer scroller. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu #navbar-nav, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu #navbar-nav, html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu #navbar-nav .simplebar-content-wrapper, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu #navbar-nav .simplebar-content-wrapper, html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu #navbar-nav .simplebar-content, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu #navbar-nav .simplebar-content { height: auto !important; max-height: none !important; overflow: visible !important; } /* ===================================================================== 3. Flyouts — EXACTLY ONE, and it must escape the scroll container --------------------------------------------------------------------- The first cut of this file made every hover flyout position:fixed. That produced a SECOND panel low on the screen alongside the correct one, so the scheme is now chosen by capability instead of applied blindly, and only one is ever live: * overflow-clip-margin supported -> leave the flyout ABSOLUTE, the way the vendor has it. The clip margin set in section 2 lets it paint outside the 70px column, which is the only thing it needed. This is the placement that looks right. * not supported (overflow-x falls back to hidden) -> fixed, which ignores the clipping entirely. Placement is less exact, but the alternative on those browsers is a flyout sliced off at the icon. Chrome/Edge 90+, Firefox 102+ and Safari 16+ all take the first branch. Section 2 restates display:none for every .menu-dropdown at this file's specificity, so nothing can render a panel except the rule below — a stray .show left on a collapse by Bootstrap or by lw-menu.js's expandAncestors() can no longer put a second copy in the flow. ===================================================================== */ /* Fallback branch: no overflow-clip-margin. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown { display: block !important; position: fixed !important; left: var(--vz-vertical-menu-width-sm) !important; top: auto !important; max-height: 80vh; overflow-y: auto; overflow-x: hidden; } /* Preferred branch. */ @supports (overflow-clip-margin: 1px) { html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown { position: absolute !important; left: var(--vz-vertical-menu-width-sm) !important; top: auto !important; max-height: none; overflow: visible; } } /* Belt and braces: a flyout nested inside another flyout never renders. sidebar.php has 15 .menu-dropdown blocks and none of them nest, so any match here is a duplicate rather than a real second-level menu. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .menu-dropdown .menu-dropdown, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .menu-dropdown .menu-dropdown { display: none !important; } /* ===================================================================== 4. Hover label on leaf icons --------------------------------------------------------------------- Vendor widens the to 270px on hover so the label shows. The is in flow, so it cannot escape the scroll container the way a flyout can. Where overflow-clip-margin is supported this still paints; where it is not, the title="" attribute on the link is the fallback. Either way the widening must not push a horizontal scrollbar into a 70px column. ===================================================================== */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > a.menu-link, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > a.menu-link { z-index: 2; } /* ===================================================================== 5. Safety net: labels that are not wrapped in a --------------------------------------------------------------------- The vendor hides menu labels in icon mode with [data-sidebar-size=sm] .navbar-nav .nav-link span { display: none } which cannot touch a bare text node. sidebar.php is a thousand lines of hand-written markup and two top-level entries had their label sitting directly after the with no — "Cloudflare" and "Ubiquiti", both of which leaked out beside their icons in the 70px rail. Those two are fixed in the markup; this is so the next one cannot. Zeroing the font size on the anchor kills any stray text node. Icons are unaffected: the vendor gives .nav-link i an explicit 22px, so it does not inherit this. Padding is in rem, so the row height does not move. Deliberately NOT applied inside .menu-dropdown — flyout items are overwhelmingly bare text by design, and that is where the label belongs. ===================================================================== */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:not(.menu-dropdown .nav-item) > a.nav-link, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:not(.menu-dropdown .nav-item) > a.nav-link { font-size: 0 !important; } /* The hover-expanded label is a real and must come back. */ html[data-layout=vertical][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > a.nav-link > span, html[data-layout=semibox][data-sidebar-size=sm] .app-menu.navbar-menu .navbar-nav .nav-item:hover > a.nav-link > span { font-size: 0.9rem !important; }