[UX]: navigation to cluster overview from sidebar's top icon (#3867)

* UX: navigate to "/cluster" overview page from sidebar's top icon
* highlight hotbar-icon border on click

src/renderer/components/hotbar/hotbar-icon.scss

@@ -31,12 +31,20 @@
 }
 
 .HotbarIcon {
+  --iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+  --iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+
   border-radius: 6px;
   user-select: none;
   cursor: pointer;
   transition: none;
   text-shadow: 0 0 4px #0000008f;
   position: relative;
+  z-index: 0; // allows to catch state of :active pseudo-selector
+
+  &:active .MuiAvatar-root {
+    box-shadow: var(--iconActiveShadow) !important;
+  }
 
   div.MuiAvatar-colorDefault {
     font-weight:500;
@@ -64,20 +72,17 @@
     box-shadow: none;
   }
 
-  div.MuiAvatar-root {
+  .MuiAvatar-root {
     width: var(--size);
     height: var(--size);
+    border-radius: 6px;
 
     &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+      box-shadow: var(--iconActiveShadow);
     }
 
-    &.interactive {
-      &:hover {
-        &:not(.active) {
-          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-        }
-      }
+    &.interactive:not(.active):hover {
+      box-shadow: var(--iconHoverShadow);
     }
   }
 
@@ -117,20 +122,6 @@
     }
   }
 
-  img {
-    border-radius: 6px;
-
-    &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
-    }
-
-    &:hover {
-      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-      }
-    }
-  }
-
   .materialIcon {
     margin-left: 1px;
     margin-top: 1px;

src/renderer/components/layout/sidebar.tsx

@@ -32,7 +32,7 @@ import { Storage } from "../+storage";
 import { Network } from "../+network";
 import { crdStore } from "../+custom-resources/crd.store";
 import { CustomResources } from "../+custom-resources/custom-resources";
-import { isActiveRoute } from "../../navigation";
+import { isActiveRoute, navigate } from "../../navigation";
 import { isAllowedResource } from "../../../common/utils/allowed-resource";
 import { Spinner } from "../spinner";
 import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
@@ -110,7 +110,7 @@ export class Sidebar extends React.Component<Props> {
 
     const routes: TabLayoutRoute[] = [];
     const subMenus = ClusterPageMenuRegistry.getInstance().getSubItems(menu);
-    const clusterPageRegistry= ClusterPageRegistry.getInstance();
+    const clusterPageRegistry = ClusterPageRegistry.getInstance();
 
     for (const subMenu of subMenus) {
       const page = clusterPageRegistry.getByPageTarget(subMenu.target);
@@ -193,6 +193,7 @@ export class Sidebar extends React.Component<Props> {
           source={metadata.source}
           src={spec.icon?.src}
           className="mr-5"
+          onClick={() => navigate(routes.clusterURL())}
         />
         <div className={styles.clusterName}>
           {metadata.name}