Collapsible Sidebar

Link to article: Collapsible Sidebar.

#toc0 {
    color: rgb(var(--swatch-primary,126,27,1));
}
div.blockquote {
    padding-top: 0.5em;
}
div.blockquote tt {
    margin: 0.5em 1em 1em 1em;
    display: block;
    background-color: rgb(var(--dark-gray-monochrome,48,48,52));
    color: rgb(var(--white-monochrome,252,252,252));
    padding: 0.5em;
}

```
display: none
```

:scp-wiki:component:collapsible-sidebar [info]

```
blockquote
```
```
blockquote
```

[[iftags +component]]
[[module css]]
#toc0 {
    color: rgb(var(--swatch-primary,126,27,1));
}
div.blockquote {
    padding-top: 0.5em;
}
div.blockquote tt {
    margin: 0.5em 1em 1em 1em;
    display: block;
    background-color: rgb(var(--dark-gray-monochrome,48,48,52));
    color: rgb(var(--white-monochrome,252,252,252));
    padding: 0.5em;
}
[[/module]]

[!--
Fragment:
https://scp-wiki.wikidot.com/fragment:collapsible-sidebar-bhl
--]

[[module ListPages  category="fragment" range="others" parent="." limit="1" order="created_at" offset="@URL|0" tags="-!pos!"]]
%%content{1}%%
[[/module]]

[[=]]
[[module Rate]]
------
[[div_ class="blockquote"]]
+++ !!!WARNING!!!
{{This template is somewhat experimental and may act unusually on a small number of browsers. _
 _
If you discover a bug, please report it in the comments along with the **Browser, Browser Version, and Operating System.** _
 _
As of Mar. 4, 2021 there is a single known bug:}}
{{If used with a theme that colors the sidebar background, it will color the background of the pseudo-elements as well. This causes the sidebar to appear as just colored vertical blocks prior to hovering.}}
[[/div]]
------
[[div_ class="blockquote"]]
Template for making the sidebar collapsible.
Works on both Black Highlighter and Sigma-9.
[/component:collapsible-sidebar/offset/0 >Click here to see it with Black Highlighter<] 
[/component:collapsible-sidebar/offset/1 >Click here to see it with Sigma-9<] 
@@ @@
Add this include **AFTER** any theme include:
{{[[include :scp-wiki:component:collapsible-sidebar]]}}
[[/div]]
[[/=]]
[[/iftags]]
[[div [[iftags -component]]style="display: none"[[/iftags]]]]
-----
[[collapsible show="+ Show component code" hide="- Hide component code"]]
[[module CSS show="true"]]
    :root {
    	--sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
    	--body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
    	#content-wrap {
    		display: flex;
    		position: initial;
    		flex-direction: row;
    		flex-grow: 2;
    		width: calc(100vw - (100vw - 100%));
    		max-width: inherit;
    		height: auto;
    		min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
    		margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
    	}

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

    	#side-bar {
    		position: -webkit-sticky;
    		position: sticky;
    		top: 0;
    		left: 0;
    		grid-area: side-bar;
    		width: var(--sidebar-width-on-desktop, 13.6rem) !important;
    		min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
    		max-height: 100vh;
    		padding-right: 2.5rem;
    		padding-left: 0.5rem;
    		overflow-y: scroll;
    		transition:
    			translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			padding 300ms linear,
    			margin 300ms linear;
    		border: none;
    		border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
    		background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    		translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
    		direction: rtl;
    		scrollbar-width: thin;
    		-ms-scroll-chaining: none;
    			overscroll-behavior: contain;
    		scrollbar-color: 
    			rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
    			rgba(var(--swatch-tertiary-color), 0.05); /* Track */
    	}

    	#side-bar::-webkit-scrollbar-track {
    		background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
    	}
    	
    	#side-bar::-webkit-scrollbar,
    	#side-bar::-webkit-scrollbar-thumb,
    	#side-bar::-webkit-scrollbar-corner {
    		width: 0.5rem;
    		border-right-width: calc(100vw + 100vh);
    		border-right-style: inset;
    		border-color: inherit;
    		background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
    	}

    	#side-bar:is(:hover, :active, :focus-within) {
    		margin-right: 2.25rem;
    		padding-right: 0.25rem;
    		overflow-x: hidden;
    		overflow-y: auto;
    		border-color: rgba(var(--swatch-primary-darker), 1);
    		background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
    		translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
    		scrollbar-color: 
    			rgba(170, 170, 170, 1)  /* Thumb */
    			rgba(252, 252, 252, 1); /* Track */
    		scrollbar-color: 
    			rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
    			rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
    	}

    	#main-content::after {
    		content: " ";
    		display: flex;
    		position: fixed;
    		top: 0;
    		left: 1rem;
    		align-items: center;
    		justify-content: center;
    		width: 1rem;
    		height: 100%;
    		max-height: 100%;
    		transition:
    			left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    		background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
    		background-attachment: fixed;
    		background-repeat: no-repeat;
    		background-position: center left 1rem;
    		background-size: 1rem 12.875rem;
    		pointer-events: none;
    	}

    	#side-bar:is(:hover, :active, :focus-within) + #main-content::after {
    		left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
    		width: 0rem;
    		transition:
    			left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    		opacity: 0;
    		background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
    		font-size: 0em;
    	}

    	#main-content::before {
    		content: " ";
    		position: absolute;
    		z-index: 9;
    		top: var(--final-header-height-on-desktop, 0);
    		left: 0;
    		width: var(--sidebar-width-on-desktop, 14.5rem);
    		height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
    		margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    		transition:
    			translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    		opacity: 0.5;
    		background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
    		pointer-events: none;
    		translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
    	}

    	#side-bar:is(:hover, :active, :focus-within) + #main-content::before {
    		translate: 0;
    		opacity: 0;
    	}

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

    	#side-bar .scpnet-interwiki-wrapper {
    		direction: ltr;
    	}

    	/* Print Friendly Formatting by Estrella */
    	body.print-body { 
    		--sidebar-width-on-desktop: 0; 
    	} 
    	body.print-body #main-content::before,
    	body.print-body #main-content::after { 
    		display: none; 
    	}
    }
[[/module]]
[[/collapsible]]
[[/div]]

Collapsible Sidebar

Module Styles

Inline Styles

Includes

CSS Classes

Page Source