FE: Redesign menu

frontend/src/components/App.styled.ts

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 export const Layout = styled.div`
-  min-width: 1200px;
-
   @media screen and (max-width: 1023px) {
     min-width: initial;
   }

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

@@ -0,0 +1,105 @@
+import React, { type FC, useState } from 'react';
+import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
+import * as S from 'components/Nav/Nav.styled';
+import MenuTab from 'components/Nav/Menu/MenuTab';
+import MenuItem from 'components/Nav/Menu/MenuItem';
+import {
+  clusterACLPath,
+  clusterAclRelativePath,
+  clusterBrokerRelativePath,
+  clusterBrokersPath,
+  clusterConnectorsPath,
+  clusterConnectorsRelativePath,
+  clusterConsumerGroupsPath,
+  clusterConsumerGroupsRelativePath,
+  clusterKsqlDbPath,
+  clusterKsqlDbRelativePath,
+  clusterSchemasPath,
+  clusterSchemasRelativePath,
+  clusterTopicsPath,
+  clusterTopicsRelativePath,
+} from 'lib/paths';
+import { useLocation } from 'react-router-dom';
+
+interface ClusterMenuProps {
+  name: Cluster['name'];
+  status: Cluster['status'];
+  features: Cluster['features'];
+  singleMode?: boolean;
+}
+
+const ClusterMenu: FC<ClusterMenuProps> = ({
+  name,
+  status,
+  features,
+  singleMode,
+}) => {
+  const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
+    features?.includes(key);
+  const [isOpen, setIsOpen] = useState(!!singleMode);
+  const location = useLocation();
+
+  const getIsMenuItemActive = (path: string) =>
+    location.pathname.includes(path);
+
+  return (
+    <ul role="menu">
+      <MenuTab
+        title={name}
+        status={status}
+        isOpen={isOpen}
+        toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+      />
+      {isOpen && (
+        <S.List>
+          <MenuItem
+            isActive={getIsMenuItemActive(clusterBrokerRelativePath)}
+            to={clusterBrokersPath(name)}
+            title="Brokers"
+          />
+          <MenuItem
+            isActive={getIsMenuItemActive(clusterTopicsRelativePath)}
+            to={clusterTopicsPath(name)}
+            title="Topics"
+          />
+          <MenuItem
+            isActive={getIsMenuItemActive(clusterConsumerGroupsRelativePath)}
+            to={clusterConsumerGroupsPath(name)}
+            title="Consumers"
+          />
+          {hasFeatureConfigured(ClusterFeaturesEnum.SCHEMA_REGISTRY) && (
+            <MenuItem
+              isActive={getIsMenuItemActive(clusterSchemasRelativePath)}
+              to={clusterSchemasPath(name)}
+              title="Schema Registry"
+            />
+          )}
+          {hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_CONNECT) && (
+            <MenuItem
+              isActive={getIsMenuItemActive(clusterConnectorsRelativePath)}
+              to={clusterConnectorsPath(name)}
+              title="Kafka Connect"
+            />
+          )}
+          {hasFeatureConfigured(ClusterFeaturesEnum.KSQL_DB) && (
+            <MenuItem
+              isActive={getIsMenuItemActive(clusterKsqlDbRelativePath)}
+              to={clusterKsqlDbPath(name)}
+              title="KSQL DB"
+            />
+          )}
+          {(hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_VIEW) ||
+            hasFeatureConfigured(ClusterFeaturesEnum.KAFKA_ACL_EDIT)) && (
+            <MenuItem
+              isActive={getIsMenuItemActive(clusterAclRelativePath)}
+              to={clusterACLPath(name)}
+              title="ACL"
+            />
+          )}
+        </S.List>
+      )}
+    </ul>
+  );
+};
+
+export default ClusterMenu;

frontend/src/components/Nav/__tests__/ClusterMenu.spec.tsx → frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
-import ClusterMenu from 'components/Nav/ClusterMenu';
+import ClusterMenu from 'components/Nav/ClusterMenu/ClusterMenu';
 import userEvent from '@testing-library/user-event';
 import { clusterConnectorsPath } from 'lib/paths';
 import { render } from 'lib/testHelpers';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
 
 describe('ClusterMenu', () => {
   const setupComponent = (cluster: Cluster, singleMode?: boolean) => (
-    <ClusterMenu cluster={cluster} singleMode={singleMode} />
+    <ClusterMenu
+      name={cluster.name}
+      status={cluster.status}
+      features={cluster.features}
+      singleMode={singleMode}
+    />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');
   const getMenuItem = () => screen.getByRole('menuitem');

frontend/src/components/Nav/Menu/MenuItem.tsx

@@ -0,0 +1,26 @@
+import React, { type FC } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import * as S from './styled';
+
+export interface MenuItemProps {
+  to: string;
+  title: string;
+  variant?: 'primary' | 'secondary';
+  isActive?: boolean;
+}
+
+const MenuItem: FC<MenuItemProps> = ({
+  title,
+  to,
+  isActive,
+  variant = 'secondary',
+}) => (
+  <NavLink to={to} title={title}>
+    <S.MenuItem $isActive={isActive} $variant={variant}>
+      {title}
+    </S.MenuItem>
+  </NavLink>
+);
+
+export default MenuItem;