mars-v2-frontend/components/Navigation.tsx

import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

const mockedAccounts = [
  {
    label: "Subaccount 1",
  },
  {
    label: "Subaccount 2",
  },
  {
    label: "Subaccount 3",
  },
  {
    label: "Subaccount 4",
  },
];

const NavLink = ({ href, children }: { href: string; children: string }) => {
  const router = useRouter();

  return (
    <Link href={href} passHref>
      <a
        className={`${
          router.pathname === href ? "text-white" : ""
        } hover:text-white`}
      >
        {children}
      </a>
    </Link>
  );
};

const Navigation = () => (
  <div>
    {/* Main navigation bar */}
    <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
      <Link href="/" passHref>
        <a>
          <img src="/logo.svg" alt="mars" />
        </a>
      </Link>
      <div className="flex px-12 gap-5 text-white/40">
        <NavLink href="/trade">Trade</NavLink>
        <NavLink href="/yield">Yield</NavLink>
        <NavLink href="/borrow">Borrow</NavLink>
        <NavLink href="/portfolio">Portfolio</NavLink>
        <NavLink href="/council">Council</NavLink>
      </div>
      <button
        className="rounded-3xl bg-green-500 py-2 px-3 font-semibold"
        onClick={() => alert("TODO")}
      >
        Connect Wallet
      </button>
    </div>
    {/* Sub navigation bar */}
    <div className="flex justify-between px-6 py-3 text-sm text-white/40">
      <div className="flex">
        {mockedAccounts.map((account, index) => (
          <div key={index} className="px-4">
            {account.label}
          </div>
        ))}
        <div className="px-3 ">More</div>
        <div className="px-3">Manage</div>
      </div>
      <div className="flex gap-4">
        <p>$: 2500</p>
        <div>Lvg Gauge</div>
        <div>Risk Gauge</div>
      </div>
    </div>
  </div>
);

export default Navigation;