84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
"use client"
|
|
import {FC} from "react";
|
|
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import clsx from "clsx";
|
|
import exp from "node:constants";
|
|
|
|
export interface MenuItem{
|
|
href?: string;
|
|
label: string;
|
|
children?: MenuItem[];
|
|
active?: boolean
|
|
}
|
|
export interface Props{
|
|
menuItems: MenuItem[];
|
|
}
|
|
|
|
const Nav: FC<Props> = ({menuItems}:Props) => {
|
|
|
|
|
|
|
|
return (
|
|
<header>
|
|
<div className="main_header">
|
|
<div className="container-fluid">
|
|
<nav className="navbar navbar-expand-lg navbar-light p-0">
|
|
<a className="navbar-brand" href="/index">
|
|
<figure className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/>
|
|
</figure>
|
|
</a>
|
|
<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: FC<MenuItemProps> = ({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})} 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;
|