Sidebar cluster avatar (#3765)

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

@@ -19,38 +19,38 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.Sidebar {
-  $iconSize: 24px;
-  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
+.sidebarNav {
+  @apply flex overflow-auto flex-col;
+  width: var(--sidebar-width);
+  padding-bottom: calc(var(--padding) * 3);
 
-  .sidebar-nav {
-    width: var(--sidebar-width);
-    padding-bottom: calc(var(--padding) * 3);
-    overflow: auto;
-
-    .Icon {
-      --size: #{$iconSize};
-
-      box-sizing: content-box;
-      padding: floor($padding / 2.6);
-      border-radius: 50%;
-    }
-
-    hr {
-      background-color: transparent;
-    }
-  }
-
-  .loading {
-    padding: $padding;
-    text-align: center;
-  }
-
-  .cluster-name {
-    padding: 1.25rem;
-    font-weight: bold;
-    font-size: 1.5rem;
-    word-break: break-all;
-    color: var(--textColorAccent);
-  }
+  /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
+  background:
+    linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
+    linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
+    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
+  background-attachment: local, local, scroll, scroll;
 }
+
+.sidebarNav :global(.Icon) {
+  box-sizing: content-box;
+  padding: 3px;
+  border-radius: 50%;
+}
+
+.cluster {
+  @apply flex items-center m-5;
+}
+
+.clusterName {
+  @apply font-bold overflow-hidden;
+  word-break: break-word;
+  color: var(--textColorAccent);
+  display: -webkit-box;
+  /* Simulate text-overflow:ellipsis styles but for multiple text lines */
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

src/renderer/components/layout/sidebar.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./sidebar.scss";
+import styles from "./sidebar.module.css";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
@@ -41,6 +41,7 @@ import { Apps } from "../+apps";
 import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { HotbarIcon } from "../hotbar/hotbar-icon";
 
 interface Props {
   className?: string;
@@ -177,6 +178,29 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
+  renderCluster() {
+    if (!this.clusterEntity) {
+      return null;
+    }
+
+    const { metadata, spec } = this.clusterEntity;
+
+    return (
+      <div className={styles.cluster}>
+        <HotbarIcon
+          uid={metadata.uid}
+          title={metadata.name}
+          source={metadata.source}
+          src={spec.icon?.src}
+          className="mr-5"
+        />
+        <div className={styles.clusterName}>
+          {metadata.name}
+        </div>
+      </div>
+    );
+  }
+
   get clusterEntity() {
     return catalogEntityRegistry.activeEntity;
   }
@@ -185,13 +209,9 @@ export class Sidebar extends React.Component<Props> {
     const { className } = this.props;
 
     return (
-      <div className={cssNames(Sidebar.displayName, "flex column", className)}>
-        {this.clusterEntity && (
-          <div className="cluster-name">
-            {this.clusterEntity.metadata.name}
-          </div>
-        )}
-        <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
+      <div className={cssNames("flex flex-col", className)} data-testid="cluster-sidebar">
+        {this.renderCluster()}
+        <div className={styles.sidebarNav}>
           <SidebarItem
             id="cluster"
             text="Cluster"

src/renderer/components/layout/topbar.module.css

@@ -30,6 +30,10 @@
   grid-area: topbar;
 }
 
+:global(.is-mac) .topBar {
+  padding-left: var(--hotbar-width);
+}
+
 .history {
   @apply flex items-center;
 }

src/renderer/components/layout/topbar.tsx

@@ -95,7 +95,7 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
         <Icon
           data-testid="home-button"
           material="home"
-          className="ml-5"
+          className="ml-4"
           onClick={goHome}
           disabled={isActiveRoute(catalogRoute)}
         />