Moving TopBar components out of Routes

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

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

@@ -35,10 +35,6 @@
     position: relative;
     display: flex;
     flex-direction: column;
-
-    > * {
-      z-index: 1;
-    }
   }
 
   .HotbarMenu {
@@ -52,7 +48,7 @@
   #lens-views {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 40px; // Move below top bar
     right: 0;
     bottom: 0;
     display: flex;

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

@@ -34,8 +34,6 @@ import { Extensions } from "../+extensions";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
 import { EntitySettings } from "../+entity-settings";
 import { Welcome } from "../+welcome";
-import { ClusterTopbar } from "./cluster-topbar";
-import { CatalogTopbar } from "./catalog-topbar";
 import * as routes from "../../../common/routes";
 
 @observer
@@ -43,8 +41,6 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
-        <Route component={CatalogTopbar} {...routes.catalogRoute} />
-        <Route component={ClusterTopbar} {...routes.clusterViewRoute} />
         <main>
           <div id="lens-views"/>
           <Switch>

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

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

src/renderer/components/input/input.scss

@@ -61,7 +61,6 @@
       width: 0;
       height: 2px;
       background: $primary;
-      transition: width 250ms;
     }
   }
 

src/renderer/components/menu/menu.tsx

@@ -260,6 +260,8 @@ export class Menu extends React.Component<MenuProps, State> {
   }
 
   onBlur() {
+    if (!this.isOpen) return;
+
     if (document.activeElement?.tagName == "IFRAME") {
       this.close();
     }