From a9c06da12153b4b5d83339b1ac382ec32718ae49 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 8 Nov 2021 16:47:25 +0300
Subject: [PATCH] Making cluster area hoverable

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

diff --git a/src/renderer/components/layout/sidebar.module.css b/src/renderer/components/layout/sidebar.module.css
index cf1257627f..2dbdf3d759 100644
--- a/src/renderer/components/layout/sidebar.module.css
+++ b/src/renderer/components/layout/sidebar.module.css
@@ -42,7 +42,19 @@
 }
 
 .cluster {
-  @apply flex items-center m-5;
+  display: flex;
+  align-items: center;
+  padding: 1.25rem;
+  cursor: pointer;
+
+  &:focus-visible {
+    background: var(--blue);
+    color: white;
+  }
+
+  &:hover {
+    background: var(--sidebarLogoBackground);
+  }
 }
 
 .clusterName {
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index f89b06e6d4..6b661c955f 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -206,7 +206,7 @@ export class Sidebar extends React.Component<Props> {
     const { metadata, spec } = this.clusterEntity;
 
     return (
-      <div className={styles.cluster}>
+      <div className={styles.cluster} tabIndex={0}>
         <HotbarIcon
           uid={metadata.uid}
           title={metadata.name}
@@ -232,6 +232,7 @@ export class Sidebar extends React.Component<Props> {
         <div className={styles.clusterName}>
           {metadata.name}
         </div>
+        <Icon material="arrow_drop_down"/>
       </div>
     );
   }