'use client'

import Link from "next/link"
import Image from 'next/image'
import { usePathname } from "next/navigation"

// Обязательно должны быть созданы и заполнены все поля! Иначе будет ошибка.
const navbar = [
  {
    id: 1,
    name: 'Home',
    url: '/',
    mainImage: '/img/footer/Home.svg'
  },
  {
    id: 2,
    name: 'About',
    url: '/search',
    mainImage: '/img/footer/Search.svg'
  },
  {
    id: 3,
    name: 'Reel',
    url: '/reel',
    mainImage: '/img/footer/Reel.svg'
  },
  {
    id: 4,
    name: 'Shopping',
    url: '/shopping',
    mainImage: '/img/footer/Shopping.svg'
  },
  {
    id: 5,
    name: 'IGTV',
    url: '/igtv',
    mainImage: '/img/footer/IGTV.svg'
  }
]

type navbar = {
  src: string;
};

export default function Footer() {
  const pathname = usePathname();

  return (
    <footer className='bg-white pt-4 pb-10 px-8 fixed bottom-0 inset-x-0 z-40 container border-t'>
      <nav className="flex justify-between items-center text-center">
        {navbar.map((item) => (
          <Link
            href={item.url}
            key={item.id}
            className={`${pathname === item.url ? 'text-blue-600' : 'hover:text-blue-500'}`}
          >
            <Image
              src={item.mainImage}
              width={24}
              height={24}
              alt={item.name}
            />
          </Link>
        ))}
      </nav>
    </footer>
  )
}

Props

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

type NavLink = {
  label: string;
  href: string;
  icon?: any;
};
type Props = {
  navLinks: NavLink[];
};

export default function Navbar({ navLinks }: Props) {
  const pathname = usePathname();

  return (
    <nav className="grid gap-2">
        {navLinks.map((link) => {
          const isActive = pathname === link.href;

          return (
            <Link
              key={link.label}
              href={link.href}
              className={`${isActive && "text-light-primary"} font-medium`}
            >
              {link.icon}
              {link.label}
              {/* {isActive && <span className='bg-light-primary absolute bottom-0 rounded-full block w-full h-0.5' />} */}
            </Link>
          );
        })}
    </nav>
  );
};

import Nav from "@/components/Navbar";

const navItems = [
  { label: "Changelog", href: "/core" },
  { label: "Button", href: "/core/button" },
];

export default function Page() {
  return (
    <Navbar navLinks={navItems} />
  )
}

Навигация

Props