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;
}

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Atoggle-sidebar-bhl/1")

(none)

```
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]]

------

[[collapsible show="+ Show component code" hide="- Hide component code"]]
[[code type="CSS"]]
: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: 48.0625rem) {
    #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;
    	}
    }
}
[[/code]]
[[/collapsible]]
[[/iftags]]

[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Atoggle-sidebar-bhl/1")
[[/module]]

Toggle Sidebar BHL

Module Styles

Inline Styles

Includes

CSS Classes

Page Source