style: removed grayscale filters on sidebar; style: refactored sidebar; style: now the sidebar is fixed

src/App.vue

@@ -1,8 +1,7 @@
 <template>
 	<div>
-		<TheSidebar />
-
 		<div class="app-container">
+			<TheSidebar />
 			<div class="content-container">
 				<TheSearchBar />
 				<TheContent />
@@ -20,7 +19,7 @@
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .app-container {
 	display: flex;
 }
@@ -29,7 +28,7 @@
 	width: 100%;
 	display: flex;
 	flex-direction: column;
-	margin-left: 48px;
+	/* margin-left: 48px; */
 }
 </style>
 

src/components/TheSearchBar.vue

@@ -3,8 +3,10 @@
 		<div class="search__icon">
 			<i class="material-icons">search</i>
 		</div>
+
 		<input
 			id="searchbar"
+			class="w-full"
 			autocomplete="off"
 			type="search"
 			name="searchbar"

src/components/TheSidebar.vue

@@ -1,18 +1,29 @@
 <template>
-	<aside id="sidebar" role="navigation" aria-label="sidebar">
+	<aside
+		id="sidebar"
+		class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-panels-text"
+		role="navigation"
+		aria-label="sidebar"
+	>
 		<router-link
+			tag="a"
 			v-for="link in links"
 			:key="link.id"
-			tag="a"
+			class="relative flex items-center h-16 no-underline main_tablinks"
-			class="main_tablinks"
 			:id="link.id"
 			:class="{ active: activeTablink === link.name }"
 			:aria-label="link.ariaLabel"
 			:to="{ name: link.routerName }"
 			@click.native="activeTablink = link.name"
+			style="transition: all 500ms; color: inherit"
 		>
-			<i class="material-icons side_icon">{{ link.icon }}</i>
+			<i class="p-2 text-3xl transition-all duration-500 material-icons side_icon">{{ link.icon }}</i>
-			<span class="main_tablinks_text">{{ $t(link.label) }}</span>
+			<span
+				class="ml-5 overflow-hidden capitalize whitespace-no-wrap transition-all duration-75 ease-in-out delay-200 opacity-0 main_tablinks_text"
+				style="letter-spacing: 1.3px"
+			>
+				{{ $t(link.label) }}
+			</span>
 			<span
 				v-if="link.name === 'about' && updateAvailable"
 				id="update-notification"
@@ -20,13 +31,15 @@
 			></span>
 		</router-link>
 
-		<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
+		<span class="flex h-12 mt-5" role="link" aria-label="theme selector">
-			<i class="material-icons side_icon side_icon--theme">palette</i>
+			<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
-			<div id="theme_togglers">
+				palette
+			</i>
+			<div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
 				<div
 					v-for="theme of themes"
 					:key="theme"
-					class="theme_toggler"
+					class="w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500"
 					:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
 					@click="changeTheme(theme)"
 				></div>

src/styles/scss/_sidebar.scss

@@ -2,130 +2,53 @@ $sidebar-timing: 125ms;
 $sidebar-delay: 75ms;
 
 #sidebar {
-	display: flex;
+	// transition: width $sidebar-timing ease-in-out $sidebar-delay;
-	flex-direction: column;
+	// z-index: 999;
-	width: $sidebar-width;
+	width: 15.625rem;
-	height: 100%;
+	height: 100vh;
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: var(--panels-background);
-	color: var(--panels-text);
-	transition: width $sidebar-timing ease-in-out $sidebar-delay;
-	z-index: 999;
 
