Drawer Sidebar en

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, except with icons on the right for a smoother transition between states.

Note that this plugin is disabled at screen widths above 1920 pixels, at which point there should be plenty of space for the standard 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 approximately centers the campaign image to try and keep its primary focus visible in the reduced "viewport". Considering the image width is 240 pixels, this default value is 120px. You can use the custom property below to move the focus farther left (higher number) or right (lower number) in order to showcase a more interesting part of your image:

:root {
	--drawer-bg-x: 120px;
}

By combining the two properties, you can achieve the perfect "slice" size and positioning for your hero image :)

Section highlights

By default, non-clickable sections don’t stand out from the links, except in the Campaign Settings sections where they are shown in bold on a slightly darker background. 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):