main-site/components/navbar.tsx

import { usePathname } from 'next/navigation'
import { NavBar, NavLink, NavWrap } from './styles/navbar';
import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
import Links from '../public/data/navbar.json';

const PageNavbar = () => {
  const path = usePathname();

  return (
    <NavWrap>
      <StyleSelector></StyleSelector>
      <NavBar>
        {Links.links.map((item) => (
          <NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
            {item.name}
          </NavLink>
        ))}
        <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
          Mastodon
        </NavLink>
      </NavBar>
      <StyleSelectorPlaceholder></StyleSelectorPlaceholder>
    </NavWrap>
  );
}

export default PageNavbar;