How to hide a component only on home navbar using next.js 13?

Question

I'm finishing my undergraduate degree and creating a website as my course's final project to promote my research. I'm learning next.js just for this.

I have this sidebar in my layout.tsx, but I want to hide the "menuAlt" component only on the homepage. I've done quite a bit of research and haven't found a solution yet. Would anyone know how to help me? Thank you.

import Link from "next/link"
import MenuAlt from "../MenuAlt/MenuAlt"



export default function Sidebar() {
    return (
    <div className="flex flex-col justify-between w-40 h-screen py-12 text-sm font-semibold leading-tight text-center text-white align-middle bg-black border-black">
        <MenuAlt/>
        <Link
            className="hover:scale-110"
            href="/">
            JOGO DA MOBILIDADE ATIVA
            </Link>
    </div>
    )
}

I've tride to useRouter, but it can't seem to work, don't know what i'm doing wrong.

Answer 1

 'use client'
 
import { usePathname } from 'next/navigation'
import Link from "next/link"
import MenuAlt from "../MenuAlt/MenuAlt"

export default function Sidebar() {
    const pathname = usePathname();
    return (
    <div className="flex flex-col justify-between w-40 h-screen py-12 text-sm font-semibold leading-tight text-center text-white align-middle bg-black border-black">
        {pathname !== 'homepage-path' && <MenuAlt/>}
        <Link
            className="hover:scale-110"
            href="/">
            JOGO DA MOBILIDADE ATIVA
            </Link>
    </div>
    )
}