ComproMIT/compro-mit
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide menu items based on current pathname in navbar component

Browse Source
This commit is contained in:
fadilkun45 2026-09-24 11:00:12 +07:00
parent f8d1f92952
commit 819f9d0c73
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/navbar.tsx
View File

@ -6,12 +6,15 @@ import Link from "next/link";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
export default function Navbar() { export default function Navbar() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [activeSection, setActiveSection] = useState(""); const [activeSection, setActiveSection] = useState("");
const pathname = usePathname(); const pathname = usePathname();
const isContact = pathname === "/contact"; const isContact = pathname === "/contact";
const active = isContact ? "contact" : activeSection; const active = isContact ? "contact" : activeSection;
const hideMenu = ["/perubahan-pricing-waba"].some((path) => pathname.includes(path));
const menu = [ const menu = [
{ label: "About Us", url: "/#about-us", id: "about-us" }, { label: "About Us", url: "/#about-us", id: "about-us" },
@ -41,10 +44,10 @@ export default function Navbar() {
<> <>
<div className="bg-white px-4 h-19.5 md:h-18.5 flex items-center w-full justify-between md:py-5.5 md:px-16 sticky top-0 left-0 right-0 z-50"> <div className="bg-white px-4 h-19.5 md:h-18.5 flex items-center w-full justify-between md:py-5.5 md:px-16 sticky top-0 left-0 right-0 z-50">
<Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" /> <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
<button onClick={() => setOpen(true)} className="md:hidden"> <button onClick={() => setOpen(true)} className={hideMenu ? "hidden" : "md:hidden"}>
<ListIcon className="size-8 text-secondary-400 cursor-pointer" /> <ListIcon className="size-8 text-secondary-400 cursor-pointer" />
</button> </button>
<div className="md:flex gap-7.5 hidden"> <div className={hideMenu ? "hidden" : "md:flex gap-7.5 hidden"}>
{menu?.map((item) => ( {menu?.map((item) => (
<Link href={item.url} key={item.label}> <Link href={item.url} key={item.label}>
<div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div> <div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div>
@ -62,7 +65,7 @@ export default function Navbar() {
<XIcon className="size-6 text-secondary-400" /> <XIcon className="size-6 text-secondary-400" />
</button> </button>
</div> </div>
<div className="flex flex-col gap-4 p-4"> <div className={hideMenu ? "hidden" : "flex flex-col gap-4 p-4"}>
{menu?.map((item) => ( {menu?.map((item) => (
<Link href={item.url} key={item.label} onClick={() => setOpen(false)}> <Link href={item.url} key={item.label} onClick={() => setOpen(false)}>
<div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div> <div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div>