88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
"use client"
|
|
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import clsx from "clsx";
|
|
import Link from "next/link";
|
|
|
|
export interface MenuItem {
|
|
href?: string;
|
|
label: string;
|
|
children?: MenuItem[];
|
|
active?: boolean,
|
|
styleClass?: string;
|
|
}
|
|
|
|
export interface Props {
|
|
menuItems: MenuItem[];
|
|
imageSrc?: string;
|
|
}
|
|
|
|
const Nav = ({menuItems, imageSrc}: Props) => {
|
|
|
|
return (
|
|
<header>
|
|
<div className="main_header">
|
|
<div className="container-fluid">
|
|
<nav className="navbar navbar-expand-lg navbar-light p-0">
|
|
<Link className="navbar-brand" href="/">
|
|
<figure className="mb-0"> {imageSrc && <YogaImageComponent src={imageSrc} alt=""/>}
|
|
</figure>
|
|
</Link>
|
|
<button className="navbar-toggler collapsed" type="button" data-toggle="collapse"
|
|
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
|
aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
<span className="navbar-toggler-icon"></span>
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav">
|
|
{menuItems.map((menuItem, index) => <MenuItemComponent
|
|
key={"nav" + menuItem.href + "_" + index} menuItem={menuItem}/>)}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
interface MenuItemProps {
|
|
menuItem: MenuItem,
|
|
dropdownItem?: boolean,
|
|
}
|
|
|
|
const MenuItemComponent = ({menuItem, dropdownItem}: MenuItemProps) => {
|
|
if (!menuItem) {
|
|
return (<></>);
|
|
}
|
|
if (!menuItem.children || menuItem.children.length == 0) {
|
|
return (
|
|
// <li className="nav-item active">
|
|
<li className={clsx("nav-item", {"active": menuItem.active})}>
|
|
<a className={clsx("nav-link", {"dropdown-item": dropdownItem}, menuItem.styleClass)}
|
|
href={menuItem.href!}>{menuItem.label}</a>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li className={clsx("nav-item", "dropdown", {"active": menuItem.active})}>
|
|
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#"
|
|
role="button" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false">{menuItem.label}</a>
|
|
<div className="dropdown-menu drop-down-content">
|
|
<ul className="list-unstyled drop-down-pages">
|
|
{
|
|
menuItem.children.map((item, index) => <MenuItemComponent
|
|
key={"child_" + item.href + "_" + index} menuItem={item} dropdownItem={true}/>)
|
|
}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
|
|
export default Nav;
|