Next.js Discord

Discord Forum

Navigation

Unanswered
! nolikas posted this in #help-forum
Open in Discord
! nolikasOP
How do I display my "active" navigation link's Name in my mobile navbar?

19 Replies

! nolikasOP
const navigation = [
  { name: "Dashboard", href: "/dashboard", icon: BsGrid, beta: false },
  { name: "TODOs", href: "/dashboard/todos", icon: BsClipboard2Check, beta: false },
  { name: "Timers", href: "/dashboard/timers", icon: BsFillStopwatchFill, beta: false },
  { name: "Colors", href: "/dashboard/colors", icon: BsPaletteFill, beta: false },
  { name: "Calendar", href: "/dashboard/calendar", icon: BsCalendar2Check, beta: true },
  { name: "Forum", href: "https://forum.eliksir.dev/", icon: BsFillQuestionCircleFill, beta: true },
  { name: "Code Snippets", href: "/dashboard/snippets", icon: BsBracesAsterisk, beta: true },
]
This is my navigation element
I want to put "active" item's name here:
(code:)
<div className="sticky m-4 z-40 bg-zinc-800 rounded-lg flex">
          <button type="button" className="p-2.5 m-2 text-gray-400 lg:hidden" onClick={() => setSidebarOpen(true)}>
            <span className="sr-only">Open sidebar</span>
            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
          </button>
          <h1 className="font-montserrat font-semibold text-purples-400 text-xl text-center self-center">
            
          </h1>
        </div>
Maheśvara
If your navbar is a client component, then you can use usePathname to get your current path and then do a simple equality comparison from there to display the name.

Something like:
const pathname = usePathname()
const title = navigation.filter(i => i.href === pathname)

return(
<div className="sticky m-4 z-40 bg-zinc-800 rounded-lg flex">
          <button type="button" className="p-2.5 m-2 text-gray-400 lg:hidden" onClick={() => setSidebarOpen(true)}>
            <span className="sr-only">Open sidebar</span>
            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
          </button>
          <h1 className="font-montserrat font-semibold text-purples-400 text-xl text-center self-center">
            {title}
          </h1>
        </div>
)
You can use different ways to achieve this either with a combination of RSCs and RCCs or just RCCs, it's all up to you.
I'm getting this error tho:
Type '{ name: string; href: string; icon: IconType; beta: boolean; }[]' is not assignable to type 'ReactNode'.
  Type '{ name: string; href: string; icon: IconType; beta: boolean; }[]' is not assignable to type 'Iterable<ReactNode>'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<{ name: string; href: string; icon: IconType; beta: boolean; }, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<{ name: string; href: string; icon: IconType; beta: boolean; }>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<{ name: string; href: string; icon: IconType; beta: boolean; }>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type '{ name: string; href: string; icon: IconType; beta: boolean; }' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1434, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'
const title: {
    name: string;
    href: string;
    icon: IconType;
    beta: boolean;
}[]
Transvaal lion
You are trying to assign an object (title) to a ReactNode(children), hence your error. Replace { title } with {title.name} in your h1
! nolikasOP
Well, makes sense... :skull_skullbones:
! nolikasOP
Bruhh
Property 'name' does not exist on type '{ name: string; href: string; icon: IconType; beta: boolean; }[]'.ts(2339)
{title.name}
Transvaal lion
because title is an array. use title[0].name instead
! nolikasOP
Ahhh...
This is what "not knowing basic indexing" means...
English Angora
https://github.com/M-Valentino/M-Valentino_NextJS/tree/main/src/components/layout/navigation This is how I did it for mine
For every page I use the MainWrapper component which contains the navbar and other stuff. I simply pass a string through props which then gets passed more through a chain of components until it reaches a button/list item component
<MainWrapper activeLink={PAGE_TITLES.contact}>
Through inline styles I change the color if the menu item/link's name equals the active link