minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

build ui header, footer, home page, about page

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/components/layout/Header/HeaderMenu.tsx Normal file
View File

@@ -0,0 +1,68 @@
import Link from 'next/link';
interface MenuItem {
label: string;
href: string;
submenu?: MenuItem[];
isMegaMenu?: boolean; // For Home demo images if needed, though simple recursion handles most
megaMenuContent?: React.ReactNode; // Flexible slot for complex mega menus
}
interface HeaderMenuProps {
menuItems: MenuItem[];
}
const HeaderMenu: React.FC<HeaderMenuProps> = ({ menuItems }) => {
return (
<div className="main-menu">
<nav id="mobile-menu">
<ul>
{menuItems.map((item, index) => (
<li key={index} className={`${item.submenu || item.megaMenuContent ? 'has-dropdown' : ''} ${item.href === 'index.html' ? 'active menu-thumb' : ''}`}>
<Link href={item.href} className={item.href === 'index.html' ? '' : 'border-none'}>
{item.label}
{(item.submenu || item.megaMenuContent) && <i className="fas fa-angle-down"></i>}
</Link>
{/* Standard Submenu */}
{item.submenu && !item.megaMenuContent && (
<ul className="submenu">
{item.submenu.map((subItem, subIndex) => (
<li key={subIndex} className={subItem.submenu ? 'has-dropdown' : ''}>
<Link href={subItem.href}>
{subItem.label}
{subItem.submenu && <i className="fas fa-angle-right"></i>}
</Link>
{subItem.submenu && (
<ul className="submenu">
{subItem.submenu.map((nestedItem, nestedIndex) => (
<li key={nestedIndex}>
<Link href={nestedItem.href}>{nestedItem.label}</Link>
</li>
))}
</ul>
)}
</li>
))}
</ul>
)}
{/* Custom Mega Menu (like Home) */}
{item.megaMenuContent && (
<ul className="submenu has-homemenu">
<li>
<div className="homemenu-items">
{item.megaMenuContent}
</div>
</li>
</ul>
)}
</li>
))}
</ul>
</nav>
</div>
);
};
export default HeaderMenu;