Add context menu into sidebar

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -44,20 +44,16 @@ interface Props extends DOMAttributes<HTMLElement> {
 
 @observer
 export class HotbarEntityIcon extends React.Component<Props> {
-  @observable private contextMenu: CatalogEntityContextMenuContext;
+  @observable private contextMenu: CatalogEntityContextMenuContext = {
+    menuItems: [],
+    navigate: (url: string) => navigate(url),
+  };
 
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  componentDidMount() {
-    this.contextMenu = {
-      menuItems: [],
-      navigate: (url: string) => navigate(url),
-    };
-  }
-
   get kindIcon() {
     const className = "badge";
     const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);

src/renderer/components/layout/sidebar.tsx

@@ -42,6 +42,8 @@ import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
+import { observable } from "mobx";
+import type { CatalogEntityContextMenuContext } from "../../../common/catalog";
 
 interface Props {
   className?: string;
@@ -50,6 +52,10 @@ interface Props {
 @observer
 export class Sidebar extends React.Component<Props> {
   static displayName = "Sidebar";
+  @observable private contextMenu: CatalogEntityContextMenuContext = {
+    menuItems: [],
+    navigate: (url: string) => navigate(url),
+  };
 
   async componentDidMount() {
     crdStore.reloadAll();
@@ -194,6 +200,8 @@ export class Sidebar extends React.Component<Props> {
           src={spec.icon?.src}
           className="mr-5"
           onClick={() => navigate("/")}
+          menuItems={this.contextMenu.menuItems}
+          onMenuOpen={() => this.clusterEntity.onContextMenuOpen(this.contextMenu)}
         />
         <div className={styles.clusterName}>
           {metadata.name}