62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
export default function NavUI({ menu = [], color = "#fab758" }) {
|
|
const filterHeaderMenu = (items) => {
|
|
return items.filter(item => item.position === 'Header');
|
|
};
|
|
|
|
const renderMenu = (items, level = 0) => {
|
|
if (level === 0) items = filterHeaderMenu(items);
|
|
return items.map((item) => {
|
|
const hasChildren = item.children && item.children.length > 0;
|
|
const hasHref = !!item.href && item.href !== "#";
|
|
if (hasChildren) {
|
|
return (
|
|
<li key={item.id} className={`nav-item dropdown${level > 0 ? " dropdown-submenu dropend" : ""}`}>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
{hasHref && (
|
|
<Link
|
|
className={`${level > 0 ? "dropdown-item" : "nav-link"} !text-[.7rem] !tracking-[normal] hover:!text-[var(--current-color)] after:!text-[var(--current-color)]`}
|
|
href={item.href}
|
|
style={{ paddingRight: 0 }}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
)}
|
|
<a
|
|
className={`${hasHref ? "dropdown-toggle" : (level > 0 ? "dropdown-item" : "nav-link") + " dropdown-toggle"} !text-[.7rem] !tracking-[normal] hover:!text-[var(--current-color)] after:!text-[var(--current-color)]`}
|
|
href="#"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
style={hasHref ? { paddingLeft: 8, minWidth: 24 } : {}}
|
|
>
|
|
{hasHref ? <span className="sr-only">展开</span> : item.label}
|
|
</a>
|
|
</div>
|
|
<ul className={`dropdown-menu${level > 0 ? " submenu" : ""}`}>
|
|
{renderMenu(item.children, level + 1)}
|
|
</ul>
|
|
</li>
|
|
);
|
|
} else {
|
|
return (
|
|
<li key={item.id} className="nav-item">
|
|
<Link
|
|
className={`${level > 0 ? "dropdown-item" : "nav-link"} !text-[.7rem] !tracking-[normal] hover:!text-[var(--current-color)] after:!text-[var(--current-color)]`}
|
|
href={item.href || "#"}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<ul className="navbar-nav" style={{ "--current-color": color }}>
|
|
{renderMenu(menu)}
|
|
</ul>
|
|
);
|
|
}
|