-	&:hover {
+	// &:hover {
-		width: 200px;
+	// 	width: 12.5rem;
-	}
+	// }
 
 	.main_tablinks {
-		transition: all 500ms;
+		// &.active {
-		text-decoration: none;
+		// 	@apply bg-primary;
-		color: inherit;
+		// }
 
-		&.active {
+		&:hover {
-			background-color: var(--primary-color);
+			// background-color: var(--sidebar-link-bg);
 		}
+	}
 
-		&:not(#theme_selector) {
+	// &:hover {
-			display: flex;
+	.main_tablinks {
-			align-items: center;
+		&.active,
-			height: 55px;
+		&:hover {
-			cursor: pointer;
+			background: var(--sidebar-link-bg);
 
-			&:hover {
+			.side_icon {
-				background-color: var(--sidebar-link-bg);
+				color: var(--primary-color);
-
-				.side_icon {
-					color: var(--primary-color);
-				}
 			}
 		}
 	}
 
 	.main_tablinks_text {
-		margin-left: 20px;
+		@apply opacity-100;
-		opacity: 0;
-		overflow: hidden;
-		text-transform: capitalize;
-		letter-spacing: 1.3px;
-		white-space: nowrap;
-		transition: all 50ms ease-in-out 200ms;
-	}
-
-	.side_icon {
-		font-size: 30px;
-		padding: 9px;
-		transition: all 500ms;
-
-		&--theme {
-			cursor: default;
-		}
-
-		@include remove-selection-background;
-	}
-
-	&:hover {
-		.main_tablinks {
-			&:hover {
-				background: var(--sidebar-link-bg-20);
-				filter: grayscale(0) opacity(1);
-			}
-
-			&.active {
-				background: var(--sidebar-link-bg);
-				filter: grayscale(1);
-
-				// Fix for purple theme in which grayscale shows incoherent color
-				html[data-theme='purple'] & {
-					background: var(--sidebar-link-bg-20);
-					filter: grayscale(0);
-				}
-
-				&:hover {
-					background: var(--sidebar-link-bg-20);
-					filter: grayscale(0);
-				}
-			}
-		}
-
-		.main_tablinks_text {
-			opacity: 1;
-		}
-
-		#theme_togglers {
-			opacity: 1;
-		}
-	}
-
-	/* Update Notification */
-	#main_about_tablink {
-		position: relative;
-	}
-
-	/* Theme selector */
-	#theme_selector {
-		margin-top: 20px;
-		display: flex;
-		height: 50px;
 	}
 
 	#theme_togglers {
-		position: relative;
+		@apply opacity-100;
-		display: flex;
+	}
-		justify-content: space-evenly;
+	// }
-		align-items: center;
+
-		width: 100%;
+	#theme_togglers {
-		opacity: 0;
+		// opacity: 0;
 		transition: all $sidebar-timing ease-in-out $sidebar-delay;
 	}
 
 	.theme_toggler {
-		width: 25px;
+		// @apply w-6 h-6 rounded-full border border-grayscale-500 cursor-pointer;
-		height: 25px;
-		border-radius: 1000px;
-		border: 1px solid theme('colors.grayscale.500');
-		cursor: pointer;
 		transition: border 200ms ease-in-out;
 
 		&--active {
@@ -133,7 +56,7 @@ $sidebar-delay: 75ms;
 		}
 
 		&--light {
-			background: white;
+			@apply bg-white;
 		}
 
 		&--dark {

src/styles/scss/base/_base.scss

@@ -21,7 +21,6 @@
 	--panels-text: theme('colors.white');
 
 	--sidebar-link-bg: theme('colors.grayscale.240');
-	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 
 	--icon-hover: var(--primary-color);
 
@@ -39,7 +38,6 @@
 	--panels-text: theme('colors.white'); // icons + text colors in panels
 
 	--sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
-	--sidebar-link-bg-20: hsla(240, 10%, 22%, 1); // same value but with opacity at 20% when tab selected bg
 
 	--icon-hover: hsl(210, 100%, 52%); // e.g. hover color on icons like download-button
 
@@ -57,7 +55,6 @@
 	--panels-text: theme('colors.white');
 
 	--sidebar-link-bg: hsl(257, 70%, 17%);
-	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
 
 	--icon-hover: hsl(186, 44%, 54%);
 

src/styles/scss/globals/_globals.scss

@@ -1,7 +1,7 @@
 input[type='text'],
 input[type='password'],
-input[type='number'],
+input[type='number']/* ,
-input[type='search'] {
+input[type='search'] */ {
 	// -webkit-appearance: none;
 	// appearance: none;
 	width: calc(100% - 16px);
@@ -292,6 +292,7 @@ a {
 }
 
 .material-icons {
+	@apply select-none;
 	$sizes: 18, 24, 36, 48;
 
 	@each $size in $sizes {