Aurora-SpotiRip/components/MobileNav.tsx

import { Link, useLocation } from "react-router-dom";
import {
  Activity,
  AudioLines,
  Database,
  Download,
  Ellipsis,
  Heart,
  History,
  Home,
  Settings2,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "./DropdownMenu";
import styles from "./MobileNav.module.css";

function activeClass(current: string, target: string) {
  return current === target ? styles.active : "";
}

export function MobileNav() {
  const location = useLocation();
  const path = location.pathname;
  const moreActive = ["/library", "/analyze", "/history", "/settings"].includes(path);

  return (
    <nav className={styles.nav} aria-label="Mobile navigation">
      <Link className={styles.item + " " + activeClass(path, "/")} to="/">
        <Home size={20} />
        <span>Home</span>
      </Link>
      <Link className={styles.item + " " + activeClass(path, "/identify")} to="/identify">
        <AudioLines size={20} />
        <span>Identify</span>
      </Link>
      <Link className={styles.item + " " + activeClass(path, "/convert")} to="/convert">
        <Download size={20} />
        <span>Convert</span>
      </Link>
      <Link
        className={
          styles.item +
          " " +
          (path === "/spotify-library" || path.startsWith("/artist/") || path.startsWith("/album/")
            ? styles.active
            : "")
        }
        to="/spotify-library"
      >
        <Heart size={20} />
        <span>Spotify</span>
      </Link>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button className={styles.item + " " + (moreActive ? styles.active : "")} type="button">
            <Ellipsis size={20} />
            <span>More</span>
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent side="top" align="end" sideOffset={10} className={styles.menu}>
          <DropdownMenuItem asChild>
            <Link to="/library"><Database size={16} /> Local Library</Link>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link to="/analyze"><Activity size={16} /> Audio Analyzer</Link>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link to="/history"><History size={16} /> History</Link>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <Link to="/settings"><Settings2 size={16} /> Settings</Link>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </nav>
  );
}