This desktop-only plugin shrinks the main sidebar to show only the icons and keeps it visible at all times (no matter how far down you scroll). When hovered, it slides out to show the full navigation links and campaign image as a self-contained, scrollable menu — largely the same as Scrollable Main Sidebar.
Customization
Collapsed width
By default, the collapsed sidebar’s width is set to 45 pixels, which is the minimum that looks sensible with standard icons and text sizes. You can increase it by adding a simple custom property to your campaign styles (in Settings > Theming), and the plugin will automatically resize its margins accordingly:
:root {
--drawer-w: 45px;
}
Image slice
By default, the collapsed sidebar centers the campaign image. You can use the custom property below to move it farther left (lower number) or right (higher number) in order to focus on a more interesting part of your image:
:root {
--drawer-bg-x: -50%;
}
By combining the two properties, you can achieve the perfect "slice" size and positioning to compliment your hero image :)
Section highlights
By default, non-clickable sections don’t stand out from the links. You can copy and modify/expand the following code to change their look like I did in the screenshot below:
/* Highlight Drawer Sidebar sections */
@media (min-width:768px) {
body:not(#map-body):not(.sidebar-collapse) {
/* Full section line */
.sidebar:hover li div span {
color: hsl(var(--a));
}
/* Section icon */
.sidebar:hover li div span:first-child {
margin-right: 5px;
}
/* Section name */
.sidebar:hover li div span:last-child {
font-style: italic;
}
}
}
Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed): 
