forked from UKSOURCE/hailearning.edu.vn
104 lines
4.0 KiB
TypeScript
104 lines
4.0 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 [headerData, setHeaderData] = useState<any>(null);
|
|
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 fetchData = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
// Fetch Menu
|
|
const menuPromise = headerMenuService.getHeaderMenu();
|
|
|
|
// Fetch Header Data (Logo, Topbar)
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
|
const headerPromise = fetch(`${apiUrl}/api/header`).then(res => res.json());
|
|
|
|
const [menuData, headerResult] = await Promise.all([menuPromise, headerPromise]);
|
|
|
|
// Process Menu
|
|
const mappedMenu = menuData.map((item) => adaptMenu(item));
|
|
setMenuItems(mappedMenu);
|
|
|
|
// Process Header Data
|
|
if (headerResult.success && headerResult.data) {
|
|
setHeaderData(headerResult.data);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Error fetching header data:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [adaptMenu]);
|
|
|
|
return (
|
|
<>
|
|
<HeaderTop data={headerData?.top} />
|
|
<HeaderBottom
|
|
onToggleOffcanvas={toggleOffcanvas}
|
|
onToggleMobileMenu={toggleMobileMenu}
|
|
onToggleSearch={toggleSearch}
|
|
menuItems={menuItems}
|
|
isLoading={isLoading}
|
|
logo={headerData?.logo}
|
|
/>
|
|
|
|
<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;
|