40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import type { NextPage } from "next";
|
|
import Link from "next/link";
|
|
import { Terminal, Sun, Moon } from "phosphor-react";
|
|
|
|
import styles from "../../styles/Blog/Navigation.module.scss";
|
|
|
|
const Navigation: NextPage<{}> = () => {
|
|
const switchTheme = () => {
|
|
if (typeof document === "undefined") return;
|
|
|
|
const current = document.documentElement.getAttribute("data-theme") || "dark";
|
|
const setTo = current === "dark" ? "light" : "dark";
|
|
document.documentElement.setAttribute("data-theme", setTo);
|
|
|
|
if (typeof window !== "undefined") window.localStorage.setItem("theme", setTo);
|
|
};
|
|
|
|
return <nav className={styles.navigation}>
|
|
<Link href={"/"}>
|
|
<a className={`nostyle ${styles.imgContainer}`}>
|
|
<picture>
|
|
<source srcSet="/icon.png" type="image/png" />
|
|
<img src="/icon.png" alt={"Website icon, a red eye"} className={styles.logo} />
|
|
</picture>
|
|
</a>
|
|
</Link>
|
|
<div className={styles.navLink}><Link href={"/"}><a className="nostyle">Projects</a></Link></div>
|
|
<div className={styles.navLink}><Link href={"/"}><a className="nostyle">About me</a></Link></div>
|
|
<div className={styles.spacer}></div>
|
|
<Terminal size={"1.5em"} />
|
|
<div className={styles.themeSwitch}>
|
|
<Sun className={styles.lightTheme} size={"1.5em"} onClick={switchTheme} />
|
|
<Moon className={styles.darkTheme} size={"1.5em"} onClick={switchTheme} />
|
|
</div>
|
|
</nav>;
|
|
};
|
|
|
|
export default Navigation;
|