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

style(header): Implement responsive mobile menu and improve header layout

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-06 11:35:24 +07:00
parent dc68fe17ab
commit 26037e39b7
6 changed files with 964 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/layout/Header/Header.tsx
View File

@@ -1,39 +1,46 @@
'use client';
"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';
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
}), []);
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));
const mappedData = data.map((item) => adaptMenu(item));
setMenuItems(mappedData);
} catch (error) {
console.error('Error fetching menu in Header:', error);
console.error("Error fetching menu in Header:", error);
} finally {
setIsLoading(false);
}
@@ -45,30 +52,28 @@ const Header = () => {
return (
<>
<HeaderTop />
<HeaderBottom
onToggleOffcanvas={toggleOffcanvas}
onToggleSearch={toggleSearch}
<HeaderBottom
onToggleOffcanvas={toggleOffcanvas}
onToggleMobileMenu={toggleMobileMenu}
onToggleSearch={toggleSearch}
menuItems={menuItems}
isLoading={isLoading}
/>
<Offcanvas
isOpen={isOffcanvasOpen}
onClose={() => setIsOffcanvasOpen(false)}
menuItems={menuItems}
/>
<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 ${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>
<span>
<i className="fa-regular fa-magnifying-glass"></i>
</span>
</button>
</form>
</div>