first styling of the sidebar

public/css/modules/base.css

@@ -1,3 +1,14 @@
+* {
+	/* Normalizing */
+	/* margin: 0; */
+	/* padding: 0; */
+	box-sizing: border-box;
+}
+
+body {
+	font-size: 16px;
+}
+
 :root {
 	--main-background: #ffffff;
 	--secondary-background: #eeeeee;
@@ -6,7 +17,7 @@
 	--panels-background: #222324;
 	--panels-text: #ffffff;
 	--panels-scroll: #2a2c2c;
-	--accent-color: #0A84FF;
+	--accent-color: #0a84ff;
 	--accent-text: #ffffff;
 	--tag-background: #0062c4;
 	--tag-text: #ffffff;
@@ -43,4 +54,4 @@ body {
 	width: calc(100% - 48px);
 	height: 100%;
 	display: flex;
-}
+}

public/css/modules/sidebar.css

@@ -1,21 +1,51 @@
-/* Sidebar section selector */
 #sidebar {
-	background-color: var(--panels-background);
+	display: flex;
+	flex-direction: column;
 	width: 48px;
 	height: 100%;
 	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: var(--panels-background);
 	color: var(--panels-text);
+	transition: width 125ms ease-in-out 150ms;
 }
 
-#sidebar > .side_icon {
-	font-size: 24px;
-	padding: 12px;
+#sidebar:hover {
+	width: 200px;
 }
 
-.side_icon.active {
+#sidebar .main_tablinks_text {
+	display: none;
+	display: inline-block;
+	margin-left: 20px;
+	opacity: 0;
+	visibility: hidden;
+	transition: all 50ms ease-in-out 200ms;
+}
+
+#sidebar:hover .main_tablinks_text {
+	display: inline-block;
+	opacity: 1;
+	visibility: visible;
+}
+
+#sidebar .main_tablinks {
+	display: flex;
+	align-items: center;
+	margin-top: 5px;
+	cursor: pointer;
+}
+
+#sidebar .main_tablinks:hover {
+	background-color: #3e3e3e;
+}
+
+#sidebar .side_icon {
+	font-size: 30px;
+	padding: 9px;
+}
+
+#sidebar .main_tablinks.active .side_icon {
 	color: var(--accent-color);
 }
-
-.main_tablinks {
-	cursor: pointer;
-}