Below i will add my Nav component as well as its parent component (Layout). I want to add a nav toggler on mobile devices to show or hide the nav: Nav.jsx: import Link from "next/link";
import { usePathname } from "next/navigation";

// icons
import { GrBusinessService } from "react-icons/gr"; 
import { BsPersonWorkspace } from "react-icons/bs";
import { HiHomeModern } from "react-icons/hi2";
import { SiAffinitydesigner } from "react-icons/si"; 
import { BsFillChatLeftHeartFill } from "react-icons/bs";
import { GrMail } from "react-icons/gr";

// nav data
export const navData = [
  { name: "home", path: "/", Icon: HiHomeModern },
  { name: "about", path: "/about", Icon: BsPersonWorkspace },
  { name: "services", path: "/services", Icon: GrBusinessService },
  { name: "designs", path: "/designs", Icon: SiAffinitydesigner },
  {
    name: "testimonials",
    path: "/testimonials",
    Icon: BsFillChatLeftHeartFill,
  },
  {
    name: "contact",
    path: "/contact",
    Icon: GrMail,
  },
];

const Nav = () => {
  const pathname = usePathname();

  return (
    <nav className="flex flex-col items-center xl:justify-center gap-y-4 fixed h-max bottom-0 mt-auto xl:right-[2%] z-50 top-0 w-full xl:w-16 xl:max-w-md xl:h-screen">
      <div className="flex w-full xl:flex-col items-center justify-between xl:justify-center gap-y-10 px-4 md:px-40 xl:px-0 h-[80px] xl:h-max py-8 bg-white/10 backdrop-blur-sm text-3xl xl:text-xl xl:rounded-full">
        {navData.map((link, i) => (
          <Link
            className={`${
              link.path === pathname && "text-accent"
            } relative flex items-center group hover:text-accent transition-all duration-300`}
            href={link.path}
            key={i}
          >
            {/* tolltip */}
            <div
              role="tooltip"
              className="absolute pr-14 right-0 hidden xl:group-hover:flex"
            >
              <div className="bg-[#f13024] border-1 border-red relative flex text-primary items-center p-[8px] rounded-[5px]">
                <div className="text-[14px] leading-none font-semibold text-white capitalize">
                  {link.name}
                </div>

                {/* triangle */}
                <div
                  className="border-solid border-l-[#f13024] border-l-8 border-y-transparent border-y-[6px] border-r-0 absolute -right-2"
                  aria-hidden
                />
              </div>
            </div>

            {/* icon */}
            <div>
              <link.Icon aria-hidden />
            </div>
          </Link>
        ))}
      </div>
    </nav>
  );
};

export default Nav;
Layout.jsx: import { Sora } from "next/font/google";
import Head from "next/head";

import Header from "../components/Header";
import Nav from "../components/Nav";
import TopLeftImg from "../components/TopLeftImg";

// setup font
const sora = Sora({
  subsets: ["latin"],
  variable: "--font-sora",
  weight: ["100", "200", "300", "400", "500", "600", "700", "800"],
});

const Layout = ({ children }) => {
  return (
    <main
      className={`page bg-site text-white bg-cover bg-no-repeat ${sora.variable} font-sora relative`}
    >
      {/* metadata */}
      <Head>
        <title>Vycta Lemill | Portfolio</title>
        <meta
          name="description"
          content="Vycta Lemill is a Full-stack web developer with 10+ years of experience."
        />
        <meta
          name="keywords"
          content="react, next, nextjs, html, css, javascript, js, modern-ui, modern-ux, portfolio, framer-motion, 3d-website, particle-effect"
        />
        <meta name="author" content="Sanidhya Kumar Verma" />
        <meta name="theme-color" content="#f13024" />
      </Head>

      <TopLeftImg />
      <Nav />
      <Header />

      {/* main content */}
      {children}
    </main>
  );
};

export default Layout;