Drawer Sidebar

Drawer Sidebar en

Installations 14 Likes 9
Sidebar

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): Support me on Ko-fi.com

Latest version 3.2

Released 5 months ago

  • Added a maximum screen width of 1920 pixels for the theme to activate, since beyond that point there is plenty of room for the expanded menu.
  • One user has requested disabling this theme in the Settings area. I can see preferences swinging both ways on this, and it can’t be done easily in someone’s campaign CSS, so please let me know your preference on Discord or at [email protected] and if a consensus or majority emerges towards this change, I will implement it. Thank you!