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

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

Browse Source 
Reviewed-on: UKSOURCE/hailearning.edu.vn#24
This commit is contained in:
tranthanh
2026-02-06 04:41:48 +00:00
parent 707728b839 26037e39b7
commit 32b700e040
6 changed files with 964 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/layout/Header/Header.tsx
View File

@@ -1,39 +1,46 @@
'use client';
"use client";
import { useEffect, useState, useCallback } from 'react';
import HeaderTop from './HeaderTop';
import HeaderBottom from './HeaderBottom';
import Offcanvas from './Offcanvas';
import { headerMenuService } from '@/services/header-menu.service';
import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';
import { useEffect, useState, useCallback } from "react";
import HeaderTop from "./HeaderTop";
import HeaderBottom from "./HeaderBottom";
import Offcanvas from "./Offcanvas";
import MobileMenu from "./MobileMenu";
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 => ({
label: item.title,
href: item.url,
submenu: item.children && item.children.length > 0
? item.children.map((child: HeaderMenuType) => adaptMenu(child))
: undefined
}), []);
const adaptMenu = useCallback(
(item: HeaderMenuType): any => ({
label: item.title,
href: item.url,
submenu:
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
onToggleOffcanvas={toggleOffcanvas}
onToggleSearch={toggleSearch}
<HeaderBottom
onToggleOffcanvas={toggleOffcanvas}
onToggleMobileMenu={toggleMobileMenu}
onToggleSearch={toggleSearch}
menuItems={menuItems}
isLoading={isLoading}
/>
<Offcanvas
isOpen={isOffcanvasOpen}
onClose={() => setIsOffcanvasOpen(false)}
menuItems={menuItems}
/>
<Offcanvas isOpen={isOffcanvasOpen} onClose={() => setIsOffcanvasOpen(false)} menuItems={menuItems} />
<MobileMenu isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} menuItems={menuItems} />
{/* Search Popup */}
<div className={`search-popup ${isSearchOpen ? 'active' : ''}`}>
<div
className="search-popup__overlay search-toggler"
onClick={() => setIsSearchOpen(false)}
></div>
<div className={`search-popup ${isSearchOpen ? "active" : ""}`}>
<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>

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>

112
app/components/layout/Header/MobileMenu.tsx Normal file
View File

@@ -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;

271
app/components/layout/Header/header-responsive.css Normal file
View File

@@ -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;
}
}

495
app/components/layout/Header/mobile-menu.css Normal file
View File

@@ -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;
}
}

11
app/globals.css
View File

@@ -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";