forked from UKSOURCE/hailearning.edu.vn
109 lines
4.7 KiB
TypeScript
109 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import HeaderMenu from "./HeaderMenu";
|
|
import { headerMenuService } from "@/services/header-menu.service";
|
|
import { HeaderMenu as HeaderMenuType } from "@/types/header-menu";
|
|
|
|
interface HeaderBottomProps {
|
|
onToggleOffcanvas: () => void;
|
|
onToggleMobileMenu: () => void;
|
|
onToggleSearch: () => void;
|
|
menuItems: any[];
|
|
isLoading: boolean;
|
|
logo: { light: string; dark: string; alt: string } | null;
|
|
}
|
|
|
|
const HeaderBottom: React.FC<HeaderBottomProps> = ({
|
|
onToggleOffcanvas,
|
|
onToggleMobileMenu,
|
|
onToggleSearch,
|
|
menuItems,
|
|
isLoading,
|
|
logo,
|
|
}) => {
|
|
// Helper function to resolve logo URL
|
|
const getLogoUrl = (path: string | undefined) => {
|
|
if (!path) return "/assets/img/logo/black-logo.svg";
|
|
if (path.startsWith("http")) return path;
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
|
|
return `${apiUrl}${path}`;
|
|
};
|
|
|
|
const logoSrc = getLogoUrl(logo?.light);
|
|
|
|
return (
|
|
<header id="header-sticky" className="header-1">
|
|
<div className="container-fluid">
|
|
<div className="mega-menu-wrapper">
|
|
<div className="header-main">
|
|
<div className="header-left">
|
|
<div className="logo">
|
|
<Link href="/" className="header-logo-2">
|
|
<img
|
|
src={logoSrc}
|
|
alt={logo?.alt || "logo-img"}
|
|
style={{ maxHeight: "4rem" }}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="mean__menu-wrapper">
|
|
{!isLoading && <HeaderMenu menuItems={menuItems as any} />}
|
|
</div>
|
|
</div>
|
|
<div className="header-right d-flex align-items-center mt-0">
|
|
<div className="header-call-item">
|
|
{/* Mobile Search Icon - visible on mobile only */}
|
|
<button
|
|
onClick={onToggleSearch}
|
|
className="main-header__search search-toggler mobile-search-icon"
|
|
>
|
|
<i className="fa-regular fa-magnifying-glass"></i>
|
|
</button>
|
|
|
|
{/* Desktop Search Icon - hidden on mobile */}
|
|
<button
|
|
onClick={onToggleSearch}
|
|
className="main-header__search search-toggler desktop-search-icon"
|
|
>
|
|
<i className="fa-regular fa-magnifying-glass"></i>
|
|
</button>
|
|
|
|
<Link href="/contact" className="theme-btn">
|
|
Apply now
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
|
|
{/* Mobile Hamburger - visible on mobile only */}
|
|
<div className="header__hamburger my-auto mobile-hamburger">
|
|
<div
|
|
className="sidebar__toggle"
|
|
onClick={onToggleMobileMenu}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<i className="fa-solid fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Hamburger - hidden on mobile */}
|
|
<div className="header__hamburger my-auto desktop-hamburger">
|
|
<div
|
|
className="sidebar__toggle"
|
|
onClick={onToggleOffcanvas}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<i className="fa-solid fa-bars-staggered"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default HeaderBottom;
|