styling ui header menu

app/components/layout/Header/HeaderBottom.tsx

@@ -1,52 +1,24 @@
 'use client';
 
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import HeaderMenu from './HeaderMenu';
-
-import headerData from './header.json';
-
-
-
-// Map the JSON data to satisfy the HeaderMenu props interface
-interface JsonMenuItem {
-    label: string;
-    href: string;
-    children?: JsonMenuItem[];
-}
-
-interface MenuItem {
-    label: string;
-    href: string;
-    submenu?: MenuItem[];
-    megaMenuContent?: React.ReactNode;
-}
-
-// We need to recursively map 'children' to 'submenu'
-const mapMenuItems = (items: JsonMenuItem[]): MenuItem[] => {
-    return items.map(item => {
-        const newItem: MenuItem = {
-            label: item.label,
-            href: item.href,
-        };
-
-
-
-        if (item.children && item.children.length > 0) {
-            newItem.submenu = mapMenuItems(item.children);
-        }
-
-        return newItem;
-    });
-};
-
-const menuItems: MenuItem[] = mapMenuItems(headerData.menu as JsonMenuItem[]);
+import { headerMenuService } from '@/services/header-menu.service';
+import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';
 
 interface HeaderBottomProps {
     onToggleOffcanvas: () => void;
     onToggleSearch: () => void;
+    menuItems: any[];
+    isLoading: boolean;
 }
 
-const HeaderBottom: React.FC<HeaderBottomProps> = ({ onToggleOffcanvas, onToggleSearch }) => {
+const HeaderBottom: React.FC<HeaderBottomProps> = ({ 
+    onToggleOffcanvas, 
+    onToggleSearch,
+    menuItems,
+    isLoading
+}) => {
     return (
         <header id="header-sticky" className="header-1">
             <div className="container-fluid">
@@ -59,7 +31,7 @@ const HeaderBottom: React.FC<HeaderBottomProps> = ({ onToggleOffcanvas, onToggle
                                 </Link>
                             </div>
                             <div className="mean__menu-wrapper">
-                                <HeaderMenu menuItems={menuItems} />
+                                {!isLoading && <HeaderMenu menuItems={menuItems as any} />}
                             </div>
                         </div>
                         <div className="header-right d-flex align-items-center mt-0">