53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { Link, useNavigate } from 'react-router-dom';
|
|
import iconSearch from '/img/icon-search.svg';
|
|
import iconGear from '/img/icon-gear.svg';
|
|
import iconExit from '/img/icon-exit.svg';
|
|
import Routes from '../configuration/routes/RouteList';
|
|
import NavigationItem from './NavigationItem';
|
|
import logOut from '../api/actions/logOut';
|
|
import loadIsAdmin from '../functions/getIsAdmin';
|
|
|
|
const Navigation = () => {
|
|
const isAdmin = loadIsAdmin();
|
|
const navigate = useNavigate();
|
|
const handleLogout = async (event: { preventDefault: () => void }) => {
|
|
event.preventDefault();
|
|
await logOut();
|
|
navigate(Routes.Login);
|
|
};
|
|
|
|
return (
|
|
<div className="boxed-content">
|
|
<Link to={Routes.Home}>
|
|
<div className="top-banner"></div>
|
|
</Link>
|
|
<div className="top-nav">
|
|
<div className="nav-items">
|
|
<NavigationItem label="home" navigateTo={Routes.Home} />
|
|
<NavigationItem label="channels" navigateTo={Routes.Channels} />
|
|
<NavigationItem label="playlists" navigateTo={Routes.Playlists} />
|
|
|
|
{isAdmin && <NavigationItem label="downloads" navigateTo={Routes.Downloads} />}
|
|
</div>
|
|
<div className="nav-icons">
|
|
<Link to={Routes.Search}>
|
|
<img src={iconSearch} alt="search-icon" title="Search" />
|
|
</Link>
|
|
<Link to={Routes.SettingsDashboard}>
|
|
<img src={iconGear} alt="gear-icon" title="Settings" />
|
|
</Link>
|
|
<img
|
|
className="alert-hover"
|
|
src={iconExit}
|
|
alt="exit-icon"
|
|
title="Logout"
|
|
onClick={handleLogout}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|