Pop-Out Sidebar

Pop-Out Sidebar en

Salvatos 2 1

This desktop-only plugin shrinks the main sidebar to show only the icons, and when hovered, pops out the navigation area into a compact scrollable modal. Also includes a handful of tweaks to the sidebar in general (see screenshots).

Version 2 is largely inspired by Skylark’s Sidebar Shrinks to Icons, which is in turn based on the original version of this plugin (your move, Skylark :P). Check it out if you prefer the sidebar to stay narrow on hover and to scroll with the rest of the page!


Note that depending on your browser and OS settings, the scrollbar may be more or less invisible at first. Whether or not this is the case, you can customize the scrollbar’s colours by adding the following rules to your campaign’s CSS (the first property sets the track, or gutter, and the second sets the slider, or handle):

.main-sidebar {
	--sidedar-scrollbar-track-color: slategrey;
	--sidedar-scrollbar-slider-color: whitesmoke;

Not that the slider colour is also used to highlight the currently hovered link in the list. You can also set the scrollbar’s width (thin or auto) using the following property:

.main-sidebar {
	--sidedar-scrollbar-width: thin;

However, this property is only supported on Firefox and derivatives as of summer 2021. Lastly, you can make the section headings (Dashboard, Quick Links, World, Campaign and Other) stand out by using the following two properties to set their background and/or text colour:

.main-sidebar {
	--popout-sidebar-heading-bg: #444;
	--popout-sidebar-heading-color: darkgrey;
More sidebar goodness
This theme is compatible with my Sidebar Reordering plugin and can be used alongside Scrollable Map Sidebar. It is not compatible with Scrollable Main Sidebar.

Latest version: 2.1 View Content
Released 1 month ago Fixed a missing bracket.