Skip to content

V
VCCI-News
Commit cb78cb9f authored by Phan Ngọc Quốc Văn's avatar Phan Ngọc Quốc Văn
Browse files
Options

fix/header layout

parent c37880c7
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 105 deletions
src/components/ui/layout/header.tsx
View file @ cb78cb9f
......@@ -57,122 +57,124 @@ function Header() {
</div>
<div className="sticky top-0 z-50 bg-[#ededed] shadow-md">
<div className="w-full flex justify-between">
{/* Logo */}
<a href="/" className="flex items-center">
<Image
className="w-[140px] object-contain lg:ml-0 ml-10"
src={logo}
alt="VCCI HCM"
/>
</a>
{/* Desktop Menu */}
<nav className="hidden lg:flex items-center">
{/* Dùng component MenuItem để gọn */}
<MenuItem
title="Giới thiệu"
items={[
"Về VCCI-HCM",
"Chức Năng Và Nhiệm Vụ",
"Sơ Đồ Tổ Chức",
"Dịch Vụ Cung Cấp",
]}
/>
<MenuItem
title="Hội viên"
items={[
"Lợi Ích Của Hội Viên VCCI",
"Đăng Ký Hội Viên",
"Kết Nối Hội Viên",
"Tin Hội Viên",
]}
/>
<MenuItem title="Hoạt động" items={["Sự Kiện", "Đào Tạo"]} />
<MenuItem
title="Xuất Xứ Hàng Hóa"
items={[
"Định Nghĩa Chung",
"Mục Đích Của C/O",
"Luật Áp Dụng Về C/O",
"Thủ Tục Cấp C/O",
"Biểu Mẫu C/O Và Cách Khai",
"Phí Và Lệ Phí Cấp C/O",
"Điểm Cấp Và Thời Gian Cấp C/O",
"Thông Tin Liên Hệ",
]}
/>
<div className="max-w-[1200px] m-auto">
<div className="w-full flex justify-between">
{/* Logo */}
<a href="/" className="flex items-center">
<Image
className="w-[140px] object-contain lg:ml-0 ml-10"
src={logo}
alt="VCCI HCM"
/>
</a>
{/* Đại Diện Giới Chủ - có submenu cấp 2 */}
<div className="group relative">
<a
className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block"
href="#"
>
Đại Diện Giới Chủ
</a>
<div className="absolute left-0 top-full hidden group-hover:block bg-[#124588]/98 text-white text-[14px] font-[500] min-w-[280px] shadow-lg">
<div className="flex flex-col">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Chức Năng Đại Diện Người Sử Dụng Lao Động
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Sự Kiện – Tập Huấn NSDLĐ
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Tin Liên Quan
</div>
{/* Desktop Menu */}
<nav className="hidden lg:flex items-center">
{/* Dùng component MenuItem để gọn */}
<MenuItem
title="Giới thiệu"
items={[
"Về VCCI-HCM",
"Chức Năng Và Nhiệm Vụ",
"Sơ Đồ Tổ Chức",
"Dịch Vụ Cung Cấp",
]}
/>
<MenuItem
title="Hội viên"
items={[
"Lợi Ích Của Hội Viên VCCI",
"Đăng Ký Hội Viên",
"Kết Nối Hội Viên",
"Tin Hội Viên",
]}
/>
<MenuItem title="Hoạt động" items={["Sự Kiện", "Đào Tạo"]} />
<MenuItem
title="Xuất Xứ Hàng Hóa"
items={[
"Định Nghĩa Chung",
"Mục Đích Của C/O",
"Luật Áp Dụng Về C/O",
"Thủ Tục Cấp C/O",
"Biểu Mẫu C/O Và Cách Khai",
"Phí Và Lệ Phí Cấp C/O",
"Điểm Cấp Và Thời Gian Cấp C/O",
"Thông Tin Liên Hệ",
]}
/>
<div className="relative group/submenu">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer flex justify-between items-center">
Chủ Đề <span className="ml-2 text-xs">›</span>
{/* Đại Diện Giới Chủ - có submenu cấp 2 */}
<div className="group relative">
<a
className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block"
href="#"
>
Đại Diện Giới Chủ
</a>
<div className="absolute left-0 top-full hidden group-hover:block bg-[#124588]/98 text-white text-[14px] font-[500] min-w-[280px] shadow-lg">
<div className="flex flex-col">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Chức Năng Đại Diện Người Sử Dụng Lao Động
</div>
<div className="absolute left-full top-0 hidden group-hover/submenu:block bg-[#124588]/98 text-white text-[14px] font-[500] min-w-[220px] shadow-lg">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Quan Hệ Lao Động
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Phát Triển Kỹ Năng
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Sự Kiện – Tập Huấn NSDLĐ
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Tin Liên Quan
</div>
<div className="relative group/submenu">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer flex justify-between items-center">
Chủ Đề <span className="ml-2 text-xs">›</span>
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Phát Triển Bền Vững
<div className="absolute left-full top-0 hidden group-hover/submenu:block bg-[#124588]/98 text-white text-[14px] font-[500] min-w-[220px] shadow-lg">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Quan Hệ Lao Động
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Phát Triển Kỹ Năng
</div>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
Phát Triển Bền Vững
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<MenuItem
title="Xúc tiến thương mại"
items={[
"Hồ Sơ Thị Trường",
"Môi Trường Kinh Doanh",
"Cơ Hội Kinh Doanh",
"Hỗ Trợ Kinh Doanh",
]}
/>
<MenuItem
title="Thông tin truyền thông"
items={[
"Tin VCCI",
"Tin Kinh Tế",
"Tin Doanh Nghiệp",
"Chuyên Đề",
"Thông Tin Chính Sách Và Pháp Luật",
"Ấn Phẩm",
"Thư Viện Tài Liệu",
]}
/>
</nav>
<MenuItem
title="Xúc tiến thương mại"
items={[
"Hồ Sơ Thị Trường",
"Môi Trường Kinh Doanh",
"Cơ Hội Kinh Doanh",
"Hỗ Trợ Kinh Doanh",
]}
/>
<MenuItem
title="Thông tin truyền thông"
items={[
"Tin VCCI",
"Tin Kinh Tế",
"Tin Doanh Nghiệp",
"Chuyên Đề",
"Thông Tin Chính Sách Và Pháp Luật",
"Ấn Phẩm",
"Thư Viện Tài Liệu",
]}
/>
</nav>
{/* Mobile Button */}
<button
onClick={() => setToggleMenu((prev) => !prev)}
className="lg:hidden p-2 bg-[#063e8e] text-white rounded-sm"
>
{toggleMenu ? <X size={20} /> : <Menu size={20} />}
</button>
{/* Mobile Button */}
<button
onClick={() => setToggleMenu((prev) => !prev)}
className="lg:hidden p-2 bg-[#063e8e] text-white rounded-sm"
>
{toggleMenu ? <X size={20} /> : <Menu size={20} />}
</button>
</div>
</div>
{/* Mobile Menu */}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment