CDRM-Project/cdrm-frontend/src/components/NavBar.jsx

import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import homeIcon from "../assets/icons/home.svg";
import cacheIcon from "../assets/icons/cache.svg";
import apiIcon from "../assets/icons/api.svg";
import testPlayerIcon from "../assets/icons/testplayer.svg";
import accountIcon from "../assets/icons/account.svg";
import discordIcon from "../assets/icons/discord.svg";
import telegramIcon from "../assets/icons/telegram.svg";
import giteaIcon from "../assets/icons/gitea.svg";

function NavBar() {
    const [externalLinks, setExternalLinks] = useState({
        discord: "#",
        telegram: "#",
        gitea: "#",
    });

    useEffect(() => {
        fetch("/api/links")
            .then((response) => response.json())
            .then((data) => setExternalLinks(data))
            .catch((error) => console.error("Error fetching links:", error));
    }, []);

    return (
        <div className="flex flex-col w-full h-full bg-white/1">
            {/* Header */}
            <div>
                <p className="text-white text-2xl font-bold p-3 text-center mb-5">
                    <a href="/">CDRM-Project</a>
                </p>
            </div>

            {/* Scrollable navigation area */}
            <div className="overflow-y-auto grow flex flex-col">
                {/* Main NavLinks */}
                <NavLink
                    to="/"
                    className={({ isActive }) =>
                        `flex flex-row p-3 border-l-3 ${
                            isActive
                                ? "border-l-sky-500/50 bg-black/50"
                                : "hover:border-l-sky-500/50 hover:bg-white/5"
                        }`
                    }
                >
                    <button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer">
                        <img src={homeIcon} alt="Home" className="w-1/2 cursor-pointer" />
                    </button>
                    <p className="grow text-white md:text-2xl font-bold flex items-center justify-start">
                        Home
                    </p>
                </NavLink>

                <NavLink
                    to="/cache"
                    className={({ isActive }) =>
                        `flex flex-row p-3 border-l-3 ${
                            isActive
                                ? "border-l-emerald-500/50 bg-black/50"
                                : "hover:border-l-emerald-500/50 hover:bg-white/5"
                        }`
                    }
                >
                    <button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer">
                        <img src={cacheIcon} alt="Cache" className="w-1/2 cursor-pointer" />
                    </button>
                    <p className="grow text-white md:text-2xl font-bold flex items-center justify-start">
                        Cache
                    </p>
                </NavLink>

                <NavLink
                    to="/api"
                    className={({ isActive }) =>
                        `flex flex-row p-3 border-l-3 ${
                            isActive
                                ? "border-l-indigo-500/50 bg-black/50"
                                : "hover:border-l-indigo-500/50 hover:bg-white/5"
                        }`
                    }
                >
                    <button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer">
                        <img src={apiIcon} alt="API" className="w-1/2 cursor-pointer" />
                    </button>
                    <p className="grow text-white md:text-2xl font-bold flex items-center justify-start">
                        API
                    </p>
                </NavLink>

                <NavLink
                    to="/testplayer"
                    className={({ isActive }) =>
                        `flex flex-row p-3 border-l-3 ${
                            isActive
                                ? "border-l-rose-500/50 bg-black/50"
                                : "hover:border-l-rose-500/50 hover:bg-white/5"
                        }`
                    }
                >
                    <button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer">
                        <img
                            src={testPlayerIcon}
                            alt="Test Player"
                            className="w-1/2 cursor-pointer"
                        />
                    </button>
                    <p className="grow text-white md:text-2xl font-bold flex items-center justify-start">
                        Test Player
                    </p>
                </NavLink>

                {/* Account link at bottom of scrollable area */}
                <div className="mt-auto">
                    <NavLink
                        to="/account"
                        className={({ isActive }) =>
                            `flex flex-row p-3 border-l-3 ${
                                isActive
                                    ? "border-l-yellow-500/50 bg-black/50"
                                    : "hover:border-l-yellow-500/50 hover:bg-white/5"
                            }`
                        }
                    >
                        <button className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer">
                            <img src={accountIcon} alt="Account" className="w-1/2 cursor-pointer" />
                        </button>
                        <p className="grow text-white md:text-2xl font-bold flex items-center justify-start">
                            My Account
                        </p>
                    </NavLink>
                </div>
            </div>

            {/* External links at very bottom */}
            <div className="flex flex-row w-full h-16 bg-black/25">
                <a
                    href={externalLinks.discord}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-950 group"
                >
                    <img
                        src={discordIcon}
                        alt="Discord"
                        className="w-1/2 group-hover:animate-bounce"
                    />
                </a>
                <a
                    href={externalLinks.telegram}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-blue-400 group"
                >
                    <img
                        src={telegramIcon}
                        alt="Telegram"
                        className="w-1/2 group-hover:animate-bounce"
                    />
                </a>
                <a
                    href={externalLinks.gitea}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-1/3 p-3 flex flex-col items-center justify-center cursor-pointer hover:bg-green-700 group"
                >
                    <img src={giteaIcon} alt="Gitea" className="w-1/2 group-hover:animate-bounce" />
                </a>
            </div>
        </div>
    );
}

export default NavBar;