Skip to content

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

fix/header_link

parent 7081e8df
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 49 deletions
src/app/(main)/_lib/layout/MenuItem.tsx
View file @ 677742fd
const MenuItem = ({ title, items, link }: { title: string; items: string[]; link?: string }) => ( import Link from "next/link";
<div className="group relative">
<a type MenuItemProps = {
className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block" title: string;
href={`${link}`} link?: string;
> items: { title: string; link: string }[];
{title} };
</a>
<div className="absolute left-0 top-full hidden group-hover:block bg-[#124588]/98 text-white text-[14px] font-[500] min-w-[220px] shadow-lg"> const MenuItem = ({ title, link, items }: MenuItemProps) => {
{items.map((item, i) => ( return (
<div <div className="group relative">
key={i} <Link
className="px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer whitespace-nowrap" href={`/${link || ""}`}
> className="px-3 py-5 text-[16px] font-[600] text-[#124588] hover:text-[#E8C518] transition block"
{item} >
</div> {title}
))} </Link>
{/* Dropdown */}
<div className="absolute left-0 top-full hidden group-hover:block bg-[#124588]/98 text-white text-[14px] font-[500] min-w-[220px] shadow-lg">
{items.map((item, i) => (
<Link
key={i}
href={`/${link}/${item.link}`}
className="block px-5 py-3 hover:bg-[#e8c518]/80 cursor-pointer whitespace-nowrap transition"
>
{item.title}
</Link>
))}
</div>
</div> </div>
</div> );
); };
export default MenuItem; export default MenuItem;
src/app/(main)/_lib/layout/header.tsx
View file @ 677742fd
...@@ -75,35 +75,72 @@ function Header() { ...@@ -75,35 +75,72 @@ function Header() {
title="Giới thiệu" title="Giới thiệu"
link="gioi-thieu" link="gioi-thieu"
items={[ items={[
"Về VCCI-HCM", { title: "Về VCCI-HCM", link: "ve-vcci-hcm" },
"Chức Năng Và Nhiệm Vụ", {
"Sơ Đồ Tổ Chức", title: "Chức Năng Và Nhiệm Vụ",
"Dịch Vụ Cung Cấp", link: "chuc-nang-va-nhiem-vu",
},
{ title: "Sơ Đồ Tổ Chức", link: "so-do-to-chuc" },
{ title: "Dịch Vụ Cung Cấp", link: "dich-vu-cung-cap" },
]} ]}
/> />
<MenuItem <MenuItem
title="Hội viên" title="Hội viên"
link="hoi-vien" link="hoi-vien"
items={[ items={[
"Lợi Ích Của Hội Viên VCCI", {
"Đăng Ký Hội Viên", title: "Lợi Ích Của Hội Viên VCCI",
"Kết Nối Hội Viên", link: "",
"Tin Hội Viên", },
{ title: "Đăng Ký Hội Viên", link: "dang-ky-hoi-vien" },
{ title: "Kết Nối Hội Viên", link: "ket-noi-hoi-vien" },
{ title: "Tin Hội Viên", link: "tin-hoi-vien" },
]}
/>
<MenuItem
title="Hoạt động"
link="hoat-dong"
items={[
{ title: "Sự Kiện", link: "" },
{ title: "Đào Tạo", link: "dao-tao" },
]} ]}
/> />
<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"
link="xuat-xu-hang-hoa" link="xuat-xu-hang-hoa"
items={[ items={[
"Định Nghĩa Chung", {
"Mục Đích Của C/O", title: "Định Nghĩa Chung",
"Luật Áp Dụng Về C/O", link: "dinh-nghia-chung",
"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", title: "Mục Đích Của C/O",
"Điểm Cấp Và Thời Gian Cấp C/O", link: "muc-dich",
"Thông Tin Liên Hệ", },
{
title: "Luật Áp Dụng Về C/O",
link: "luat-ap-dung",
},
{
title: "Thủ Tục Cấp C/O",
link: "thu-tuc-cap",
},
{
title: "Biểu Mẫu C/O Và Cách Khai",
link: "bieu-mau-c-o-va-cach-khai",
},
{
title: "Phí Và Lệ Phí Cấp C/O",
link: "phi-va-le-phi-cap",
},
{
title: "Điểm Cấp Và Thời Gian Cấp C/O",
link: "diem-cap-va-thoi-gian-cap",
},
{
title: "Thông Tin Liên Hệ",
link: "thong-tin-lien-he",
},
]} ]}
/> />
...@@ -151,23 +188,29 @@ function Header() { ...@@ -151,23 +188,29 @@ function Header() {
title="Xúc tiến thương mại" title="Xúc tiến thương mại"
link="xuc-tien-thuong-mai" link="xuc-tien-thuong-mai"
items={[ items={[
"Hồ Sơ Thị Trường", { title: "Hồ Sơ Thị Trường", link: "ho-so-thi-truong" },
"Môi Trường Kinh Doanh", {
"Cơ Hội Kinh Doanh", title: "Môi Trường Kinh Doanh",
"Hỗ Trợ Kinh Doanh", link: "moi-truong-kinh-doanh",
},
{ title: "Cơ Hội Kinh Doanh", link: "co-hoi-kinh-doanh" },
{ title: "Hỗ Trợ Kinh Doanh", link: "ho-tro-kinh-doanh" },
]} ]}
/> />
<MenuItem <MenuItem
title="Thông tin truyền thông" title="Thông tin truyền thông"
link="thong-tin-truyen-thong" link="thong-tin-truyen-thong"
items={[ items={[
"Tin VCCI", { title: "Tin VCCI", link: "tin-vcci" },
"Tin Kinh Tế", { title: "Tin Kinh Tế", link: "tin-kinh-te" },
"Tin Doanh Nghiệp", { title: "Tin Doanh Nghiệp", link: "tin-doanh-nghiep" },
"Chuyên Đề", { title: "Chuyên Đề", link: "chuyen-de" },
"Thông Tin Chính Sách Và Pháp Luật", {
"Ấn Phẩm", title: "Thông Tin Chính Sách Và Pháp Luật",
"Thư Viện Tài Liệu", link: "thong-tin-chinh-sach-va-phap-luat",
},
{ title: "Ấn Phẩm", link: "an-pham" },
{ title: "Thư Viện Tài Liệu", link: "thu-vien-tai-lieu" },
]} ]}
/> />
</nav> </nav>
...@@ -184,8 +227,9 @@ function Header() { ...@@ -184,8 +227,9 @@ function Header() {
{/* Mobile Menu */} {/* Mobile Menu */}
<div <div
className={`lg:hidden bg-white shadow-lg transition-all duration-300 overflow-hidden ${toggleMenu ? "max-h-96 opacity-100" : "max-h-0 opacity-0" className={`lg:hidden bg-white shadow-lg transition-all duration-300 overflow-hidden ${
}`} toggleMenu ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
}`}
> >
{[ {[
"Giới thiệu", "Giới thiệu",
......
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