fix: show and allow to expand crd sub-menus / sidebar refactoring

Signed-off-by: Roman <ixrock@gmail.com>

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

@@ -7,22 +7,18 @@
   width: 100%;
   user-select: none;
 
-  .nav-item {
+  > .nav-item {
+    text-decoration: none;
     padding: $itemSpacing;
-    border: none;
+    width: 100%;
+    height: 100%;
+    color: inherit;
     cursor: pointer;
-    display: grid;
-    grid-template-columns: 1fr 25px;
 
-    a {
-      grid-row: 2;
-      grid-column: 1 / span 2;
+    > .link-text {
       overflow: hidden;
       text-overflow: ellipsis;
-      text-decoration: none;
-      vertical-align: middle;
-      flex-grow: 1;
-      min-width: 100px;
+      white-space: nowrap;
     }
 
     &.active, &:hover {
@@ -32,45 +28,35 @@
 
     .expand-icon {
       --size: 20px;
-      grid-row: 2;
-      grid-column: 2;
-      pointer-events: none;
     }
   }
 
   .sub-menu {
-    border-left: 4px solid transparent;
-
-    &:empty, .compact & {
-      display: none;
-    }
+    $borderSize: 4px;
+    border-left: $borderSize solid transparent;
 
     &.active {
       border-left-color: $lensBlue;
     }
 
-    a, .SidebarItem {
-      display: block;
-      border: none;
-      text-decoration: none;
+    > .SidebarItem {
       color: $textColorPrimary;
-      font-weight: normal;
-      padding-left: 40px; // parent icon width
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 0px; // hidden by default
-      height: 0px;
-      opacity: 0;
-      transition: 125ms line-height ease-out, 200ms 100ms opacity;
+      padding-left: 30px + $borderSize;
+      line-height: 22px;
 
-      &.visible {
-        line-height: 28px;
-        height: auto;
-        opacity: 1;
+      .SidebarItem {
+        padding-left: $padding * 2; // 3rd+ menu level
       }
 
-      &.active, &:hover {
-        color: $sidebarSubmenuActiveColor;
+      .nav-item {
+        &.expandable {
+          font-weight: 500;
+        }
+
+        &.active, &:hover {
+          color: $sidebarSubmenuActiveColor;
+          background: none;
+        }
       }
     }
   }

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

@@ -8,6 +8,7 @@ import { NavLink } from "react-router-dom";
 import { Icon } from "../icon";
 import { TabLayoutRoute } from "./tab-layout";
 import { sidebarStorage } from "./sidebar-storage";
+import { isActiveRoute } from "../../navigation";
 
 interface SidebarItemProps {
   id: string; // Used to save nav item collapse/expand state in local storage
@@ -18,7 +19,6 @@ interface SidebarItemProps {
   isHidden?: boolean;
   isActive?: boolean;
   subMenus?: TabLayoutRoute[];
-  onToggle?(id: string, meta: { props: SidebarItemProps, event: React.MouseEvent }): void;
 }
 
 @observer
@@ -29,63 +29,66 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
     return this.props.id; // unique id, used in storage and integration tests
   }
 
-  get expanded(): boolean {
-    return Boolean(sidebarStorage.get().expanded[this.id]);
-  }
-
   get compact(): boolean {
     return Boolean(sidebarStorage.get().compact);
   }
 
-  toggleExpand = prevDefault((event: React.MouseEvent) => {
-    sidebarStorage.merge(draft => {
-      draft.expanded[this.id] = !draft.expanded[this.id];
-    });
+  get expanded(): boolean {
+    return Boolean(sidebarStorage.get().expanded[this.id]);
+  }
 
-    this.props.onToggle?.(this.id, {
-      props: this.props,
-      event,
-    });
-  });
-
-  @computed get showSubMenus(): boolean {
+  @computed get isExpandable(): boolean {
     const { subMenus, children } = this.props;
     const hasContent = subMenus?.length > 0 || children;
 
     return Boolean(hasContent && !this.compact) /*not available in compact-mode*/;
   }
 
+  toggleExpand = () => {
+    sidebarStorage.merge(draft => {
+      draft.expanded[this.id] = !draft.expanded[this.id];
+    });
+  };
+
   render() {
     const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props;
 
     if (isHidden) return null;
 
-    const { id: testId, expanded, compact, showSubMenus, toggleExpand } = this;
-    const classNames = cssNames(SidebarItem.displayName, className, { compact });
+    const { id, compact, expanded, isExpandable, toggleExpand } = this;
+    const classNames = cssNames(SidebarItem.displayName, className, {
+      compact,
+    });
 
     return (
-      <div className={classNames} data-test-id={testId}>
-        <div className={cssNames("nav-item flex align-center", { active: isActive })}>
-          <NavLink to={url} isActive={() => isActive} onClick={showSubMenus ? toggleExpand : undefined}>
-            {icon} <span className="link-text">{text}</span>
-          </NavLink>
-          {showSubMenus && <Icon
+      <div className={classNames} data-test-id={id}>
+        <NavLink
+          to={url}
+          className={cssNames("nav-item flex gaps align-center", { active: isActive, expandable: isExpandable })}
+          onClick={isExpandable ? prevDefault(toggleExpand) : undefined}>
+          {icon}
+          <span className="link-text box grow">{text}</span>
+          {isExpandable && <Icon
             className="expand-icon box right"
             material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
           />}
-        </div>
-        {showSubMenus && (
+        </NavLink>
+        {isExpandable && expanded && (
           <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus.map(({ title, url }) => (
-              <NavLink key={url} to={url} className={cssNames({ visible: expanded })}>
-                {title}
-              </NavLink>
-            ))}
-            {React.Children.toArray(children).map((child: React.ReactElement<any>) => {
-              return React.cloneElement(child, {
-                className: cssNames(child.props.className, { visible: expanded }),
-              });
+            {subMenus.map(({ url, title, routePath }) => {
+              const subItemId = `${id}${routePath}`;
+
+              return (
+                <SidebarItem
+                  key={subItemId}
+                  id={subItemId}
+                  url={url}
+                  text={title}
+                  isActive={isActiveRoute({ exact: true, path: routePath })}
+                />
+              );
             })}
+            {children}
           </ul>
         )}
       </div>

src/renderer/components/layout/sidebar.scss

@@ -55,50 +55,11 @@
       border-radius: 50%;
     }
 
-    .link-text {
-      flex: 1;
-      margin-left: $margin;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    > a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      border: none;
-      padding: $itemSpacing;
-
-      &.active, &:hover {
-        background: $lensBlue;
-        color: $sidebarActiveColor;
-      }
-    }
-
     hr {
       background-color: transparent;
     }
   }
 
-  .SidebarItem {
-    &.crd-group {
-      padding-left: 27px;
-      font-weight: 500;
-
-      .nav-item {
-        &:hover {
-          background: transparent;
-        }
-      }
-
-      .sub-menu {
-        a {
-          padding-left: $padding * 3;
-        }
-      }
-    }
-  }
-
   .loading {
     padding: $padding;
     text-align: center;

src/renderer/components/layout/sidebar.tsx

@@ -62,8 +62,7 @@ export class Sidebar extends React.Component<Props> {
       return (
         <SidebarItem
           key={group}
-          id={`crd-${group}`}
-          className="crd-group"
+          id={`crd-group:${group}`}
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
           text={group}