Expandable Navigation Panel en

Installations 5 Likes 5

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):

Panel open, customized categories and fonts

A more sober aesthetic without colored backgrounds

Latest version 1.4 View content

Released 1 year ago

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

Plugin CSS for 1.4


/* BEGIN Expandable Navigation Panel */
@media (min-width: 768px) {
	.main-sidebar {
		--sidedar-scrollbar-track-color: #333;
		--sidedar-scrollbar-slider-color: silver;
		--popout-sidebar-heading-bg: #3d4b55;
		--popout-sidebar-heading-color: #eee;
		--popout-sidebar-heading-focus: rgba(0, 0, 0, 0.16);
	}
	/* Position main sidebar */
	body:not(#map-body):not(.sidebar-collapse) .main-sidebar {
		position: fixed;
		height: calc(100vh - 3rem);
		top: 3rem;
		width: 60px;
		padding-top: 10px;
		background-position-x: 60px;
		z-index: 821; /* Map widget is 400 but its overlays are 820 */
	}
	/* Open panel from anywhere in navigation area */
	body:not(#map-body) .main-sidebar .sidebar {
		height: 100% !important;
	}
	/* Remove the main content area’s artificial height*/
	body:not(#map-body) .content-wrapper {
		min-height: unset !important;
	}
	/* Tweak content margins to account for smaller sidebar */
	body:not(#map-body):not(.sidebar-collapse) .main-sidebar ~ :is(.content-wrapper, #footer),
	body:not(#map-body):not(.sidebar-collapse) .main-sidebar ~ form .content-wrapper,
	body:not(#map-body):not(.sidebar-collapse) #app .navbar {
		margin-left: 60px;
	}
	/* Campaign block */
	body:not(#map-body) section.sidebar-campaign {
		height: auto;
	}
	body:not(#map-body) section.sidebar-campaign .campaign-block {
		padding: 0;
		height: auto;
	}
	body:not(#map-body) section.sidebar-campaign .campaign-head {
		height: auto;
	}
	/* Write title vertically from top to bottom */
	body:not(#map-body) section.sidebar-campaign .campaign-name {
		font-weight: 600;
		writing-mode: vertical-lr;
		height: max-content;
		margin-bottom: 40px;
		max-height: 50vh;
		padding: 0 27%;
		text-overflow: ellipsis;
		white-space: nowrap !important;
	}
	body:not(#map-body) section.sidebar-campaign .campaign-updated {
		display: none;
	}
	/* Menu closed: hide all but icons without compromising accessibility */
  body:not(#map-body) .sidebar:not(:hover, :focus-within) li {
		padding: 0 8px;
		text-align: right;
	}
	body:not(#map-body) .sidebar:not(:hover, :focus-within) li > *,
	body:not(#map-body) .sidebar:not(:hover, :focus-within) li > div > span,
	body:not(#map-body) .sidebar .sidebar-quick-links span {
		color: transparent;
	}
	body:not(#map-body) .sidebar:not(:hover, :focus-within) li i {
		color: var(--popout-sidebar-heading-color, currentColor);
	}
	body:not(#map-body) .sidebar:not(:hover, :focus-within) li :is(a > i, span > i) {
		float: left;
		padding-top: 5px;
	}
	/* Menu closed: show only category icons */
	body:not(#map-body) .sidebar:not(:hover, :focus-within) li li {
		display: none;
	}
	/* Menu opened: main panel */
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) .sidebar-menu {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		left: 20px;
		background-color: var(--sidebar-background, hsl(var(--si)/var(--tw-bg-opacity)));
		padding: 5px;
		border-radius: 10px;
		border-bottom: 3px solid var(--sidedar-scrollbar-slider-color);
		border-top: 3px solid var(--sidedar-scrollbar-slider-color);
		display: grid;
		grid-auto-flow: column;
		grid-gap: 5px;
		margin-bottom: 0;
		max-width: calc(100vw - 50px);
		overflow-x: auto;
		scrollbar-color: var(--sidedar-scrollbar-slider-color) var(--sidedar-scrollbar-track-color);
		
	}
	/* Menu opened: rotate Dashboard link so it doesn’t waste as much space */
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) li.section-dashboard {
		writing-mode: vertical-lr;
		align-self: stretch;
	}
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) li.section-dashboard i {
		margin: 10px 0 10px -5px;
	}
	/* Menu opened: headings */
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) li {
		background-color: var(--popout-sidebar-heading-bg);
		border-radius: 8px;
		margin: 0;
		white-space: normal;
		min-height: unset;
	}
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) .sidebar-menu > li {
		padding: 5px;
	}
	/* Menu opened: general heading style */
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) li :is(a, i, span) {
		color: var(--popout-sidebar-heading-color, currentColor);
		padding: 2px 5px;
		gap: 0;
		text-transform: unset;
		font-size: 14px;
	}
	/* Menu opened: category heading style */
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) .sidebar-menu > li > :is(a, div) {
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
	}
	/* Menu opened: active page style */
	body:not(#map-body) .main-sidebar .sidebar-menu li.active > a {
		background-color: var(--popout-sidebar-heading-bg);
		filter: brightness(0.8);
	}
	/* Menu opened: focused/hovered heading style */
	body:not(#map-body) .main-sidebar .sidebar-menu li > :is(a:hover, a:focus, span:hover, span:focus) {
		background: var(--popout-sidebar-heading-focus);
		border-radius: 8px;
	}
	/* Menu opened: spacing around icons */
	body:not(#map-body) :is(.sidebar:hover, .sidebar:focus-within) li i {
		padding: 0 20px 0 5px;
	}
}
/* END Expandable Navigation Panel */