Untitled

import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";

const menuData = [
    {
        id: "1",
        faculty_id: "1",
        parent: "0",
        title: "گروه آموزشی",
    },
    {
        id: "2",
        faculty_id: "1",
        parent: "0",
        title: "اطلاعیه ها",
    },
    {
        id: "3",
        faculty_id: "1",
        parent: "0",
        title: "درباره دانشکده",
    },
    {
        id: "4",
        faculty_id: "1",
        parent: "3",
        title: "تاریخچه",
    },
    {
        id: "5",
        faculty_id: "1",
        parent: "3",
        title: "آلبوم",
    },
    {
        id: "6",
        faculty_id: "1",
        parent: "3",
        title: "رشته ها",
    },
    {
        id: "7",
        faculty_id: "1",
        parent: "1",
        title: "زیر منو گروه آموزشی",
    },
    {
        id: "9",
        faculty_id: "1",
        parent: "1",
        title: "زیر منو 2 گروه آموزشی",
    },
];

const App = () => {
    const renderMenu = (menuItems) => {
        return menuItems.map((item) => {
            if (item.parent === "0") {
                const subMenuItems = menuItems.filter(
                    (subItem) => subItem.parent === item.id,
                );
                if (subMenuItems.length > 0) {
                    return (
                        <NavDropdown
                            title={item.title}
                            id={item.id}
                            key={item.id}
                        >
                            {renderSubMenu(subMenuItems)}
                        </NavDropdown>
                    );
                } else {
                    return (
                        <Nav.Link key={item.id} href="#">
                            {item.title}
                        </Nav.Link>
                    );
                }
            }
            return null;
        });
    };

    const renderSubMenu = (subMenuItems) => {
        return subMenuItems.map((subItem) => {
            const subSubItems = menuData.filter(
                (item) => item.parent === subItem.id,
            );
            if (subSubItems.length > 0) {
                return (
                    <NavDropdown
                        title={subItem.title}
                        id={subItem.id}
                        key={subItem.id}
                    >
                        {renderSubMenu(subSubItems)}
                    </NavDropdown>
                );
            } else {
                return (
                    <NavDropdown.Item key={subItem.id} href="#">
                        {subItem.title}
                    </NavDropdown.Item>
                );
            }
        });
    };

    return (
        <Navbar bg="light" expand="lg">
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">{renderMenu(menuData)}</Nav>
            </Navbar.Collapse>
        </Navbar>
    );
};

export default App;