Untitled
javascript
2 months ago
3.2 kB
1
Indexable
Never
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;