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

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 discordIcon from '../assets/icons/discord.svg';
import telegramIcon from '../assets/icons/telegram.svg';
import giteaIcon from '../assets/icons/gitea.svg';

function NavBar() {
    return (
        <div className="flex flex-col w-full h-full bg-white/1">
            <div>
                <p className='text-white text-2xl font-bold p-3 text-center mb-5 bg-black/25'>
                    <a href='/'>
                        CDRM-Project
                    </a>
                </p>
            </div>
            <div className='overflow-y-auto grow'>
                <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-700/50 bg-black/50' : 'hover:border-l-rose-700/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>
            </div>
            <div className='flex flex-row w-full h-16 self-end bg-black/25'>
                <a
                    href='https://discord.cdrm-project.com'
                    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 cursor-pointer group-hover:animate-bounce'
                    />
                </a>
                <a
                    href='https://telegram.cdrm-project.com'
                    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 cursor-pointer group-hover:animate-bounce'
                    />
                </a>
                <a
                    href='https://cdm-project.com/tpd94/cdrm-project'
                    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 cursor-pointer group-hover:animate-bounce'
                    />
                </a>
            </div>
        </div>
    );
}

export default NavBar;