styling ui header menu

app/components/layout/Header/Header.tsx

@@ -1,28 +1,61 @@
 'use client';
 
-import { useState } from 'react';
+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 */}