Next.js Discord

Discord Forum

Activestyle not applying for sidenav links

Unanswered
Cinnamon posted this in #help-forum
Open in Discord
CinnamonOP
I am building a sidenav for my webapplication where if a user clicks on a link the activestyle needs to be applied to the link, however its not applying right now.

2 Replies

CinnamonOP
export default function Sidenavnew() {
  const [Expanded, setExpanded] = useState(false);
  const router = useRouter();
  const currentRoute = usePathname();

  return (
    <aside
      id="logo-sidebar"
      className="absolute top-0 left-0 z-40 w-60 h-screen transition-transform -translate-x-full border-r sm:translate-x-0 bg-darkblue"
      aria-label="Sidebar"
    >
      <div className="relative pt-20 flex flex-col h-full px-3 py-4 pb-4 overflow-y-auto gap-2 text-slate-800">
        {navData3.map(({ link, icon: Icon, title: Title }, index) => {
          console.log(currentRoute, link); // Add this line
          const activeStyle =
            link === currentRoute ? "bg-hoverblue fill-white" : "";
          return (
            <div key={index} className={`relative`}>
              <Link
                href={`/${link}`}
                className={`row flex flex-row text-center items-center gap-5 rounded-md ${activeStyle} p-2`}
                style={{ color: "rgba(255,255,255,.65)" }}
              >
And this is where I am fethcing my data from: 
import react from "react";  
import Homeicon from "../icons/Sidebaricons/Homeicon";
import Drafticon from "../icons/Sidebaricons/Drafticon";
import Cpqicon from "../icons/Sidebaricons/Cpqicon";
import Calendaricon from "../icons/Sidebaricons/Calendaricon";
import Invoiceicon from "../icons/Sidebaricons/Invoiceicon";

export const navData3 = [
    {
        id:1,
        link:"Home",
        title:() => "Home",
        icon:() => <Homeicon />
    },
    {
        id: 2,
        link: "Drafthome",
        title:() => "Draft",
        icon: () => <Drafticon />,
      },
      {
        id: 3,
        link: "Cpq",
        title:() => "Cpq",
        icon: () => <Cpqicon />,
      },
      {
        id: 4,
        link: "Calendar",
        title:() => "Calendar",
        icon: () => <Calendaricon />,
      },
      {
        id: 5,
        link: "Invoice",
        title:() => "Invoice",
        icon: () => <Invoiceicon />,
      },
];