forked from UKSOURCE/hailearning.edu.vn
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import HeaderTop from "./HeaderTop";
|
|
import HeaderBottom from "./HeaderBottom";
|
|
import Offcanvas from "./Offcanvas";
|
|
import MobileMenu from "./MobileMenu";
|
|
import { headerMenuService } from "@/services/header-menu.service";
|
|
import { HeaderMenu as HeaderMenuType } from "@/types/header-menu";
|
|
|
|
const Header = () => {
|
|
const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
|
const [menuItems, setMenuItems] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
|
|
const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
|
|
const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
|
|
|
|
// Helper to adapt 'children' from API to 'submenu' for the existing components
|
|
const adaptMenu = useCallback(
|
|
(item: HeaderMenuType): any => ({
|
|
label: item.title,
|
|
href: item.url,
|
|
submenu:
|
|
item.children && item.children.length > 0
|
|
? item.children.map((child: HeaderMenuType) => adaptMenu(child))
|
|
: undefined,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const fetchMenu = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const data = await headerMenuService.getHeaderMenu();
|
|
const mappedData = data.map((item) => adaptMenu(item));
|
|
setMenuItems(mappedData);
|
|
} catch (error) {
|
|
console.error("Error fetching menu in Header:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchMenu();
|
|
}, [adaptMenu]);
|
|
|
|
return (
|
|
<>
|
|
<HeaderTop />
|
|
<HeaderBottom
|
|
onToggleOffcanvas={toggleOffcanvas}
|
|
onToggleMobileMenu={toggleMobileMenu}
|
|
onToggleSearch={toggleSearch}
|
|
menuItems={menuItems}
|
|
isLoading={isLoading}
|
|
/>
|
|
|
|
<Offcanvas isOpen={isOffcanvasOpen} onClose={() => setIsOffcanvasOpen(false)} menuItems={menuItems} />
|
|
|
|
<MobileMenu isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} menuItems={menuItems} />
|
|
|
|
{/* Search Popup */}
|
|
<div className={`search-popup ${isSearchOpen ? "active" : ""}`}>
|
|
<div className="search-popup__overlay search-toggler" onClick={() => setIsSearchOpen(false)}></div>
|
|
<div className="search-popup__content">
|
|
<form role="search" method="get" className="search-popup__form" action="#">
|
|
<input type="text" id="search" name="search" placeholder="Search Here..." />
|
|
<button type="submit" aria-label="search submit" className="search-btn">
|
|
<span>
|
|
<i className="fa-regular fa-magnifying-glass"></i>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|