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() { ...@@ -57,122 +57,124 @@ function Header() {
</div> </div>
<div className="sticky top-0 z-50 bg-[#ededed] shadow-md"> <div className="sticky top-0 z-50 bg-[#ededed] shadow-md">
<div className="w-full flex justify-between"> <div className="max-w-[1200px] m-auto">
{/* Logo */} <div className="w-full flex justify-between">
<a href="/" className="flex items-center"> {/* Logo */}
<Image <a href="/" className="flex items-center">
className="w-[140px] object-contain lg:ml-0 ml-10" <Image
src={logo} className="w-[140px] object-contain lg:ml-0 ml-10"
alt="VCCI HCM" src={logo}
/> alt="VCCI HCM"
</a> />
</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ệ",
]}
/>
{/* Đại Diện Giới Chủ - có submenu cấp 2 */} {/* Desktop Menu */}
<div className="group relative"> <nav className="hidden lg:flex items-center">
<a {/* Dùng component MenuItem để gọn */}
className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block" <MenuItem
href="#" title="Giới thiệu"
> items={[
Đại Diện Giới Chủ "Về VCCI-HCM",
</a> "Chức Năng Và Nhiệm Vụ",
<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"> "Sơ Đồ Tổ Chức",
<div className="flex flex-col"> "Dịch Vụ Cung Cấp",
<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> <MenuItem
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer"> title="Hội viên"
Sự Kiện – Tập Huấn NSDLĐ items={[
</div> "Lợi Ích Của Hội Viên VCCI",
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer"> "Đăng Ký Hội Viên",
Tin Liên Quan "Kết Nối Hội Viên",
</div> "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"> {/* Đại Diện Giới Chủ - có submenu cấp 2 */}
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer flex justify-between items-center"> <div className="group relative">
Chủ Đề <span className="ml-2 text-xs">›</span> <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>
<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">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer"> Sự Kiện – Tập Huấn NSDLĐ
Quan Hệ Lao Động </div>
</div> <div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer"> Tin Liên Quan
Phát Triển Kỹ Năng </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>
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer"> <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">
Phát Triển Bền Vững <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>
</div> </div>
</div> </div>
</div>
<MenuItem <MenuItem
title="Xúc tiến thương mại" title="Xúc tiến thương mại"
items={[ items={[
"Hồ Sơ Thị Trường", "Hồ Sơ Thị Trường",
"Môi Trường Kinh Doanh", "Môi Trường Kinh Doanh",
"Cơ Hội Kinh Doanh", "Cơ Hội Kinh Doanh",
"Hỗ Trợ Kinh Doanh", "Hỗ Trợ Kinh Doanh",
]} ]}
/> />
<MenuItem <MenuItem
title="Thông tin truyền thông" title="Thông tin truyền thông"
items={[ items={[
"Tin VCCI", "Tin VCCI",
"Tin Kinh Tế", "Tin Kinh Tế",
"Tin Doanh Nghiệp", "Tin Doanh Nghiệp",
"Chuyên Đề", "Chuyên Đề",
"Thông Tin Chính Sách Và Pháp Luật", "Thông Tin Chính Sách Và Pháp Luật",
"Ấn Phẩm", "Ấn Phẩm",
"Thư Viện Tài Liệu", "Thư Viện Tài Liệu",
]} ]}
/> />
</nav> </nav>
{/* Mobile Button */} {/* Mobile Button */}
<button <button
onClick={() => setToggleMenu((prev) => !prev)} onClick={() => setToggleMenu((prev) => !prev)}
className="lg:hidden p-2 bg-[#063e8e] text-white rounded-sm" className="lg:hidden p-2 bg-[#063e8e] text-white rounded-sm"
> >
{toggleMenu ? <X size={20} /> : <Menu size={20} />} {toggleMenu ? <X size={20} /> : <Menu size={20} />}
</button> </button>
</div>
</div> </div>
{/* Mobile Menu */} {/* 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