/* ===================================================== */ /* "More" sidebar dropdown menu (replaces old slide panel) */ /* ===================================================== */ .sidebar-more-dropdown { width: 100%; } .sidebar-more-dropdown .sidebar__nav-item.dropdown-toggle { cursor: pointer; width: 100%; } /* Hide Bootstrap's default caret arrow - the "..." icon is enough */ .sidebar-more-dropdown .dropdown-toggle::after { display: none !important; } /* Base menu: kept rendered (display:block) at all times instead of relying on Bootstrap's display:none <-> block toggle, so the slide transform can actually transition. Popper still handles vertical placement; the closed state is invisible and non-interactive via visibility/pointer-events. Opacity is always 1 - only the slide (transform) animates, so the menu never passes through a translucent state that shows the page underneath. */ .sidebar-more-dropdown .dropdown-menu.sidebar-more-menu { display: block !important; margin-bottom: 8px !important; left: 75px !important; opacity: 1; visibility: hidden; pointer-events: none; transform: translateX(-16px) !important; transition: transform 0.22s ease, visibility 0s linear 0.22s; } /* Slide out to the left, overlapping the sidebar and main page */ .sidebar-more-dropdown .dropdown-menu.sidebar-more-menu.show { visibility: visible; pointer-events: auto; transform: translateX(0) !important; transition: transform 0.22s ease, visibility 0s linear 0s; } /* On mobile the off-canvas sidebar sits very close to the screen's left edge, so Popper's calculated position pushes part of the menu off-screen and it gets clipped. Force it to anchor flush against its own toggle instead, with a slightly smaller left overlap than desktop. */ @media (max-width: 1024px) { .sidebar-more-dropdown .dropdown-menu.sidebar-more-menu { position: absolute !important; inset: auto !important; top: auto !important; bottom: 100% !important; left: 45px !important; right: auto !important; margin: 0 0 8px 0 !important; max-width: calc(100vw - 32px) !important; } } /* The off-canvas mobile sidebar itself needs overflow-x:hidden for its own nav scrolling (see _left.scss), but that also clips this dropdown as it slides out past the sidebar's right edge. JS toggles this class on .left-sb-container for the lifetime of the dropdown being open. */ @media (max-width: 1024px) { .left-sb-container.sidebar-more-menu-open { overflow: visible !important; } } /* Belt-and-braces stacking fix for mobile: the open menu slides upward and visually covers the Home/Notifications/Search/etc. nav-item group above it. That group sits earlier in the DOM so it should already paint below the dropdown, but a tap that lands right as the menu is closing (e.g. a dropdown-item's own click both navigates AND triggers Bootstrap's outside-click handler) can otherwise land on the now-hidden dropdown's old position and be picked up by whatever nav item is underneath it. Explicitly raising the dropdown's own stacking order and disabling pointer-events on the nav group behind it for the lifetime of "sidebar-more-menu-open" (same class/timing as the overflow fix above) makes that impossible regardless of timing. */ @media (max-width: 1024px) { .sidebar-more-dropdown { position: relative; z-index: 1601; } .left-sb-container.sidebar-more-menu-open .sidebar__nav > *:not(.sidebar__nav-group_toggle) { pointer-events: none !important; } } /* Kill the tap-highlight / click-flash on sidebar/dropdown items, on every viewport. Bootstrap's reboot already zeroes -webkit-tap-highlight-color on , but that doesn't reliably inherit through elements using transform/will-change for their slide animations (both .left-sb-container and this dropdown do), so the browser's default blue flash was leaking back in. Tapping/clicking these just navigates to a new page, so no tap feedback colour is needed. */ .left-sb-container, .left-sb-container a, .left-sb-container button, .left-sb-container .sidebar__nav-item, .left-sb-container .dropdown-toggle, .left-sb-container .dropdown-item, .left-sb-container .form-switch, .left-sb-container input { -webkit-tap-highlight-color: transparent !important; } /* Flicker row specifically: the checkbox is the one interactive element in the sidebar dropdown that isn't an /