Merge pull request 'style(header): Implement responsive mobile menu and improve header layout' (#24) from style/huy-06022026-header-responsive-mobile-and-layout into main

Reviewed-on: UKSOURCE/hailearning.edu.vn#24

app/components/layout/Header/Header.tsx

@@ -1,39 +1,46 @@
-'use client';
+"use client";
 
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from "react";
-import HeaderTop from './HeaderTop';
+import HeaderTop from "./HeaderTop";
-import HeaderBottom from './HeaderBottom';
+import HeaderBottom from "./HeaderBottom";
-import Offcanvas from './Offcanvas';
+import Offcanvas from "./Offcanvas";
-import { headerMenuService } from '@/services/header-menu.service';
+import MobileMenu from "./MobileMenu";
-import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';
+import { headerMenuService } from "@/services/header-menu.service";
+import { HeaderMenu as HeaderMenuType } from "@/types/header-menu";
 
 const Header = () => {
     const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const [isSearchOpen, setIsSearchOpen] = useState(false);
     const [menuItems, setMenuItems] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
 
     const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
+    const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
     const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
 
     // Helper to adapt 'children' from API to 'submenu' for the existing components
-    const adaptMenu = useCallback((item: HeaderMenuType): any => ({
+    const adaptMenu = useCallback(
-        label: item.title,
+        (item: HeaderMenuType): any => ({
-        href: item.url,
+            label: item.title,
-        submenu: item.children && item.children.length > 0 
+            href: item.url,
-            ? item.children.map((child: HeaderMenuType) => adaptMenu(child)) 
+            submenu:
-            : undefined
+                item.children && item.children.length > 0
-    }), []);
+                    ? item.children.map((child: HeaderMenuType) => adaptMenu(child))
+                    : undefined,
+        }),
+        [],
+    );
 
     useEffect(() => {
         const fetchMenu = async () => {
             try {
                 setIsLoading(true);
                 const data = await headerMenuService.getHeaderMenu();
-                const mappedData = data.map(item => adaptMenu(item));
+                const mappedData = data.map((item) => adaptMenu(item));
                 setMenuItems(mappedData);
             } catch (error) {
-                console.error('Error fetching menu in Header:', error);
+                console.error("Error fetching menu in Header:", error);
             } finally {
                 setIsLoading(false);
             }
@@ -45,30 +52,28 @@ const Header = () => {
     return (
         <>
             <HeaderTop />
-            <HeaderBottom 
+            <HeaderBottom
-                onToggleOffcanvas={toggleOffcanvas} 
+                onToggleOffcanvas={toggleOffcanvas}
-                onToggleSearch={toggleSearch} 
+                onToggleMobileMenu={toggleMobileMenu}
+                onToggleSearch={toggleSearch}
                 menuItems={menuItems}
                 isLoading={isLoading}
             />
-            
+
-            <Offcanvas 
+            <Offcanvas isOpen={isOffcanvasOpen} onClose={() => setIsOffcanvasOpen(false)} menuItems={menuItems} />
-                isOpen={isOffcanvasOpen} 
+
-                onClose={() => setIsOffcanvasOpen(false)} 
+            <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} menuItems={menuItems} />
-                menuItems={menuItems}
-            />
 
             {/* Search Popup */}
-            <div className={`search-popup ${isSearchOpen ? 'active' : ''}`}>
+            <div className={`search-popup ${isSearchOpen ? "active" : ""}`}>
-                <div 
+                <div className="search-popup__overlay search-toggler" onClick={() => setIsSearchOpen(false)}></div>
-                    className="search-popup__overlay search-toggler" 
-                    onClick={() => setIsSearchOpen(false)}
-                ></div>
                 <div className="search-popup__content">
                     <form role="search" method="get" className="search-popup__form" action="#">
                         <input type="text" id="search" name="search" placeholder="Search Here..." />
                         <button type="submit" aria-label="search submit" className="search-btn">
-                            <span><i className="fa-regular fa-magnifying-glass"></i></span>
+                            <span>
+                                <i className="fa-regular fa-magnifying-glass"></i>
+                            </span>
                         </button>
                     </form>
                 </div>

app/components/layout/Header/HeaderBottom.tsx

@@ -1,23 +1,25 @@
-'use client';
+"use client";
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import Link from 'next/link';
+import Link from "next/link";
-import HeaderMenu from './HeaderMenu';
+import HeaderMenu from "./HeaderMenu";
-import { headerMenuService } from '@/services/header-menu.service';
+import { headerMenuService } from "@/services/header-menu.service";
-import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';
+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> = ({ 
+const HeaderBottom: React.FC<HeaderBottomProps> = ({
-    onToggleOffcanvas, 
+    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 
+                                {/* Mobile Search Icon - visible on mobile only */}
-                                    onClick={onToggleSearch} 
+                                <button
-                                    className="main-header__search search-toggler"
+                                    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 
+                                {/* Mobile Hamburger - visible on mobile only */}
-                                        className="sidebar__toggle" 
+                                <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>

app/components/layout/Header/MobileMenu.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+
+interface MenuItem {
+    label: string;
+    href: string;
+    submenu?: MenuItem[];
+}
+
+interface MobileMenuProps {
+    isOpen: boolean;
+    onClose: () => void;
+    menuItems: MenuItem[];
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, menuItems }) => {
+    const [expandedItems, setExpandedItems] = useState<{ [key: string]: boolean }>({});
+
+    // Disable body scroll when menu is open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "";
+        }
+
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+
+    const toggleSubmenu = (path: string) => {
+        setExpandedItems((prev) => ({
+            ...prev,
+            [path]: !prev[path],
+        }));
+    };
+
+    const handleLinkClick = () => {
+        onClose();
+    };
+
+    // Recursive component for rendering menu items with nested submenus
+    const renderMenuItem = (item: MenuItem, index: number, parentPath: string = "", level: number = 0) => {
+        const currentPath = parentPath ? `${parentPath}-${index}` : `${index}`;
+        const hasSubmenu = item.submenu && item.submenu.length > 0;
+        const isExpanded = expandedItems[currentPath];
+
+        return (
+            <li key={currentPath} className={`mobile-menu-item mobile-menu-level-${level}`}>
+                <div className="mobile-menu-item-wrapper">
+                    {hasSubmenu ? (
+                        <>
+                            <span className="mobile-menu-link">{item.label}</span>
+                            <button
+                                className="mobile-menu-toggle"
+                                onClick={() => toggleSubmenu(currentPath)}
+                                aria-label={`Toggle ${item.label} submenu`}
+                            >
+                                <i className={`fas ${isExpanded ? "fa-minus" : "fa-plus"}`}></i>
+                            </button>
+                        </>
+                    ) : (
+                        <Link href={item.href} className="mobile-menu-link" onClick={handleLinkClick}>
+                            {item.label}
+                        </Link>
+                    )}
+                </div>
+
+                {/* Submenu with accordion animation - supports nested submenus */}
+                {hasSubmenu && (
+                    <ul
+                        className={`mobile-submenu mobile-submenu-level-${level + 1} ${isExpanded ? "mobile-submenu-open" : ""}`}
+                    >
+                        {item.submenu!.map((subItem, subIndex) =>
+                            renderMenuItem(subItem, subIndex, currentPath, level + 1),
+                        )}
+                    </ul>
+                )}
+            </li>
+        );
+    };
+
+    return (
+        <>
+            {/* Mobile Menu Slide Panel */}
+            <div className={`mobile-slide-menu ${isOpen ? "mobile-menu-open" : ""}`}>
+                <div className="mobile-menu-header">
+                    <div className="mobile-menu-logo">
+                        <Link href="/" onClick={handleLinkClick}>
+                            <img src="/assets/img/logo/black-logo.svg" alt="logo" />
+                        </Link>
+                    </div>
+                    <button className="mobile-menu-close" onClick={onClose} aria-label="Close menu">
+                        <i className="fas fa-times"></i>
+                    </button>
+                </div>
+
+                <nav className="mobile-menu-nav">
+                    <ul className="mobile-menu-list">{menuItems.map((item, index) => renderMenuItem(item, index))}</ul>
+                </nav>
+            </div>
+
+            {/* Overlay */}
+            <div className={`mobile-menu-overlay ${isOpen ? "mobile-overlay-open" : ""}`} onClick={onClose}></div>
+        </>
+    );
+};
+
+export default MobileMenu;

app/components/layout/Header/header-responsive.css

@@ -0,0 +1,271 @@
+/* ========================================
+   HEADER RESPONSIVE FIXES
+   Additional responsive adjustments for header
+   ======================================== */
+
+/* ========================================
+   MOBILE & TABLET (max-width: 991px)
+   ======================================== */
+
+@media (max-width: 991px) {
+    /* Ensure header is always visible and sticky */
+    #header-sticky {
+        position: sticky !important;
+        top: 0;
+        z-index: 999;
+        background-color: var(--white);
+    }
+
+    /* Add shadow when scrolled */
+    #header-sticky.sticky {
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Header container adjustments */
+    .header-1 .container-fluid {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    /* Header main layout */
+    .header-1 .header-main {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+        min-height: 60px;
+    }
+
+    /* Logo section */
+    .header-1 .header-left {
+        flex: 0 0 auto;
+    }
+
+    .header-1 .header-left .logo {
+        margin: 0;
+    }
+
+    .header-1 .header-left .logo img {
+        max-height: 40px;
+        height: 40px;
+        width: auto;
+        object-fit: contain;
+    }
+
+    /* Right section with icons */
+    .header-1 .header-right {
+        flex: 0 0 auto;
+        margin-top: 0 !important;
+    }
+
+    .header-1 .header-right .header-call-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    /* Search icon mobile styling */
+    .header-1 .header-right .main-header__search {
+        width: 40px;
+        height: 40px;
+        border: 2px solid var(--theme);
+        border-radius: 50%;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        transition: all 0.3s ease;
+    }
+
+    .header-1 .header-right .main-header__search i {
+        font-size: 16px;
+        color: var(--theme);
+        transition: color 0.3s ease;
+    }
+
+    .header-1 .header-right .main-header__search:hover {
+        background-color: var(--theme);
+    }
+
+    .header-1 .header-right .main-header__search:hover i {
+        color: var(--white);
+    }
+
+    /* Hamburger icon mobile styling */
+    .header-1 .header__hamburger {
+        margin: 0;
+    }
+
+    .header-1 .header__hamburger .sidebar__toggle {
+        font-size: 24px;
+        color: var(--header);
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: color 0.3s ease;
+    }
+
+    .header-1 .header__hamburger .sidebar__toggle:hover {
+        color: var(--theme);
+    }
+
+    /* Ensure icons don't stick to edges */
+    .header-1 .header-right .header-call-item > * {
+        flex-shrink: 0;
+    }
+}
+
+/* ========================================
+   SMALL MOBILE (max-width: 480px)
+   ======================================== */
+
+@media (max-width: 480px) {
+    .header-1 .container-fluid {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .header-1 .header-main {
+        padding: 10px 0;
+        min-height: 55px;
+    }
+
+    .header-1 .header-left .logo img {
+        max-height: 35px;
+        height: 35px;
+    }
+
+    .header-1 .header-right .header-call-item {
+        gap: 10px;
+    }
+
+    .header-1 .header-right .main-header__search {
+        width: 38px;
+        height: 38px;
+    }
+
+    .header-1 .header-right .main-header__search i {
+        font-size: 15px;
+    }
+
+    .header-1 .header__hamburger .sidebar__toggle {
+        font-size: 22px;
+        padding: 6px;
+    }
+}
+
+/* ========================================
+   DESKTOP (min-width: 992px)
+   ======================================== */
+
+@media (min-width: 992px) {
+    /* Ensure desktop layout is not affected */
+    .header-1 .header-main {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    /* Desktop menu visible */
+    .header-1 .mean__menu-wrapper {
+        display: block;
+    }
+
+    /* Desktop button visible */
+    .header-1 .header-right .theme-btn {
+        display: inline-flex;
+    }
+
+    /* Ensure proper desktop search icon */
+    .header-1 .header-right .main-header__search {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: var(--bg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+/* ========================================
+   PREVENT LAYOUT SHIFT ON LOAD
+   ======================================== */
+
+.header-1 {
+    transition: none;
+}
+
+.header-1.sticky {
+    transition: box-shadow 0.3s ease;
+}
+
+/* ========================================
+   Z-INDEX MANAGEMENT
+   ======================================== */
+
+.header-1 {
+    z-index: 999;
+}
+
+.mobile-slide-menu {
+    z-index: 99999;
+}
+
+.mobile-menu-overlay {
+    z-index: 99998;
+}
+
+.offcanvas__info {
+    z-index: 9999999;
+}
+
+.offcanvas__overlay {
+    z-index: 900;
+}
+
+/* ========================================
+   ACCESSIBILITY IMPROVEMENTS
+   ======================================== */
+
+@media (max-width: 991px) {
+    /* Focus states for mobile */
+    .mobile-search-icon:focus,
+    .mobile-hamburger .sidebar__toggle:focus {
+        outline: 2px solid var(--theme);
+        outline-offset: 2px;
+    }
+
+    /* Touch target sizes */
+    .mobile-search-icon,
+    .mobile-hamburger .sidebar__toggle {
+        min-width: 44px;
+        min-height: 44px;
+    }
+}
+
+/* ========================================
+   HIDE OFFCANVAS ON MOBILE (Prevent Menu Overlap)
+   ======================================== */
+
+@media (max-width: 991px) {
+    /* Hide the old offcanvas menu on mobile - only use new mobile menu */
+    .offcanvas__info,
+    .offcanvas__overlay {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+    }
+}
+
+@media (min-width: 992px) {
+    /* Hide mobile menu on desktop - only use offcanvas */
+    .mobile-slide-menu,
+    .mobile-menu-overlay {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+    }
+}

app/components/layout/Header/mobile-menu.css

@@ -0,0 +1,495 @@
+/* ========================================
+   MOBILE HEADER & MENU STYLES
+   Only applies to mobile & tablet (max-width: 991px)
+   Desktop layout remains unchanged
+   ======================================== */
+
+/* ========================================
+   1. MOBILE HEADER ADJUSTMENTS
+   ======================================== */
+
+@media (max-width: 991px) {
+    /* Make header sticky on mobile */
+    .header-1 {
+        position: sticky;
+        top: 0;
+        z-index: 999;
+        background-color: var(--white);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Hide header top section on mobile */
+    .header-top-section {
+        display: none;
+    }
+
+    /* Mobile header adjustments */
+    .header-1 .header-main {
+        padding: 15px 0;
+    }
+
+    /* Logo adjustments for mobile */
+    .header-1 .header-left .logo img {
+        max-height: 40px;
+        width: auto;
+        object-fit: contain;
+    }
+
+    /* Hide desktop menu on mobile */
+    .header-1 .mean__menu-wrapper {
+        display: none;
+    }
+
+    /* Mobile header right section */
+    .header-1 .header-right .header-call-item {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+
+    /* Hide "Apply now" button on mobile */
+    .header-1 .header-right .theme-btn {
+        display: none;
+    }
+
+    /* Mobile search icon styling */
+    .mobile-search-icon {
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 2px solid var(--theme);
+        border-radius: 50%;
+        background: transparent;
+        color: var(--theme);
+        font-size: 16px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .mobile-search-icon:hover {
+        background-color: var(--theme);
+        color: var(--white);
+    }
+
+    /* Hide desktop search icon on mobile */
+    .desktop-search-icon {
+        display: none !important;
+    }
+
+    /* Mobile hamburger icon styling */
+    .mobile-hamburger {
+        display: block !important;
+    }
+
+    .mobile-hamburger .sidebar__toggle {
+        font-size: 24px;
+        color: var(--header);
+        padding: 5px;
+    }
+
+    /* Hide desktop hamburger on mobile */
+    .desktop-hamburger {
+        display: none !important;
+    }
+
+    /* Ensure proper spacing */
+    .header-1 .container-fluid {
+        padding: 0 20px;
+    }
+}
+
+/* Desktop: Show desktop icons, hide mobile icons */
+@media (min-width: 992px) {
+    .mobile-search-icon,
+    .mobile-hamburger {
+        display: none !important;
+    }
+
+    .desktop-search-icon,
+    .desktop-hamburger {
+        display: block !important;
+    }
+}
+
+/* ========================================
+   2. MOBILE SLIDE MENU
+   ======================================== */
+
+/* Mobile menu container */
+.mobile-slide-menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100%;
+    max-width: 320px;
+    height: 100vh;
+    background-color: var(--white);
+    z-index: 99999;
+    transform: translateX(100%);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-y: auto;
+    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.mobile-slide-menu.mobile-menu-open {
+    transform: translateX(0);
+}
+
+/* Mobile menu header */
+.mobile-menu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.mobile-menu-logo img {
+    max-height: 35px;
+    width: auto;
+}
+
+/* Close button */
+.mobile-menu-close {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    background-color: var(--theme);
+    border: none;
+    color: var(--white);
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.mobile-menu-close:hover {
+    background-color: #d32f2f;
+    transform: rotate(90deg);
+}
+
+/* ========================================
+   3. MOBILE MENU NAVIGATION
+   ======================================== */
+
+.mobile-menu-nav {
+    padding: 10px 0;
+}
+
+.mobile-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.mobile-menu-item {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.mobile-menu-item-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    position: relative;
+}
+
+.mobile-menu-link {
+    flex: 1;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--header);
+    text-decoration: none;
+    text-transform: capitalize;
+    transition: color 0.3s ease;
+}
+
+.mobile-menu-link:hover {
+    color: var(--theme);
+}
+
+/* Plus/Minus toggle button */
+.mobile-menu-toggle {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background: transparent;
+    color: var(--theme);
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    margin-left: 10px;
+}
+
+.mobile-menu-toggle:hover {
+    transform: scale(1.1);
+}
+
+.mobile-menu-toggle i {
+    transition: transform 0.3s ease;
+}
+
+/* ========================================
+   4. MOBILE SUBMENU (ACCORDION)
+   ======================================== */
+
+.mobile-submenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition:
+        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.3s ease,
+        padding 0.3s ease;
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.mobile-submenu.mobile-submenu-open {
+    max-height: 1000px;
+    opacity: 1;
+    padding: 10px 0;
+}
+
+.mobile-submenu-item {
+    padding: 0;
+}
+
+.mobile-submenu-link {
+    display: block;
+    padding: 12px 20px 12px 40px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--header);
+    text-decoration: none;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.mobile-submenu-link::before {
+    content: "→";
+    position: absolute;
+    left: 25px;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.mobile-submenu-link:hover {
+    color: var(--theme);
+    padding-left: 45px;
+}
+
+.mobile-submenu-link:hover::before {
+    opacity: 1;
+    left: 30px;
+}
+
+/* ========================================
+   5. MOBILE MENU OVERLAY
+   ======================================== */
+
+.mobile-menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 99998;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+}
+
+.mobile-menu-overlay.mobile-overlay-open {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* ========================================
+   6. RESPONSIVE ADJUSTMENTS
+   ======================================== */
+
+/* Tablet adjustments */
+@media (max-width: 991px) and (min-width: 768px) {
+    .mobile-slide-menu {
+        max-width: 380px;
+    }
+
+    .mobile-menu-link {
+        font-size: 17px;
+    }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+    .mobile-slide-menu {
+        max-width: 280px;
+    }
+
+    .header-1 .container-fluid {
+        padding: 0 15px;
+    }
+
+    .mobile-menu-header {
+        padding: 15px;
+    }
+
+    .mobile-menu-close {
+        width: 40px;
+        height: 40px;
+        font-size: 16px;
+    }
+}
+
+/* ========================================
+   7. PREVENT BODY SCROLL WHEN MENU OPEN
+   ======================================== */
+
+body.mobile-menu-active {
+    overflow: hidden;
+}
+
+/* ========================================
+   8. SMOOTH ANIMATIONS
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+    .mobile-slide-menu,
+    .mobile-submenu,
+    .mobile-menu-overlay,
+    .mobile-menu-toggle i {
+        transition: none;
+    }
+}
+
+/* ========================================
+   9. DESKTOP - ENSURE NO MOBILE STYLES
+   ======================================== */
+
+@media (min-width: 992px) {
+    .mobile-slide-menu,
+    .mobile-menu-overlay {
+        display: none !important;
+    }
+}
+
+/* ========================================
+   NESTED SUBMENU SUPPORT (Multi-level)
+   ======================================== */
+
+/* Increase max-height for nested submenus */
+.mobile-submenu.mobile-submenu-open {
+    max-height: 2000px !important;
+}
+
+/* Level 1 submenu (first level) */
+.mobile-submenu-level-1 {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.mobile-submenu-level-1 .mobile-menu-item-wrapper {
+    padding-left: 40px;
+    padding-right: 20px;
+}
+
+.mobile-submenu-level-1 .mobile-menu-link {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+/* Level 2 submenu (nested inside level 1) */
+.mobile-submenu-level-2 {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.mobile-submenu-level-2 .mobile-menu-item-wrapper {
+    padding-left: 60px;
+    padding-right: 20px;
+}
+
+.mobile-submenu-level-2 .mobile-menu-link {
+    font-size: 13px;
+    font-weight: 400;
+}
+
+/* Level 3 submenu (nested inside level 2) */
+.mobile-submenu-level-3 {
+    background-color: rgba(0, 0, 0, 0.06);
+}
+
+.mobile-submenu-level-3 .mobile-menu-item-wrapper {
+    padding-left: 80px;
+    padding-right: 20px;
+}
+
+.mobile-submenu-level-3 .mobile-menu-link {
+    font-size: 12px;
+    font-weight: 400;
+}
+
+/* Adjust toggle button size for nested items */
+.mobile-submenu .mobile-menu-toggle {
+    width: 26px;
+    height: 26px;
+    font-size: 14px;
+}
+
+/* Border for nested items */
+.mobile-menu-level-1 {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.mobile-menu-level-2,
+.mobile-menu-level-3 {
+    border-bottom: none;
+}
+
+/* Adjust padding for nested menu items */
+.mobile-menu-level-1 .mobile-menu-item-wrapper,
+.mobile-menu-level-2 .mobile-menu-item-wrapper,
+.mobile-menu-level-3 .mobile-menu-item-wrapper {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+/* ========================================
+   PREVENT MENU OVERLAP - HIDE OLD OFFCANVAS ON MOBILE
+   ======================================== */
+
+@media (max-width: 991px) {
+    /* Completely hide offcanvas menu on mobile */
+    .offcanvas__info,
+    .offcanvas__overlay,
+    .fix-area {
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+        pointer-events: none !important;
+        z-index: -1 !important;
+    }
+}
+
+@media (min-width: 992px) {
+    /* Completely hide mobile menu on desktop */
+    .mobile-slide-menu,
+    .mobile-menu-overlay {
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+        pointer-events: none !important;
+        z-index: -1 !important;
+    }
+}

app/globals.css

@@ -1,8 +1,15 @@
 @import "tailwindcss";
+
+/* Mobile Menu Styles */
+@import "./components/layout/Header/mobile-menu.css";
+
 .collapse {
-  visibility: visible !important;
+    visibility: visible !important;
 }
 
 .collapse.show {
-  visibility: visible;
+    visibility: visible;
 }
+
+/* Header Responsive Styles */
+@import "./components/layout/Header/header-responsive.css";