feat: migrate main menu to mui

src/components/menu/__tests__/menu.test.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Menu from "../index";
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("react-router-dom", () => ({
+  withRouter: (component) => component
+}));
+
+jest.mock("../../../models/member", () => jest.fn().mockImplementation(() => ({
+    hasAccess: () => true
+  })));
+
+jest.mock("../menu-definition", () => ({
+  getGlobalItems: () => [{ name: "directory", linkUrl: "directory" }],
+  getSummitItems: () => [{ name: "summit_dashboard", linkUrl: "dashboard" }]
+}));
+
+const mockHistory = {
+  push: jest.fn(),
+  location: { pathname: "/app/directory" }
+};
+
+const renderMenu = (props = {}) =>
+  render(<Menu member={{}} history={mockHistory} {...props} />);
+
+describe("Menu", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders the general section", () => {
+    renderMenu();
+    expect(screen.getByText("menu.general")).toBeInTheDocument();
+  });
+
+  test("does not render summit section when currentSummit is not provided", () => {
+    renderMenu();
+    expect(screen.queryByText("Test Summit")).not.toBeInTheDocument();
+  });
+
+  test("renders summit section when currentSummit has a valid id", () => {
+    renderMenu({ currentSummit: { id: 1, name: "Test Summit" } });
+    expect(screen.getByText("Test Summit")).toBeInTheDocument();
+  });
+
+  test("does not render summit section when currentSummit.id is 0", () => {
+    renderMenu({ currentSummit: { id: 0, name: "Test Summit" } });
+    expect(screen.queryByText("Test Summit")).not.toBeInTheDocument();
+  });
+
+  test("navigates when a menu item is clicked", () => {
+    renderMenu();
+    const link = screen.getByText("menu.directory");
+    fireEvent.click(link);
+    expect(mockHistory.push).toHaveBeenCalledWith("/app/directory");
+  });
+});

src/components/menu/expandable-item.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React, { useState } from "react";
+import ListItemButton from "@mui/material/ListItemButton";
+import Typography from "@mui/material/Typography";
+import Collapse from "@mui/material/Collapse";
+import List from "@mui/material/List";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+
+function ExpandableItem({
+  label,
+  children,
+  defaultOpen = true,
+  isHeader = false
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <>
+      <ListItemButton
+        onClick={() => setOpen((prev) => !prev)}
+        sx={{ py: 1, ...(isHeader ? { px: 2 } : { pl: 2 }) }}
+      >
+        <Typography
+          variant="body1"
+          sx={{
+            flexGrow: 1,
+            ...(isHeader && { fontWeight: 700, fontSize: "16px" })
+          }}
+        >
+          {label}
+        </Typography>
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List disablePadding>{children}</List>
+      </Collapse>
+    </>
+  );
+}
+
+export default ExpandableItem;