From 7daac080f52ab4133a3899ad8de89aab055fd3a7 Mon Sep 17 00:00:00 2001
From: Sam <sam@nilptr.dev>
Date: Tue, 10 May 2022 22:24:20 +0200
Subject: [PATCH] feat: improve navigation slightly

---
 frontend/src/lib/NavItem.tsx    |  22 ++++++
 frontend/src/lib/Navigation.tsx | 114 ++++++++++++++++----------------
 2 files changed, 79 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/lib/NavItem.tsx

diff --git a/frontend/src/lib/NavItem.tsx b/frontend/src/lib/NavItem.tsx
new file mode 100644
index 0000000..38e3db7
--- /dev/null
+++ b/frontend/src/lib/NavItem.tsx
@@ -0,0 +1,22 @@
+import { ReactNode, PropsWithChildren } from "react";
+import { Link } from "react-router-dom";
+
+export interface Props {
+    children?: ReactNode | undefined;
+    to: string;
+    plain?: boolean | undefined; // Do not wrap in <li></li>
+}
+
+export default function NavItem(props: Props) {
+    const ret = <Link
+        className="hover:text-sky-500 dark:hover:text-sky-400"
+        to={props.to}
+    >
+        {props.children}
+    </Link>
+
+    if (props.plain) {
+        return ret
+    }
+    return <li>{ret}</li>;
+}
diff --git a/frontend/src/lib/Navigation.tsx b/frontend/src/lib/Navigation.tsx
index d4a4314..889e3ec 100644
--- a/frontend/src/lib/Navigation.tsx
+++ b/frontend/src/lib/Navigation.tsx
@@ -1,13 +1,15 @@
-import Logo from "./logo";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { MoonStars, Sun, List } from "react-bootstrap-icons";
 
+import NavItem from "./NavItem";
+import Logo from "./logo";
+
 function Navigation() {
   const [darkTheme, setDarkTheme] = useState<boolean>(
     localStorage.theme === "dark" ||
-      (!("theme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    (!("theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
   );
 
   const [showMenu, setShowMenu] = useState(false);
@@ -18,73 +20,71 @@ function Navigation() {
     document.documentElement.classList.remove("dark");
   }
 
-  const storeTheme = (system: boolean) => {
-    if (system) {
+  const storeTheme = (useDarkTheme: boolean | null) => {
+    if (useDarkTheme === null) {
       localStorage.removeItem("theme");
     } else {
-      localStorage.setItem("theme", darkTheme ? "dark" : "light");
+      localStorage.setItem("theme", useDarkTheme ? "dark" : "light");
     }
   };
 
   return (
-    <div className="bg-white/75 dark:bg-slate-800/75 w-full backdrop-blur border-b-slate-200 dark:border-b-slate-900">
-      <div className="max-w-8xl mx-auto">
-        <div className="py-4 mx-4">
-          <div className="flex items-center">
-            <Link to="/">
-              <Logo />
-            </Link>
-            <div className="ml-auto flex items-center">
-              <nav className="hidden lg:flex">
-                <ul className="flex space-x-8 font-bold">
-                  <li>
-                    <Link
-                      className="hover:text-sky-500 dark:hover:text-sky-400"
-                      to="/login"
-                    >
-                      Log in
-                    </Link>
-                  </li>
-                </ul>
-              </nav>
-              <div className="flex border-l border-slate-200 ml-4 pl-4 lg:ml-6 lg:pl-6 lg:mr-2 dark:border-slate-500 space-x-2 lg:space-x-4">
-                <div
-                  onClick={() => {
-                    storeTheme(false);
-                    setDarkTheme(!darkTheme);
-                  }}
-                  title={
-                    darkTheme ? "Switch to light mode" : "Switch to dark mode"
-                  }
-                  className="cursor-pointer"
-                >
-                  {darkTheme ? (
-                    <Sun className="hover:text-sky-400" size={24} />
-                  ) : (
-                    <MoonStars size={24} className="hover:text-sky-500" />
-                  )}
-                </div>
-                <div onClick={() => setShowMenu(!showMenu)} title="Show menu" className="cursor-pointer flex lg:hidden">
+    <>
+      <div className="bg-white/75 dark:bg-slate-800/75 w-full backdrop-blur border-slate-200 dark:border-slate-700 border-b">
+        <div className="max-w-8xl mx-auto">
+          <div className="py-4 mx-4">
+            <div className="flex items-center">
+              <Link to="/">
+                <Logo />
+              </Link>
+              <div className="ml-auto flex items-center">
+                <nav className="hidden lg:flex">
+                  <ul className="flex space-x-4 font-bold">
+                    <NavItem to="/">Home</NavItem>
+                    <NavItem to="/">Link 2</NavItem>
+                    <NavItem to="/">Link 3</NavItem>
+                    <NavItem to="/">Link 4</NavItem>
+                    <NavItem to="/">Link 5</NavItem>
+                    <NavItem to="/login">Log in</NavItem>
+                  </ul>
+                </nav>
+                <div className="flex border-l border-slate-200 ml-4 pl-4 lg:ml-6 lg:pl-6 lg:mr-2 dark:border-slate-700 space-x-2 lg:space-x-4">
+                  <div
+                    onClick={() => {
+                      setDarkTheme(!darkTheme);
+                      storeTheme(!darkTheme);
+                    }}
+                    title={
+                      darkTheme ? "Switch to light mode" : "Switch to dark mode"
+                    }
+                    className="cursor-pointer"
+                  >
+                    {darkTheme ? (
+                      <Sun className="hover:text-sky-400" size={24} />
+                    ) : (
+                      <MoonStars size={24} className="hover:text-sky-500" />
+                    )}
+                  </div>
+                  <div onClick={() => setShowMenu(!showMenu)} title="Show menu" className="cursor-pointer flex lg:hidden">
                     <List className="dark:hover:text-sky-400 hover:text-sky-500" size={24} />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <nav className={`lg:hidden my-2 p-4 border-slate-200 dark:border-slate-500 border-t border-b ${showMenu ? "flex" : "hidden"}`}>
-          <ul className="flex space-x-8 font-bold">
-            <li>
-              <Link
-                className="hover:text-sky-500 dark:hover:text-sky-400"
-                to="/login"
-              >
-                Log in
-              </Link>
-            </li>
-          </ul>
-        </nav>
       </div>
-    </div>
+      <nav className={`lg:hidden p-4 border-slate-200 dark:border-slate-700 border-b ${showMenu ? "flex" : "hidden"}`}>
+        <ul className="flex flex-col space-y-4 font-bold">
+          <NavItem to="/">Home</NavItem>
+          <NavItem to="/">Link 2</NavItem>
+          <NavItem to="/">Link 3</NavItem>
+          <NavItem to="/">Link 4</NavItem>
+          <NavItem to="/">Link 5</NavItem>
+          <NavItem to="/login">Log in</NavItem>
+        </ul>
+      </nav>
+    </>
   );
 }