minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

style(header): Implement responsive mobile menu and improve header layout

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-06 11:35:24 +07:00
parent dc68fe17ab
commit 26037e39b7
6 changed files with 964 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/layout/Header/HeaderBottom.tsx
View File

@@ -1,23 +1,25 @@
'use client';
"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';
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,
const HeaderBottom: React.FC<HeaderBottomProps> = ({
onToggleOffcanvas,
onToggleMobileMenu,
onToggleSearch,
menuItems,
isLoading
isLoading,
}) => {
return (
<header id="header-sticky" className="header-1">
@@ -36,21 +38,44 @@ const HeaderBottom: React.FC<HeaderBottomProps> = ({
</div>
<div className="header-right d-flex align-items-center mt-0">
<div className="header-call-item">
<button
onClick={onToggleSearch}
className="main-header__search search-toggler"
{/* 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>
<div className="header__hamburger my-auto">
<div
className="sidebar__toggle"
{/* 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' }}
style={{ cursor: "pointer" }}
>
<i className="fa-solid fa-bars-staggered"></i>
</div>