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

refactor json header, footer, home and styling ui

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-03 12:09:24 +07:00
parent 1add9d4d9d
commit 5b29928f16
11 changed files with 1476 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,116 +3,50 @@
import Link from 'next/link';
import HeaderMenu from './HeaderMenu';
const homeMegaMenu = (
<>
<div className="homemenu">
<div className="homemenu-thumb">
<img src="/assets/img/header/home-1.jpg" alt="img" />
<div className="demo-button">
<Link href="/" className="theme-btn">
Multi Page <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="homemenu-content text-center">
<h4 className="homemenu-title">
Home 01
</h4>
</div>
</div>
<div className="homemenu">
<div className="homemenu-thumb mb-15">
<img src="/assets/img/header/home-2.jpg" alt="img" />
<div className="demo-button">
<Link href="/index-2" className="theme-btn">
Multi Page <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="homemenu-content text-center">
<h4 className="homemenu-title">
Home 02
</h4>
</div>
</div>
<div className="homemenu">
<div className="homemenu-thumb mb-15">
<img src="/assets/img/header/home-3.jpg" alt="img" />
<div className="demo-button">
<Link href="/index-3" className="theme-btn">
Multi Page <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className="homemenu-content text-center">
<h4 className="homemenu-title">
Home 03
</h4>
</div>
</div>
</>
);
import headerData from './header.json';
const menuItems = [
{
label: 'Home',
href: '/',
megaMenuContent: homeMegaMenu
},
{
label: 'About Us',
href: '/about'
},
{
label: 'Pages',
href: '#',
submenu: [
{
label: 'Service',
href: '#',
submenu: [
{ label: 'Service', href: '/service' },
{ label: 'Service Details', href: '/service-details' }
]
},
{
label: 'Country List',
href: '#',
submenu: [
{ label: 'Country List', href: '/country-list' },
{ label: 'Country Details', href: '/country-details' }
]
},
{ label: 'Our Pricing', href: '/pricing' },
{ label: 'Appointment', href: '/appointment' },
{ label: '404 Page', href: '/404' },
{ label: 'Coming Soon', href: '/coming-soon' }
]
},
{
label: 'VISA',
href: '#',
submenu: [
{ label: 'Visa List', href: '/country-list' },
{ label: 'Visa Details', href: '/country-details' }
]
},
{
label: 'Blog',
href: '#',
submenu: [
{ label: 'Blog Grid', href: '/news-grid' },
{ label: 'Blog Standard', href: '/news' },
{ label: 'Blog Details', href: '/news-details' }
]
},
{
label: 'Contact Us',
href: '/contact'
}
];
const HeaderBottom = () => {
// Map the JSON data to satisfy the HeaderMenu props interface
interface JsonMenuItem {
label: string;
href: string;
children?: JsonMenuItem[];
}
interface MenuItem {
label: string;
href: string;
submenu?: MenuItem[];
megaMenuContent?: React.ReactNode;
}
// We need to recursively map 'children' to 'submenu'
const mapMenuItems = (items: JsonMenuItem[]): MenuItem[] => {
return items.map(item => {
const newItem: MenuItem = {
label: item.label,
href: item.href,
};
if (item.children && item.children.length > 0) {
newItem.submenu = mapMenuItems(item.children);
}
return newItem;
});
};
const menuItems: MenuItem[] = mapMenuItems(headerData.menu as JsonMenuItem[]);
interface HeaderBottomProps {
onToggleOffcanvas: () => void;
onToggleSearch: () => void;
}
const HeaderBottom: React.FC<HeaderBottomProps> = ({ onToggleOffcanvas, onToggleSearch }) => {
return (
<header id="header-sticky" className="header-1">
<div className="container-fluid">
@@ -130,15 +64,22 @@ const HeaderBottom = () => {
</div>
<div className="header-right d-flex align-items-center mt-0">
<div className="header-call-item">
<a href="#" className="main-header__search search-toggler">
<button
onClick={onToggleSearch}
className="main-header__search search-toggler"
>
<i className="fa-regular fa-magnifying-glass"></i>
</a>
</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">
<div
className="sidebar__toggle"
onClick={onToggleOffcanvas}
style={{ cursor: 'pointer' }}
>
<i className="fa-solid fa-bars-staggered"></i>
</div>
</div>