Expandable Navigation Panel

Expandable Navigation Panel en

Installations 3 Likes 5
Abandoned Broken Sidebar

This desktop-only plugin shrinks the main sidebar to show only the main category icons, and when hovered, pops out the navigation area into a wide panel presenting each category as a discrete column. The panel should adapt automatically to any number of categories (using a scrollbar if needed) based on your customization of the sidebar in the Sidebar Setup page.

Customized Sidebars

Note that since the Dashboard link is forced to be on its own, this plugin rotates it vertically to save space. This can occur safely even if you place that link further down the list. Since Kanka 1.28, you can create a Quick Link to your default dashboard, which provides a cleaner option when using this theme. You can then add the following to your campaign CSS to hide the default link to the dashboard:

/* Hide default Dashboard link from navigation panel */
li.section-dashboard {
	display: none;
}

I also recommend placing the Notes link in any of the World, Campaign or Other sections so it doesn’t use a whole column on its own.

Customization

You can customize several aspects of the panel by adding the following rules to your campaign’s CSS:

.main-sidebar {
	/* Sets the track/gutter color of the scrollbar, if necessary */
	--sidedar-scrollbar-track-color: #333;
	/* Sets the handle/slider color of the scrollbar, if necessary, as well as the top and bottom border of the panel */
	--sidedar-scrollbar-slider-color: silver;
	/* Sets the background color behind each category */
	--popout-sidebar-heading-bg: #3d4b55;
	/* Sets the font color of all links */
	--popout-sidebar-heading-color: #eee;
	/* Sets the background color of hovered/focused links */
	--popout-sidebar-heading-focus: rgba(0, 0, 0, 0.16);
}

Positioning the panel

Since it is not possible to track exactly where a user’s pointer enters the sidebar and open the panel at that position, the plugin places it halfway down the screen to ensure that it is fully visible and does not cover other parts of the sidebar. If you prefer, you can use the following CSS rule to have it open immediately under the campaign title portion of the sidebar. Depending on the length of your campaign’s title, you will need to adjust the 400px value to match.

/* Place expandable navigation panel immediately under campaign title */
body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) .sidebar-menu {
	top: 400px;
}
More sidebar goodness
This theme can be used alongside Scrollable Map Sidebar. It is not compatible with Scrollable Main Sidebar. Pop-Out Sidebar is a similar, more compact alternative.


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 1.4

Released 11 months ago

Fixed layering: map widgets on the dashboard were displayed over the opened panel. Thanks to MySurvive for the tip!