FE: UX: Fix multiple cluster menu selected (#1120)

Co-authored-by: Leshe4ka <[email protected]>

Author: Leshe4ka

frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx

@@ -5,19 +5,13 @@ import MenuTab from 'components/Nav/Menu/MenuTab';
 import MenuItem from 'components/Nav/Menu/MenuItem';
 import {
   clusterACLPath,
-  clusterAclRelativePath,
-  clusterBrokerRelativePath,
+  clusterBrokerPath,
   clusterBrokersPath,
   clusterConnectorsPath,
-  clusterConnectorsRelativePath,
   clusterConsumerGroupsPath,
-  clusterConsumerGroupsRelativePath,
   clusterKsqlDbPath,
-  clusterKsqlDbRelativePath,
   clusterSchemasPath,
-  clusterSchemasRelativePath,
   clusterTopicsPath,
-  clusterTopicsRelativePath,
 } from 'lib/paths';
 import { useLocation } from 'react-router-dom';
 import { useLocalStorage } from 'lib/hooks/useLocalStorage';
@@ -60,45 +54,45 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
       {isOpen && (
         <S.List>
           <MenuItem
-            isActive={getIsMenuItemActive(clusterBrokerRelativePath)}
+            isActive={getIsMenuItemActive(clusterBrokerPath(name))}
             to={clusterBrokersPath(name)}
             title="Brokers"
           />
           <MenuItem
-            isActive={getIsMenuItemActive(clusterTopicsRelativePath)}
+            isActive={getIsMenuItemActive(clusterTopicsPath(name))}
             to={clusterTopicsPath(name)}
             title="Topics"
           />
           <MenuItem
-            isActive={getIsMenuItemActive(clusterConsumerGroupsRelativePath)}
+            isActive={getIsMenuItemActive(clusterConsumerGroupsPath(name))}
             to={clusterConsumerGroupsPath(name)}
             title="Consumers"
           />
           {hasFeatureConfigured(ClusterFeaturesEnum.SCHEMA_REGISTRY) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterSchemasRelativePath)}
+              isActive={getIsMenuItemActive(clusterSchemasPath(name))}
               to={clusterSchemasPath(name)}
               title="Schema Registry"
             />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_CONNECT) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterConnectorsRelativePath)}
+              isActive={getIsMenuItemActive(clusterConnectorsPath(name))}
               to={clusterConnectorsPath(name)}
               title="Kafka Connect"
             />
           )}
           {hasFeatureConfigured(ClusterFeaturesEnum.KSQL_DB) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterKsqlDbRelativePath)}
+              isActive={getIsMenuItemActive(clusterKsqlDbPath(name))}
               to={clusterKsqlDbPath(name)}
               title="KSQL DB"
             />
           )}
           {(hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
             hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_EDIT)) && (
             <MenuItem
-              isActive={getIsMenuItemActive(clusterAclRelativePath)}
+              isActive={getIsMenuItemActive(clusterACLPath(name))}
               to={clusterACLPath(name)}
               title="ACL"
             />

frontend/src/components/Nav/Nav.styled.ts

@@ -15,8 +15,8 @@ export const ClusterList = styled.ul.attrs<{ $colorKey: ClusterColorKey }>({
   role: 'menu',
 })`
   border-radius: 8px;
-  padding: 4px 4px 4px 4px;
-  margin-bottom: -8px;
+  padding: 2px 4px;
+  margin-bottom: 2px;
   background-color: ${({ theme, $colorKey }) =>
     theme.clusterMenu.backgroundColor[$colorKey]};
 `;