Even better nav

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 { TerminalWindow } from "phosphor-react";
+import { TerminalWindow, House, User } from "phosphor-react";
 import ThemeSwitch from "./ThemeSwitch";
 
 import styles from "../../styles/Blog/Navigation.module.scss";
@@ -16,10 +16,20 @@ const Navigation: NextPage<{}> = () => {
                 </picture>
             </a>
         </Link>
-        <div className={styles.navLink}><Link href={"/"}><a className="nostyle">Projects</a></Link></div>
-        <div className={styles.navLink}><Link href={"/me"}><a className="nostyle">About me</a></Link></div>
+        <div className={styles.navLink}>
+            <Link href={"/"}><a className="nostyle">
+            <span className={styles.linkText}>Projects</span>
+            <span className={styles.linkIcon}><House size={"2em"} /></span>
+            </a></Link>
+        </div>
+        <div className={styles.navLink}>
+            <Link href={"/me"}><a className="nostyle">
+                <span className={styles.linkText}>About me</span>
+                <span className={styles.linkIcon}><User size={"2em"} /></span>
+            </a></Link>
+        </div>
         <div className={styles.spacer}></div>
-        <div className={styles.navIcon}><Link href={"/terminal"}><a className="nostyle"><TerminalWindow size={"2em"} href={"/terminal"} /></a></Link></div>
+        <div className={styles.navIcon}><Link href={"/terminal"}><a className="nostyle"><TerminalWindow size={"2em"} /></a></Link></div>
         <ThemeSwitch />
     </nav>;
 };

styles/Blog/Blog.module.scss

@@ -3,6 +3,7 @@
     color: var(--blog_color);
     padding-bottom: 20px;
     min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
     header {
         position: sticky;
@@ -15,7 +16,6 @@
         border: 1px solid var(--blog_content-border);
         background: var(--blog_content-background);
         backdrop-filter: blur(var(--blog_content-blur));
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
   
     main {

styles/Blog/Navigation.module.scss

@@ -34,7 +34,7 @@
     .navLink {
         transition: text-decoration 0.3s ease-in-out;
         display: block;
-        margin: auto 5px;
+        margin-right: 10px;
         cursor: pointer;
 
         &:hover {
@@ -44,12 +44,27 @@
 
     .navIcon {
         margin-right: 15px;
-        cursor: pointer;
+        height: 1.8em;
         display: block;
-        height: 2em;
     }
 
-    @media screen and (min-width: 300px) {
+    .navLink .linkIcon {
+        cursor: pointer;
+        height: 1.8em;
+        display: block;
+    }
+
+    .navLink {
+        .linkText {
+            display: none;
+        }
+
+        .linkIcon {
+            display: block;
+        }
+    }
+
+    @media screen and (min-width: 450px) {
         .imgContainer {
             display: block;
         }
@@ -58,6 +73,18 @@
         }
     }
 
+    @media screen and (min-width: 350px) {
+        .navLink {
+            .linkText {
+                display: inline;
+            }
+
+            .linkIcon {
+                display: none;
+            }
+        }
+    }
+
     .spacer {
         flex-grow: 2;
     }