84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|