Fix: align sidebar menu items (#6138)

* Introduce sitebar-items.module.scss

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust sidebar item styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use classnames from a scss module

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set sidebar min width to 150px to keep readability

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Break words in long links

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust navigation paddings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused scss file

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating bunch of snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/main-layout.tsx

@@ -54,7 +54,7 @@ class NonInjectedMainLayout extends React.Component<MainLayoutProps & Dependenci
             getCurrentExtent={() => sidebarWidth}
             onDrag={this.onSidebarResize}
             onDoubleClick={() => this.onSidebarResize(defaultSidebarWidth)}
-            minExtent={120}
+            minExtent={150}
             maxExtent={400}
           />
         </div>

src/renderer/components/layout/sidebar-item.scss

@@ -1,97 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-.SidebarItem {
-
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  width: 100%;
-  user-select: none;
-
-  > .nav-item {
-    text-decoration: none;
-    padding: $unit * 0.3846 $unit * 0.625; // ≈ floor($unit / 2.6) floor($unit / 1.6)
-    width: 100%;
-    height: 100%;
-    color: inherit;
-    cursor: pointer;
-
-    > .link-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .expand-icon {
-      --size: 20px;
-    }
-  }
-
-  .sub-menu {
-    $borderSize: 4px;
-    border-left: $borderSize solid transparent;
-
-    > .SidebarItem {
-      color: var(--textColorPrimary);
-      padding-left: 30px + $borderSize;
-      line-height: 22px;
-
-      .SidebarItem {
-        padding-left: $padding * 2; // 3rd+ menu level
-      }
-
-      .nav-item {
-        &.expandable {
-          font-weight: 500;
-        }
-      }
-    }
-  }
-}
-
-// TODO: Make less flaky.
-.sidebar-active-status {
-  > .SidebarItem {
-    .nav-item {
-      &.active, &:hover {
-        background: var(--blue);
-        color: var(--sidebarActiveColor);
-      }
-    }
-
-    .sub-menu {
-      &.active {
-        border-left-color: var(--blue);
-      }
-
-      > .SidebarItem {
-        .nav-item {
-          &.active, &:hover {
-            color: var(--sidebarSubmenuActiveColor);
-            background: none;
-          }
-
-          &.expandable {
-            color: var(--textColorPrimary)
-          }
-        }
-
-        .sub-menu {
-          &.active {
-            border-left-color: transparent;
-          }
-
-          .nav-item {
-            &.active, &:hover {
-              color: var(--sidebarSubmenuActiveColor);
-              background: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/renderer/components/layout/sidebar-item.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./sidebar-item.scss";
+import styles from  "./sidebar-items.module.scss";
 
 import React from "react";
 import { computed, makeObservable } from "mobx";
@@ -70,7 +70,7 @@ class NonInjectedSidebarItem extends React.Component<
     }
 
     return (
-      <ul className={cssNames("sub-menu", { active: this.isActive })}>
+      <ul className={cssNames(styles.subMenu, { [styles.active]: this.isActive })}>
         {this.props.item.children.map(item => <SidebarItem key={item.registration.id} item={item} />)}
       </ul>
     );
@@ -79,7 +79,7 @@ class NonInjectedSidebarItem extends React.Component<
   render() {
     return (
       <div
-        className={cssNames("SidebarItem")}
+        className={styles.SidebarItem}
         data-testid={`sidebar-item-${this.id}`}
         data-is-active-test={this.isActive}
         data-parent-id-test={this.registration.parentId}
@@ -87,11 +87,7 @@ class NonInjectedSidebarItem extends React.Component<
         <NavLink
           to={""}
           isActive={() => this.isActive}
-
-          className={cssNames("nav-item flex gaps align-center", {
-            expandable: this.isExpandable,
-          })}
-
+          className={styles.navItem}
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -105,10 +101,10 @@ class NonInjectedSidebarItem extends React.Component<
           data-testid={`sidebar-item-link-for-${this.id}`}
         >
           {this.registration.getIcon?.()}
-          <span className="link-text box grow">{this.registration.title}</span>
+          <span>{this.registration.title}</span>
           {this.isExpandable && (
             <Icon
-              className="expand-icon box right"
+              className={styles.expandIcon}
               material={
                 this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"
               }

src/renderer/components/layout/sidebar-items.module.scss

@@ -0,0 +1,63 @@
+.SidebarItem {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100%;
+  user-select: none;
+
+  > .navItem {
+    display: flex;
+    gap: 8px;
+    text-decoration: none;
+    padding: 6px 8px 6px 10px;
+    cursor: pointer;
+
+    &:global(.active), &:hover {
+      background: var(--blue);
+      color: var(--sidebarActiveColor);
+    }
+
+    span {
+      word-break: break-word;
+    }
+  }
+
+  .expandIcon {
+    margin-left: auto;
+  }
+
+  .subMenu {
+    border-left: 4px solid transparent;
+
+    &.active {
+      border-color: var(--blue);
+    }
+  
+    .SidebarItem {
+      color: var(--textColorPrimary);
+      padding-left: 25px;
+  
+      .navItem {
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &:global(.active), &:hover {
+          color: var(--sidebarSubmenuActiveColor);
+          background: none;
+        }
+      }
+    }
+  }
+
+   // 3rd menu level
+  .subMenu .subMenu {
+    &.active {
+      border-color: transparent;
+    }
+
+    .SidebarItem {
+      padding-left: calc(var(--padding) / 2);
+    }
+  }
+}
+

src/renderer/components/layout/sidebar.module.scss

@@ -21,6 +21,5 @@
 
 .sidebarNav :global(.Icon) {
   box-sizing: content-box;
-  padding: 3px;
   border-radius: 50%;
 }