Blended sidebar

src/components/Root.module.scss

@@ -6,6 +6,7 @@
   right: 0;
 
   display: flex;
+  align-items: stretch;
 
   background: var(--color-background);
   color: var(--color-text);
@@ -18,20 +19,4 @@
 .content {
   flex-grow: 1;
   overflow: auto;
-
-  /*
-
-  $w: 7px;
-  &::-webkit-scrollbar {
-    width: $w;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 20px;
-    background-color: rgba(221, 221, 221, 0.7);
-  }
-  &::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  */
 }

src/components/Root.scss

@@ -78,7 +78,6 @@ body {
   --color-text-secondary: #ccc;
   --color-text-highlight: #fff;
   --color-bg-sidebar: #2d2d30;
-  --color-sb-active-row-bg: #494b4e;
   --color-input-bg: #2d2d30;
   --color-input-border: #3f3f3f;
   --color-toggle-bg: #353535;
@@ -107,7 +106,6 @@ body {
   --color-text-secondary: #646464;
   --color-text-highlight: #040404;
   --color-bg-sidebar: #f8f8f8;
-  --color-sb-active-row-bg: #d8d8d8;
   --color-input-bg: #f0f0f0;
   --color-input-border: #c0c0c0;
   --color-toggle-bg: #ffffff;

src/components/SideBar.module.scss

@@ -1,7 +1,10 @@
 .root {
-  background: var(--color-bg-sidebar);
+  display: flex;
-  min-width: 150px;
+  flex-direction: column;
-  position: relative;
+  padding: 8px;
+  @media (max-width: 768px) {
+    padding: 0;
+  }
 }
 
 .logoPlaceholder {
@@ -12,6 +15,7 @@
 }
 
 .rows {
+  flex: 1;
   @media (max-width: 768px) {
     display: flex;
     justify-content: space-between;
@@ -23,6 +27,7 @@
 .row {
   color: var(--color-text);
   text-decoration: none;
+  border-radius: 1000px;
 
   display: flex;
   align-items: center;
@@ -31,6 +36,10 @@
     padding: 8px 20px;
   }
 
+  @media (max-width: 768px) {
+    border-radius: 0;
+  }
+
   @media (max-width: 768px) {
     flex-direction: column;
   }
@@ -48,11 +57,13 @@
 }
 
 .rowActive {
-  background: var(--color-sb-active-row-bg);
+  --bg: hsla(217deg, 83%, 57%, 0.2);
+  --fg: hsl(217deg 83% 57%);
+  color: var(--fg);
+  background: var(--bg);
 
   @media (max-width: 768px) {
     background: none;
-    border-bottom: 2px solid #387cec;
   }
 }
 
@@ -70,10 +81,9 @@
 }
 
 .footer {
-  position: absolute;
+  display: flex;
-  bottom: 10px;
+  flex-direction: column;
-  left: 50%;
+  align-items: center;
-  transform: translateX(-50%);
 }
 
 @media (max-width: 768px) {