forked from UKSOURCE/hailearning.edu.vn
93 lines
4.0 KiB
TypeScript
93 lines
4.0 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;
|
|
}
|
|
|
|
const HeaderBottom: React.FC<HeaderBottomProps> = ({
|
|
onToggleOffcanvas,
|
|
onToggleMobileMenu,
|
|
onToggleSearch,
|
|
menuItems,
|
|
isLoading,
|
|
}) => {
|
|
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="/assets/img/logo/black-logo.svg" alt="logo-img" />
|
|
</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;
|