From 305cae119deccb0d2f097d2f332f2ba85c31923f Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Sun, 16 Oct 2022 19:56:31 +0200
Subject: [PATCH] ThemeSwitch and Terminal Icon (close #15)

---
 components/Blog/Navigation.tsx      | 6 +++---
 components/Blog/ThemeSwitch.tsx     | 8 ++++----
 styles/Blog/Navigation.module.scss  | 7 +++++++
 styles/Blog/ThemeSwitch.module.scss | 8 ++++++++
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/Blog/Navigation.tsx b/components/Blog/Navigation.tsx
index a12bd3d..b7e3bc1 100644
--- a/components/Blog/Navigation.tsx
+++ b/components/Blog/Navigation.tsx
@@ -1,7 +1,7 @@
 /* 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 { TerminalWindow } from "phosphor-react";
 import ThemeSwitch from "./ThemeSwitch";
 
 import styles from "../../styles/Blog/Navigation.module.scss";
@@ -17,9 +17,9 @@ const Navigation: NextPage<{}> = () => {
             </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.navLink}><Link href={"/me"}><a className="nostyle">About me</a></Link></div>
         <div className={styles.spacer}></div>
-        <Terminal size={"1.5em"} />
+        <div className={styles.navIcon}><Link href={"/terminal"}><a className="nostyle"><TerminalWindow size={"2em"} href={"/terminal"} /></a></Link></div>
         <ThemeSwitch />
     </nav>;
 };
diff --git a/components/Blog/ThemeSwitch.tsx b/components/Blog/ThemeSwitch.tsx
index c7e5c28..46c868b 100644
--- a/components/Blog/ThemeSwitch.tsx
+++ b/components/Blog/ThemeSwitch.tsx
@@ -20,9 +20,9 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
         setMounted(true);
     }, []);
 
-    const switchTheme = (theme: string) => {
-
-        if (theme === "dark") setFadeProps({
+    const switchTheme = (newTheme: string) => {
+        console.log(newTheme);
+        if (newTheme === "dark") setFadeProps({
                 sun: styles.fadeIn,
                 moon: styles.fadeOut
             });
@@ -31,7 +31,7 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
             moon: styles.fadeIn
         });
 
-        setTheme(theme);
+        setTheme(newTheme);
     };
 
     if (!mounted) {
diff --git a/styles/Blog/Navigation.module.scss b/styles/Blog/Navigation.module.scss
index 6bfc232..c18c578 100644
--- a/styles/Blog/Navigation.module.scss
+++ b/styles/Blog/Navigation.module.scss
@@ -42,6 +42,13 @@
         }
     }
 
+    .navIcon {
+        margin-right: 15px;
+        cursor: pointer;
+        display: block;
+        height: 2em;
+    }
+
     @media screen and (min-width: 300px) {
         .imgContainer {
             display: block;
diff --git a/styles/Blog/ThemeSwitch.module.scss b/styles/Blog/ThemeSwitch.module.scss
index d322f80..9308c20 100644
--- a/styles/Blog/ThemeSwitch.module.scss
+++ b/styles/Blog/ThemeSwitch.module.scss
@@ -2,9 +2,17 @@
     position: relative;
     width: 1.5em;
     height: 1.5em;
+    cursor: pointer;
 
     & > * {
         position: absolute;
+        opacity: 0;
+        transform: translate(0, 100%);
+    }
+
+    & > .selected {
+        opacity: 1;
+        transform: translate(0, 0);
     }
 
     .fadeOut {