From 99574824f34ac7dcb357a18f1121ee3837c72f75 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Thu, 9 Mar 2023 14:19:43 +0100
Subject: [PATCH] improve sidebar

---
 assets/scss/partials/sidebar.scss | 62 +++++++++++++++++++------------
 assets/scss/variables.scss        | 12 ++++--
 2 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 16095db..2261789 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -3,28 +3,30 @@
 // -----------
 
 #sidebar {
-	background: var(--sidebar-background);
+	background: var(--sidebar-background-10);
 	display: flex;
 	flex-direction: column;
 	gap: 1em;
-	height: calc(100vh - 2rem);
-	padding: 0.5em;
+	height: calc(100vh - 1rem);
+	padding: 0.25rem;
 	position: fixed;
 	top: 0;
+	width: 5rem;
 	z-index: 2;
-	margin: 1rem;
-	border-radius: 100rem;
-	box-shadow: 0 0 20px 20px var(--sidebar-background-accent);
-	border: 1px solid var(--sidebar-background-accent);
+	margin: 0.5rem 0;
+	border-radius: 0 2rem 2rem 0;
+	border: 1px solid var(--sidebar-background-05);
+	border-left: 0;
 	header {
 		text-align: center;
 		user-select: none;
+		padding: inherit;
 		#avatar {
-			border-radius: 500% 300% / 300% 500%;
+			border-radius: 300% 500% / 500% 300%;
 			max-width: 64px;
 			transition: .4s border-radius ease-in-out;
 			&:hover {
-				border-radius: 300% 500% / 500% 300%;
+				border-radius: 500% 300% / 300% 500%;
 			}
 		}
 	}
@@ -37,36 +39,50 @@
 			margin: 0;
 		}
 		li {
-			border-radius: .5em;
-			margin: .5em 0;
+			border-radius: 0.5em;
+			margin: 0.5em 0;
 			position: relative;
 			letter-spacing: .025em;
+			overflow: hidden;
+			aspect-ratio: 1 / 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: background-color 0.2s linear;
 			a {
 				display: block;
 				padding: .25em .5em;
+				line-height: 4rem;
 			}
-			::after {
-				background: var(--vriish-gradient);
-				border-radius: .5em;
+			&::after {
+				background-color: var(--sidebar-background-20);
 				bottom: 0;
 				content: "";
-				left: 0;
+				height: 100%;
 				position: absolute;
-				right: 100%;
+				left: -100%;
 				top: 0;
-				transition: opacity .5s, width .5s;
-				opacity: 0;
-				width: 0;
+				width: 100%;
 				z-index: -1;
+				opacity: 1;
+				opacity: 0.5;
+				transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear;
 			}
 			&.active {
-				background: var(--vriish-gradient);
+				background-color: var(--sidebar-background-20);
+				&:hover {
+					background-color: var(--sidebar-background-30);
+				}
 			}
 			&:hover {
-				::after {
+				&::after {
+					left: 0;
 					opacity: 1;
-					right: 0;
-					width: 100%;
+				}
+			}
+			&:active {
+				&::after {
+					background-color: var(--sidebar-background-30);
 				}
 			}
 		}
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 845a81b..226330c 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -6,8 +6,10 @@
 	--text-2: hsl(210, 21%, 80%);
 	--text-secondary: hsl(210, 21%, 40%);
 	
-	--sidebar-background: hsla(210, 21%, 10%, 20%);
-	--sidebar-background-accent: hsla(210, 21%, 10%, 10%);
+	--sidebar-background-05: hsl(210, 21%, 5%);
+	--sidebar-background-10: hsl(210, 21%, 10%);
+	--sidebar-background-20: hsl(210, 21%, 20%);
+	--sidebar-background-30: hsl(210, 21%, 30%);
 
 	--vriish-rose: hsl(0, 100%, 75%);
 	--orange: hsl(25, 100%, 75%);
@@ -29,7 +31,9 @@
 		--text-2: hsl(0, 20%, 30%);
 		--text-secondary: hsl(0, 20%, 70%);
 
-		--sidebar-background: hsla(0, 100%, 98%, 20%);
-		--sidebar-background-accent: hsla(0, 100%, 98%, 10%);
+		--sidebar-background-05: hsla(0, 50%, 95%);
+		--sidebar-background-10: hsla(0, 50%, 90%);
+		--sidebar-background-20: hsla(0, 50%, 80%);
+		--sidebar-background-30: hsla(0, 50%, 70%);
 	}
 }
\ No newline at end of file