Making cluster area hoverable

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

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 {

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>
     );
   }