client/src/components/Navigation/Navigation.jsx

import React, { useState } from "react";
import {
  AppBar,
  Toolbar,
  Box,
  Link as MuiLink,
  ButtonBase,
  Tooltip,
} from "@mui/material";
import { alpha } from "@mui/material/styles";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
import { Link, useLocation } from "react-router-dom";

const Navigation = ({ onToggleTheme, mode }) => {
  const [hasChanged, setHasChanged] = useState(false);
  const location = useLocation();

  const handleThemeToggle = () => {
    setHasChanged(true);
    onToggleTheme();
  };

  const iconStyle = {
    fontSize: "1.125rem",
    ...(hasChanged && {
      animation: "rotateIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
      "@keyframes rotateIn": {
        "0%": {
          opacity: 0,
          transform:
            mode === "light"
              ? "rotate(-90deg) scale(0.8)"
              : "rotate(90deg) scale(0.8)",
        },
        "100%": {
          opacity: 1,
          transform: "rotate(0) scale(1)",
        },
      },
    }),
  };

  const linkStyle = (isActive = false) => ({
    textDecoration: "none",
    color: isActive ? "text.primary" : "text.secondary",
    fontSize: "0.8125rem",
    opacity: isActive ? 1 : 0.8,
    display: "flex",
    alignItems: "center",
    gap: 0.5,
    paddingBottom: "2px",
    cursor: "pointer",
    position: "relative",
    "&:hover": {
      opacity: 1,
      color: "text.primary",
    },
    "&::after": isActive
      ? {
          content: '""',
          position: "absolute",
          bottom: "-4px",
          left: "0",
          width: "100%",
          height: "2px",
          backgroundColor: (theme) =>
            alpha(
              theme.palette.text.primary,
              theme.palette.mode === "dark" ? 0.3 : 0.2
            ),
          borderRadius: "2px",
        }
      : {},
  });

  const Separator = () => (
    <Box
      sx={(theme) => ({
        width: "4px",
        height: "4px",
        borderRadius: "100%",
        backgroundColor: alpha(
          theme.palette.text.primary,
          theme.palette.mode === "dark" ? 0.2 : 0.15
        ),
      })}
    />
  );

  return (
    <AppBar
      position="static"
      elevation={0}
      sx={{
        backgroundColor: "transparent",
      }}
    >
      <Toolbar sx={{ justifyContent: "center" }}>
        <Box
          sx={{
            display: "flex",
            gap: 2.5,
            alignItems: "center",
            padding: "0.5rem 0",
          }}
        >
          <Box sx={{ display: "flex", gap: 2.5, alignItems: "center" }}>
            <Link
              to="/"
              style={{ textDecoration: "none" }}
              sx={linkStyle(location.pathname === "/")}
            >
              <Box sx={linkStyle(location.pathname === "/")}>Explorer</Box>
            </Link>
            <Link
              to="/submit"
              style={{ textDecoration: "none" }}
              sx={linkStyle(location.pathname === "/submit")}
            >
              <Box sx={linkStyle(location.pathname === "/submit")}>
                How to submit
              </Box>
            </Link>
            {/*<Separator />
             <MuiLink
              href="https://huggingface.co/docs/leaderboards/open_llm_leaderboard/about"
              target="_blank"
              rel="noopener noreferrer"
              sx={{
                ...linkStyle(),
                "& svg": {
                  fontSize: "0.75rem",
                  ml: 0.5,
                  opacity: 0.6,
                  transition: "opacity 0.2s ease-in-out",
                },
                "&:hover svg": {
                  opacity: 0.8,
                },
              }}
            >
              About
              <OpenInNewIcon />
            </MuiLink> */}
          </Box>
          <Separator />
          <Tooltip
            title={
              mode === "light" ? "Switch to dark mode" : "Switch to light mode"
            }
          >
            <ButtonBase
              onClick={handleThemeToggle}
              sx={(theme) => ({
                color: "text.secondary",
                borderRadius: "100%",
                padding: 0,
                width: "36px",
                height: "36px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                transition: "all 0.2s ease-in-out",
                "&:hover": {
                  color: "text.primary",
                  backgroundColor: alpha(
                    theme.palette.text.primary,
                    theme.palette.mode === "dark" ? 0.1 : 0.06
                  ),
                },
              })}
            >
              {mode === "light" ? (
                <DarkModeOutlinedIcon sx={iconStyle} />
              ) : (
                <LightModeOutlinedIcon sx={iconStyle} />
              )}
            </ButtonBase>
          </Tooltip>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Navigation;