c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Even more styling

Browse Source
This commit is contained in:
Daniel Kluge
2022-10-16 00:05:44 +02:00
parent 6dd52770da
commit 37b723d3fb
5 changed files with 73 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Blog/Layout.tsx
View File

@ -1,4 +1,5 @@
import type { NextPage } from "next";
import { useEffect } from "react";
import Head from "next/head";
import Navigation from "./Navigation";
@ -9,6 +10,15 @@ interface ILayoutProps {
}
const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
useEffect(() => {
if (typeof window !== "undefined") {
const theme = window.localStorage.getItem("theme");
if(!theme || !document) return;
document.documentElement.setAttribute("data-theme", theme);
}
}, []);
return <>
<Head>
<title>{title ?? "c0ntroller.de"}</title>

24
components/Blog/Navigation.tsx
View File

@ -1,20 +1,38 @@
/* 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">
<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}>Projects</div>
<div className={styles.navLink}>About me</div>
<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>;
};