clean sidebar styles

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -15,11 +15,6 @@
     flex-direction: row;
     height: 100vh;
     margin-top: 0px;
-    // css-teprsg
-    > div:nth-of-type(2) {
-      padding-left: unset !important;
-      margin-left: unset !important;
-    }
   }
   .navigation {
     .grw-navigation-wrap {

apps/app/src/components/Sidebar/SidebarNav.module.scss

@@ -3,25 +3,6 @@
 @use '~/styles/variables' as var;
 
 .grw-sidebar-nav :global {
-  $sidebar-nav-button-height: 55px;
-
-  %fukidashi-for-active {
-    position: relative;
-
-    // speech balloon
-    &:after {
-      position: absolute;
-      right: -0.1em;
-      display: block;
-      width: 0;
-      content: '';
-      border: 9px solid transparent;
-      border-right-color: white;
-      border-left-width: 0;
-      transform: translateY(-#{$sidebar-nav-button-height / 2});
-    }
-  }
-
   // set position and z-index to prevent dropdowns covered by other element
   position: relative;
   z-index: bs.$zindex-fixed;
@@ -50,6 +31,9 @@
 
   .btn {
     width: var.$grw-sidebar-nav-width;
+    height: var.$grw-sidebar-nav-height;
+    padding-top: .75rem;
+    padding-bottom: .75rem;
     line-height: 1em;
     border: 0;
     border-radius: 0;
@@ -70,14 +54,24 @@
   }
 
   .grw-sidebar-nav-primary-container {
-    .btn {
-      padding: 1em;
-      i {
-        font-size: 2.3em;
-      }
+    $btn-active-indicator-height: 34px;
 
+    .btn {
       &.active {
-        @extend %fukidashi-for-active;
+        position: relative;
+
+        // indicator
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          width: 3px;
+          height: $btn-active-indicator-height;
+          content: '';
+          background-color: var(--bs-primary);
+          transform: translateY(#{(var.$grw-sidebar-nav-height - $btn-active-indicator-height) / 2});
+        }
       }
     }
   }
@@ -87,9 +81,7 @@
     bottom: 1.5rem;
 
     .btn {
-      padding: 0.9em;
       i {
-        font-size: 1.5em;
         opacity: 0.4;
       }
     }

apps/app/src/styles/_variables.scss

@@ -16,9 +16,10 @@ $grw-subnav-search-preview-min-height: 90px;
 $grw-navbar-bottom-height: 48px;
 $grw-editor-navbar-bottom-height: 48px;
 
-$grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
+$grw-sidebar-nav-width: 48px;
+$grw-sidebar-nav-height: 50px;
 
 $grw-logo-width: $grw-sidebar-nav-width;
-$grw-logomark-width: 36px;
+$grw-logomark-width: 24px;
 
 $grw-scroll-margin-top-in-view: 130px;