forked from UKSOURCE/hailearning.edu.vn
96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import HeaderMenu from './HeaderMenu';
|
|
|
|
import headerData from './header.json';
|
|
|
|
|
|
|
|
// Map the JSON data to satisfy the HeaderMenu props interface
|
|
interface JsonMenuItem {
|
|
label: string;
|
|
href: string;
|
|
children?: JsonMenuItem[];
|
|
}
|
|
|
|
interface MenuItem {
|
|
label: string;
|
|
href: string;
|
|
submenu?: MenuItem[];
|
|
megaMenuContent?: React.ReactNode;
|
|
}
|
|
|
|
// We need to recursively map 'children' to 'submenu'
|
|
const mapMenuItems = (items: JsonMenuItem[]): MenuItem[] => {
|
|
return items.map(item => {
|
|
const newItem: MenuItem = {
|
|
label: item.label,
|
|
href: item.href,
|
|
};
|
|
|
|
|
|
|
|
if (item.children && item.children.length > 0) {
|
|
newItem.submenu = mapMenuItems(item.children);
|
|
}
|
|
|
|
return newItem;
|
|
});
|
|
};
|
|
|
|
const menuItems: MenuItem[] = mapMenuItems(headerData.menu as JsonMenuItem[]);
|
|
|
|
interface HeaderBottomProps {
|
|
onToggleOffcanvas: () => void;
|
|
onToggleSearch: () => void;
|
|
}
|
|
|
|
const HeaderBottom: React.FC<HeaderBottomProps> = ({ onToggleOffcanvas, onToggleSearch }) => {
|
|
return (
|
|
<header id="header-sticky" className="header-1">
|
|
<div className="container-fluid">
|
|
<div className="mega-menu-wrapper">
|
|
<div className="header-main">
|
|
<div className="header-left">
|
|
<div className="logo">
|
|
<Link href="/" className="header-logo-2">
|
|
<img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
|
|
</Link>
|
|
</div>
|
|
<div className="mean__menu-wrapper">
|
|
<HeaderMenu menuItems={menuItems} />
|
|
</div>
|
|
</div>
|
|
<div className="header-right d-flex align-items-center mt-0">
|
|
<div className="header-call-item">
|
|
<button
|
|
onClick={onToggleSearch}
|
|
className="main-header__search search-toggler"
|
|
>
|
|
<i className="fa-regular fa-magnifying-glass"></i>
|
|
</button>
|
|
<Link href="/contact" className="theme-btn">
|
|
Apply now
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
<div className="header__hamburger my-auto">
|
|
<div
|
|
className="sidebar__toggle"
|
|
onClick={onToggleOffcanvas}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<i className="fa-solid fa-bars-staggered"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default HeaderBottom;
|