Skip to content

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

fix/header

parent 52aa1c92
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 107 deletions
src/components/ui/layout/header.tsx
View file @ c37880c7
...@@ -57,124 +57,122 @@ function Header() { ...@@ -57,124 +57,122 @@ 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-center"> <div className="w-full flex justify-between">
<div className="max-w-[1200px] w-full px-4 flex items-center justify-between h-20"> {/* Logo */}
{/* Logo */} <a href="/" className="flex items-center">
<a href="#" className="flex items-center"> <Image
<Image className="w-[140px] object-contain lg:ml-0 ml-10"
className="w-[140px] object-contain lg:ml-0 ml-10" src={logo}
src={logo} alt="VCCI HCM"
alt="VCCI HCM" />
/> </a>
</a>
{/* Desktop Menu */} {/* Desktop Menu */}
<nav className="hidden lg:flex items-center flex-1 ml-8"> <nav className="hidden lg:flex items-center">
{/* Dùng component MenuItem để gọn */} {/* Dùng component MenuItem để gọn */}
<MenuItem <MenuItem
title="Giới thiệu" title="Giới thiệu"
items={[ items={[
"Về VCCI-HCM", "Về VCCI-HCM",
"Chức Năng Và Nhiệm Vụ", "Chức Năng Và Nhiệm Vụ",
"Sơ Đồ Tổ Chức", "Sơ Đồ Tổ Chức",
"Dịch Vụ Cung Cấp", "Dịch Vụ Cung Cấp",
]} ]}
/> />
<MenuItem <MenuItem
title="Hội viên" title="Hội viên"
items={[ items={[
"Lợi Ích Của Hội Viên VCCI", "Lợi Ích Của Hội Viên VCCI",
"Đăng Ký Hội Viên", "Đăng Ký Hội Viên",
"Kết Nối Hội Viên", "Kết Nối Hội Viên",
"Tin Hội Viên", "Tin Hội Viên",
]} ]}
/> />
<MenuItem title="Hoạt động" items={["Sự Kiện", "Đào Tạo"]} /> <MenuItem title="Hoạt động" items={["Sự Kiện", "Đào Tạo"]} />
<MenuItem <MenuItem
title="Xuất Xứ Hàng Hóa" title="Xuất Xứ Hàng Hóa"
items={[ items={[
"Định Nghĩa Chung", "Định Nghĩa Chung",
"Mục Đích Của C/O", "Mục Đích Của C/O",
"Luật Áp Dụng Về C/O", "Luật Áp Dụng Về C/O",
"Thủ Tục Cấp C/O", "Thủ Tục Cấp C/O",
"Biểu Mẫu C/O Và Cách Khai", "Biểu Mẫu C/O Và Cách Khai",
"Phí Và Lệ Phí Cấp C/O", "Phí Và Lệ Phí Cấp C/O",
"Điểm Cấp Và Thời Gian Cấp C/O", "Điểm Cấp Và Thời Gian Cấp C/O",
"Thông Tin Liên Hệ", "Thông Tin Liên Hệ",
]} ]}
/> />
{/* Đại Diện Giới Chủ - có submenu cấp 2 */} {/* Đại Diện Giới Chủ - có submenu cấp 2 */}
<div className="group relative"> <div className="group relative">
<a <a
className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block" className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block"
href="#" href="#"
> >
Đại Diện Giới Chủ Đại Diện Giới Chủ
</a> </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="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="flex flex-col">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer"> <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 Chức Năng Đại Diện Người Sử Dụng 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">
Sự Kiện – Tập Huấn NSDLĐ Sự Kiện – Tập Huấn NSDLĐ
</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 Tin Liên Quan
</div> </div>
<div className="relative group/submenu"> <div className="relative group/submenu">
<div className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer flex justify-between items-center"> <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> Chủ Đề <span className="ml-2 text-xs">›</span>
</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>
<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"> Phát Triển Kỹ Năng
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"> Phát Triển Bền Vững
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