Sidebar cluster avatar (#3765)

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -21,10 +21,11 @@
 
 .ClusterManager {
   --bottom-bar-height: 22px;
+  --hotbar-width: 75px;
 
   display: grid;
   grid-template-areas:
-    "menu topbar"
+    "topbar topbar"
     "menu main"
     "bottom-bar bottom-bar";
   grid-template-rows: auto 1fr min-content;
@@ -48,7 +49,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: 40px; // Move below top bar
+    top: 0;
     right: 0;
     bottom: 0;
     display: flex;

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -39,6 +39,7 @@ import { DeleteClusterDialog } from "../delete-cluster-dialog";
 import { reaction } from "mobx";
 import { navigation } from "../../navigation";
 import { setEntityOnRouteMatch } from "../../../main/catalog-sources/helpers/general-active-sync";
+import { TopBar } from "../layout/topbar";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -51,6 +52,7 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
+        <TopBar/>
         <main>
           <div id="lens-views"/>
           <Switch>

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -34,7 +34,6 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { previousActiveTab } from "../+catalog";
-import { TopBar } from "../layout/topbar";
 
 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@@ -105,7 +104,6 @@ export class ClusterView extends React.Component<Props> {
   render() {
     return (
       <div className="ClusterView flex column align-center">
-        <TopBar/>
         {this.renderStatus()}
       </div>
     );