forked from UKSOURCE/hailearning.edu.vn
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState, useCallback } from 'react';
|
|
import HeaderTop from './HeaderTop';
|
|
import HeaderBottom from './HeaderBottom';
|
|
import Offcanvas from './Offcanvas';
|
|
import { headerMenuService } from '@/services/header-menu.service';
|
|
import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';
|
|
|
|
const Header = () => {
|
|
const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
|
const [menuItems, setMenuItems] = useState<any[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
|
|
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}
|
|
onToggleSearch={toggleSearch}
|
|
menuItems={menuItems}
|
|
isLoading={isLoading}
|
|
/>
|
|
|
|
<Offcanvas
|
|
isOpen={isOffcanvasOpen}
|
|
onClose={() => setIsOffcanvasOpen(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;
|