website/assets/scss/partials/sidebar.scss

// -----------
// - sidebar -
// -----------

#sidebar {
	background: var(--sidebar-background);
	border-top: 2px solid var(--vriish-rose);
	display: flex;
	flex-direction: column;
	gap: 1em;
	grid-area: sidebar;
	margin-top: -2px;
	max-height: 100vh;
	padding: 1em;
	position: sticky;
	top: 0;
	z-index: 1;
	@media (min-width: 921px) {
		bottom: 0;
		height: 100%;
	}
	header {
		text-align: center;
		user-select: none;
		#avatar {
			border-radius: 500% 300% / 300% 500%;
			width: calc(100% - 2em);
			max-width: 200px;
			transition: .4s border-radius ease-in-out;
			&:hover {
				border-radius: 300% 500% / 500% 300%;
			}
		}
		#name {
			margin: 0;
			font-weight: bold;
			font-size: 1.8em;
		}
		#information {
			margin: 0;
			font-size: .8em;
			#social-links {
				list-style: none;
				margin: 0;
				padding: 0;
				.icon {
					height: 2em;
					transition: color 0.2s linear;
					&.mastodon-icon {
						color: hsl(239.6, 100%, 69.4%);
						&:hover {
							color: hsl(251.5, 58.9%, 51.4%);
						}
					}
				}
			}
		}
	}
	#sidebar-menu {
		user-select: none;
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		li {
			border-radius: .5em;
			margin: .5em 0;
			position: relative;
			letter-spacing: .025em;
			a {
				display: block;
				padding: .25em .5em;
			}
			::after {
				background: var(--vriish-gradient);
				border-radius: .5em;
				bottom: 0;
				content: "";
				left: 0;
				position: absolute;
				right: 100%;
				top: 0;
				transition: opacity .5s, width .5s;
				opacity: 0;
				width: 0;
				z-index: -1;
			}
			&.active {
				background: var(--vriish-gradient);
			}
			&:hover {
				::after {
					opacity: 1;
					right: 0;
					width: 100%;
				}
			}
		}
		a {
			text-decoration: none;
		}
	}
	aside {
		bottom: 1em;
		position: absolute;
		left: 1em;
		right: 1em;
		@media (max-width: 920px) {
			position: initial;
		}
		#language-select {
			position: relative;
			pointer-events: none;
			&:hover {
				#languages {
					//display: block;
					bottom: 2em;
					opacity: 100%;
					pointer-events: all;
					* {
						pointer-events: all;
					}
				}
			}
			#language-icon {
				text-decoration: none;
				padding-top: 1em;
				pointer-events: all;
				&::after {
					content: attr(data-page-lang);
					position: absolute;
					left: -4px;
					font-size: 0.6em;
					line-height: 1.5em;
					bottom: 0;
					text-transform: uppercase;
				}
			}
			#languages {
				background-color: var(--background);
				border-radius: .5em;
				margin: 0;
				padding: 0;
				user-select: none;
				position: absolute;
				//display: none;
				bottom: 1em;
				opacity: 0%;
				transition: bottom .5s, opacity .5s;
				li {
					list-style: none;
					overflow: hidden;
					padding: .25em .5em;
					position: relative;
					transition: background .5s;
					border-radius: .5em;
					margin: .2em;
					&:not(:last-of-type) {
						margin-bottom: .5em;
					}
					&.active {
						background: var(--vriish-gradient);
					}
					&:hover {
						background: var(--vriish-gradient);
					}
					a {
						text-decoration: none;
						display: block;
					}
				}
			}
		}
	}
}