Toggle Sidebar BHL

Link to article: Toggle Sidebar BHL.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

h1, h2, h3 {
    text-align: center;
}
#page-title {
    text-align: center;
}

```
display: none
```

:scp-wiki:component:toggle-sidebar-bhl [info]

```
blockquote
```
```
code
```

[[iftags +component]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]
[[=]]
[[module Rate]]
[[/=]]
[[module css]]
h1, h2, h3 {
    text-align: center;
}
#page-title {
    text-align: center;
}
[[/module]]
+ What this does

++ Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.
[[=]]
* Does NOT work on Sigma-9. This ONLY functions with [http://www.scpwiki.com/theme:black-highlighter-theme Black Highlighter.]
* [http://www.scpwiki.com/component:toggle-sidebar Use this component by EstrellaYoshte instead if you intend to use Sigma-9.]
* [http://www.scpwiki.com/component:collapsible-sidebar If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.] _
The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar.
[[/=]]

------

+ How to use

++ 1. Copy code below.
++ 2. Paste in article **after** Black Highlighter and any other Theme include.

> {{[[include :scp-wiki:component:toggle-sidebar-bhl]]}}

+++ 3. (Optional) Style toggle button if using a theme.

[[div class="blockquote"]]
There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found [https://github.com/Nu-SCPTheme/Black-Highlighter/blob/master/src/css/root.css here.]
[[div class="code"]]
:root {
    @@--toggle-button-bg: hex/rgb/hsl color;@@
    @@--toggle-border-color: hex/rgb/hsl color;@@
    @@--toggle-border-width: px/rem/em;@@
    @@--toggle-icon-color: hex/rgb/hsl color;@@
    @@--toggle-roundness: percentage;@@
}
[[/div]]
[[/div]]

------
[[/iftags]]

[[div [[iftags -component]]style="display: none"[[/iftags]]]]
[[collapsible show="+ Show component code" hide="- Hide component code"]]
[[module CSS show="true"]]
@supports(display: grid) {
    :root {
    	--sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    	--body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
    	#side-bar .close-menu {
    		display: block;
    		position: fixed;
    		top: 0.5rem;
    		left: 0.5rem;
    		width: 3rem;
    		height: 3rem;
    		background: unset;
    		opacity: 1;
    		pointer-events: all;
    		z-index: -1;
    	}

    	#side-bar .close-menu img {
    		color: transparent;
    	}

    	#side-bar .close-menu::before,
    	#side-bar .close-menu::after {
    		content: "";
    		box-sizing: border-box;
    		position: fixed;
    		display: block;
    		top: 0.5rem;
    		left: 0.5rem;
    		width: 3rem;
    		height: 3rem;
    		padding: 0;
    		margin: 0;
    		text-align: center;
    		pointer-events: all;
    		cursor: pointer;
    		transition:
    			opacity var(--sidebar-transition-timing);
    	}

    	#side-bar .close-menu::before {
    		--mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
    		z-index: -1;
    		background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
    		-webkit-mask: var(--mask);
    		mask: var(--mask);
    		-webkit-mask-repeat: no-repeat;
    		mask-repeat: no-repeat;
    		-webkit-mask-position: 50% 50%;
    		mask-position: 50% 50%;
    		-webkit-mask-size: 60%;
    		mask-size: 60%;
    	}

    	#side-bar .close-menu::after {
    		z-index: -2;
    		background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
    		border-radius: var(--toggle-roundness, 50%);
    		border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
    	}

    	#side-bar:focus-within .close-menu,
    	#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
    		pointer-events: none;
    	}

    	#side-bar:focus-within .close-menu::before,
    	#side-bar:focus-within .close-menu::after {
    		opacity: 0;
    		pointer-events: none;
    	}

    	#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
    	#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
    		opacity: 0;
    		pointer-events: none;
    	}

    	#side-bar {
    		display: block;
    		position: fixed;
    		top: 0;
    		left: calc(var(--sidebar-width-on-desktop)*-1);
    		z-index: 10;
    		transition:
    			left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
    		height: 100%;
    		overflow-y: auto;
    		overflow-x: hidden;
    		margin-top: 0;
    	}

    	#side-bar:focus-within {
    		left: 0;
    	}

    	#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
    		left: 0;
    	}

    	#side-bar .side-block {
    		margin-top: 1rem;
    		background-color: rgb(0, 0, 0, 0);
    		border-radius: 0;
    		border-left-width: 0px;
    		border-right-width: 0px;
    	}

    	#main-content::before {
    		content: "";
    		display: block;
    		position: fixed;
    		top: 0;
    		right: 0;
    		z-index: -1;
    		opacity: 0;
    		transition:
    			opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
    			width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
    		margin-left: var(--sidebar-width-on-desktop);
    		background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
    		padding-right: 0;
    		width: 100%;
    		height: 100vh;
    		pointer-events: none;
    		z-index: 99;
    	}

    	#side-bar:focus-within ~ #main-content::before {
    		width: calc(100% - var(--sidebar-width-on-desktop));
    		opacity: 1;
    		pointer-events: all;
    	}

    	#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
    		width: calc(100% - var(--sidebar-width-on-desktop));
    		opacity: 1;
    		pointer-events: all;
    	}

    	@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
    		padding: inherit;
    	} }

    	#content-wrap {
    		display: flex;
    		flex-direction: row;
    		width: calc(100vw - (100vw - 100%));
    		min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
    		flex-grow: 2;
    		height: auto;
    		position: relative;
    		margin: 0 auto;
    		max-width: inherit;
    	}

    	#main-content {
    		width: 100%;
    		position: initial;
    		max-height: 100%;
    		padding: 2rem 1rem;
    		max-width: var(--body-width-on-desktop, 45.75rem);
    		margin: 0 auto;
    	}

    	#page-content {
    		max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    	}

    	@supports (-webkit-hyphens:none) { 
    		#side-bar {
    			transition:
    				left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
    				padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
    				background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
    			padding-right: 0;
    			background-color: rgb(0, 0, 0, 0);
    			pointer-events: all;
    			overflow-x: visible;
    			overflow-y: visible;
    			z-index: 999;
    		}

    		#side-bar::-webkit-scrollbar {
    			opacity: 0;
    			-webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
    			transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
    		}

    		#side-bar .close-menu::before {
    			z-index: 999;
    		}

    		#side-bar .close-menu::after {
    			z-index: 998;
    		}

    		#side-bar:hover .close-menu::before,
    		#side-bar:hover .close-menu::after {
    			opacity: 0;
    		}

    		#side-bar:hover {
    			left: 0;
    			background-color: rgba(var(--swatch-menubg-color), 1);
    			padding-right: 0;
    		}

    		#side-bar:hover::-webkit-scrollbar {
    			opacity: 1;
    		}

    		#side-bar:hover~#main-content::before {
    			width: calc(100% - var(--sidebar-width-on-desktop));
    			opacity: 1;
    			pointer-events: all;
    		}
    	}
    }
}
[[/module]]
[[/collapsible]]
[[/div]]

Toggle Sidebar BHL

Module Styles

Inline Styles

Includes

CSS Classes

Page Source