96 lines
2.6 KiB
TypeScript
Executable File
96 lines
2.6 KiB
TypeScript
Executable File
import NextImage from "next/image";
|
|
import NextLink from "next/link";
|
|
import BannerDark from "../images/banner-tube-archivist-dark.png";
|
|
import IconSearch from "../images/icon-search.svg";
|
|
import IconGear from "../images/icon-gear.svg";
|
|
import IconExit from "../images/icon-exit.svg";
|
|
import { signIn, signOut, useSession } from "next-auth/react";
|
|
|
|
/** TODO: Fix these nav links */
|
|
export const Nav = () => {
|
|
const { data: session } = useSession();
|
|
|
|
const handleSigninSignout = () => {
|
|
if (!session) {
|
|
signIn();
|
|
}
|
|
signOut();
|
|
};
|
|
|
|
return (
|
|
<div className="boxed-content">
|
|
<div className="top-banner">
|
|
<NextLink href="/">
|
|
<a>
|
|
{/* {% if colors == 'dark */}
|
|
<NextImage
|
|
width={700}
|
|
height={150}
|
|
src={BannerDark}
|
|
alt="tube-archivist-banner"
|
|
/>
|
|
{/* {% endif %} */}
|
|
{/* {% if colors == 'light */}
|
|
{/* <img src="/img/banner-tube-archivist-light.png" alt="tube-archivist-banner"> */}
|
|
{/* {% endif %} */}
|
|
</a>
|
|
</NextLink>
|
|
</div>
|
|
<div className="top-nav">
|
|
<div className="nav-items">
|
|
<NextLink href="/">
|
|
<a>
|
|
<div className="nav-item">home</div>
|
|
</a>
|
|
</NextLink>
|
|
<NextLink href="/channel">
|
|
<a>
|
|
<div className="nav-item">channels</div>
|
|
</a>
|
|
</NextLink>
|
|
<NextLink href="/playlist">
|
|
<a>
|
|
<div className="nav-item">playlists</div>
|
|
</a>
|
|
</NextLink>
|
|
<NextLink href="/download">
|
|
<a>
|
|
<div className="nav-item">downloads</div>
|
|
</a>
|
|
</NextLink>
|
|
</div>
|
|
<div className="nav-icons">
|
|
<a href="/search">
|
|
<NextImage
|
|
width={50}
|
|
height={40}
|
|
src={IconSearch}
|
|
alt="search-icon"
|
|
title="Search"
|
|
/>
|
|
</a>
|
|
<a href="/settings">
|
|
<NextImage
|
|
width={50}
|
|
height={40}
|
|
src={IconGear}
|
|
alt="gear-icon"
|
|
title="Settings"
|
|
/>
|
|
</a>
|
|
<a style={{ cursor: "pointer" }} onClick={handleSigninSignout}>
|
|
<NextImage
|
|
width={50}
|
|
height={40}
|
|
className="alert-hover"
|
|
src={IconExit}
|
|
alt="exit-icon"
|
|
title="Logout"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|