ThemeSwitch and Terminal Icon (close #15)

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>;
 };

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) {

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;

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 {