chellaris-galaxy-political-compass/components/navbar.tsx

'use client';
import '@/app/globals.css'
import { usePathname } from 'next/navigation'
import Links from '@/public/routes.json'; // move to api again but use this for inital hydration
import Link from 'next/link';
import React from 'react';

export const PageNavbar = (props: {links: any}) => {
  const path = usePathname();

  let navbar: JSX.Element 
  if (props.links.length != 0) {
    navbar = (
      <nav className='navbar'>
        {props.links.map((item: {name: string, href: string}) => (
          <Link className={(path === item.href ? "active" : "")} key={item.name} href={item.href}>
            {item.name}
          </Link>
        ))}
      </nav>
    );
  }
  else {
    navbar = (
      <nav className='navbar'>
        {Links.links.map((item) => (
          <Link className={(path === item.href ? "active" : "")} key={item.name} href={item.href}>
            {item.name}
          </Link>
        ))}
      </nav>
    );
  }
    
    
  return navbar;
}