mediawiki-skins-Citizen/resources/skins.citizen.styles/Drawer.less

#mw-drawer {
	position: fixed;
	z-index: 4;
	top: 0;
	display: flex;
	width: @drawer-width;
	max-width: 100vw; // in case if someone has super small screen
	height: 100%;
	flex-direction: column;
	background-color: var( --background-color-dp-16 );
	border-radius: 0 @border-radius-large @border-radius-large 0;
	transform: translate3d( -110%, 0, 0 ); // shadow bleeding with 100%
	transform-origin: 0 0;
	transition: @transition-transform;
	user-select: none;
	will-change: transform; // help with performance
	.boxshadow(3);

	&-checkbox {
		&:checked {
			// Transform all the slices of the button into a crossmark
			~ #mw-drawer-button-icon {
				#mw-drawer-button-icon {
					&-1 {
						opacity: 0;
						/* @noflip */
						transform: rotate( 0deg ) scale( 0.2, 0.2 );
					}
					// Reflect line
					&-2 {
						/* @noflip */
						transform: rotate( -45deg ) translate3d( -2px, 6px, 0 );
					}

					// Hide line
					&-3 {
						/* @noflip */
						transform: rotate( 45deg ) translate3d( -5px, -7px, 0 );
					}
				}
			}

			// Show drawer
			~ #mw-drawer {
				transform: none;
				will-change: unset;
			}
		}
	}

	&-button {
		position: absolute;
		z-index: 8;
		width: var( --width-button-corner );
		height: var( --height-header );

		&-icon {
			display: flex;
			overflow: hidden;
			width: var( --size-icon );
			height: var( --size-icon );
			flex-direction: column;
			margin: ~'calc( ( var( --height-header ) - var( --size-icon ) ) / 2 ) var( --padding-page )';
			place-content: center;

			&-1 {
				transform-origin: 0 0;
			}

			&-2 {
				transform-origin: 0 100%;
			}
		}

		&:hover {
			~ #mw-drawer-button-icon {
				#mw-drawer-button-icon {
					&-1 {
						transform: translate3d( -50%, 0, 0 );
					}
				}

				.mw-drawer-button-icon {
					&-div {
						background-color: var( --background-color-icon--hover );
					}
				}
			}
		}

		&:active {
			~ #mw-drawer-button-icon {
				.mw-drawer-button-icon {
					&-div {
						background-color: var( --background-color-icon--active );
					}
				}
			}
		}
	}

	&-logo {
		padding: var( --height-header ) var( --padding-page ) 10px var( --padding-page );
		border-bottom: 1px solid var( --border-color-base );
	}

	&-menu {
		overflow: auto;
		flex-grow: 1;
		padding: @margin-side / 2 0;
		font-size: @ui-menu-text;
		overscroll-behavior: contain;

		h3 {
			margin-top: 10px;
		}

		a {
			.menu-item-link;
			align-items: center;
			justify-content: space-between;
			padding: @padding-menu-item-big;

			&:after {
				.resource-loader-list-icon;
				display: block;
				margin-left: @icon-padding;
				background-size: contain;
				opacity: var( --opacity-icon-base );
				transition: @transition-opacity-quick;
			}

			&:hover {
				.menu-item-link-hover;

				&:after {
					opacity: var( --opacity-icon-base--hover );
				}
			}

			&:active {
				.menu-item-link-active;

				&:after {
					opacity: var( --opacity-icon-base--active );
				}
			}
		}
	}
}

.mw-drawer {
	&-button {
		&-icon {
			&-div {
				z-index: 5;
				display: block;
				width: @icon-size;
				height: 2px;
				margin: 1.5px 0;
				background-color: var( --background-color-icon );
				border-radius: @border-radius-large;
				transform-origin: 4px 0;
				transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
			}
		}
	}
}

.skin-citizen-dark {
	#mw-drawer-menu a:after {
		filter: invert( 1 );
	}
}