From 57622e33a1ee3ad9e543d3c3e71a2b1ac7c73a5d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 9 Nov 2021 10:50:57 +0300
Subject: [PATCH] Add keyboard support

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/layout/sidebar-cluster.module.css         | 7 ++++++-
 src/renderer/components/layout/sidebar-cluster.tsx       | 9 ++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/layout/sidebar-cluster.module.css b/src/renderer/components/layout/sidebar-cluster.module.css
index 1bb61d27f9..37a9aed9fa 100644
--- a/src/renderer/components/layout/sidebar-cluster.module.css
+++ b/src/renderer/components/layout/sidebar-cluster.module.css
@@ -47,6 +47,11 @@
 }
 
 .menu {
-  width: 184px;
+  width: 185px;
   margin-top: -10px;
+}
+
+.avatar {
+  font-weight: 500;
+  margin-right: 1.25rem;
 }
\ No newline at end of file
diff --git a/src/renderer/components/layout/sidebar-cluster.tsx b/src/renderer/components/layout/sidebar-cluster.tsx
index e9e81cac02..e86efd9a7c 100644
--- a/src/renderer/components/layout/sidebar-cluster.tsx
+++ b/src/renderer/components/layout/sidebar-cluster.tsx
@@ -83,6 +83,12 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
     toggle();
   };
 
+  const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {
+    if (evt.code == "Space") {
+      toggle();
+    }
+  };
+
   const toggle = () => {
     setOpened(!opened);
   };
@@ -91,13 +97,14 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
   const id = `cluster-${metadata.uid}`;
 
   return (
-    <div className={styles.SidebarCluster} tabIndex={0} id={id}>
+    <div className={styles.SidebarCluster} tabIndex={0} id={id} onKeyDown={onKeyDown} role="menubar">
       <Avatar
         title={metadata.name}
         colorHash={`${metadata.name}-${metadata.source}`}
         width={40}
         height={40}
         src={spec.icon?.src}
+        className={styles.avatar}
       />
       <div className={styles.clusterName}>
         {metadata.name}