refactor: centralize data fetching in layout components

app/components/layout/Header/Header.tsx

@@ -13,6 +13,7 @@ const Header = () => {
     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);
@@ -33,31 +34,48 @@ const Header = () => {
     );
 
     useEffect(() => {
-        const fetchMenu = async () => {
+        const fetchData = async () => {
             try {
                 setIsLoading(true);
-                const data = await headerMenuService.getHeaderMenu();
-                const mappedData = data.map((item) => adaptMenu(item));
-                setMenuItems(mappedData);
+                
+                // 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 menu in Header:", error);
+                console.error("Error fetching header data:", error);
             } finally {
                 setIsLoading(false);
             }
         };
 
-        fetchMenu();
+        fetchData();
     }, [adaptMenu]);
 
     return (
         <>
-            <HeaderTop />
+            <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} />