From 4a19c64dee68604f742227a88c746dcc1c9ca88e Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Mon, 4 Nov 2024 10:27:09 -0800
Subject: fix build: use Link to navigate to /

---
 src/components/TitleBar/TitleBar.tsx | 375 +++++++++++++++++------------------
 1 file changed, 178 insertions(+), 197 deletions(-)

diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
index d5c7103..04ead84 100644
--- a/src/components/TitleBar/TitleBar.tsx
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -2,224 +2,205 @@
 import type React from "react";
 import "../TitleBar/TitleBarStyle.css";
 import {
-    faHouse,
-    faBars,
-    faTimes,
-    faChevronDown,
-    faChevronUp,
-    faSpinner,
+  faHouse,
+  faBars,
+  faTimes,
+  faChevronDown,
+  faChevronUp,
+  faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState, useEffect } from "react";
 import Link from "next/link";
 
 interface TitleBarProps {
-    title: string;
-    redirectUrl?: string;
-    showHomeButton?: boolean;
-    backgroundColor?: string;
+  title: string;
+  redirectUrl?: string;
+  showHomeButton?: boolean;
+  backgroundColor?: string;
 }
 
 const TitleBar: React.FC<TitleBarProps> = ({
-    title,
-    redirectUrl,
-    showHomeButton,
-    backgroundColor,
+  title,
+  redirectUrl,
+  showHomeButton,
+  backgroundColor,
 }) => {
-    const hideFromSidebar = ["Fuura Yuri"]; // List of names to hide (e.g., due to graduation)
-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-    const [isMounted, setIsMounted] = useState(false);
-    const [groupingData, setPhaseData] = useState<{
-        [key: string]: string[];
-    } | null>(null);
-    const [collapsedSections, setCollapsedSections] = useState<{
-        [key: string]: boolean;
-    }>({});
-    const [loadingMember, setLoadingMember] = useState<string | null>(null);
+  const hideFromSidebar = ["Fuura Yuri"]; // List of names to hide (e.g., due to graduation)
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [groupingData, setPhaseData] = useState<{
+    [key: string]: string[];
+  } | null>(null);
+  const [collapsedSections, setCollapsedSections] = useState<{
+    [key: string]: boolean;
+  }>({});
+  const [loadingMember, setLoadingMember] = useState<string | null>(null);
 
-    useEffect(() => {
-        setIsMounted(true);
-        const fetchPhaseData = async () => {
-            const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
-            try {
-                const response = await fetch(apiUrl + "/api/groups");
-                const data = await response.json();
-                setPhaseData(data);
-                const initialCollapsedState = Object.keys(data).reduce(
-                    (acc, phase) => {
-                        acc[phase] = true;
-                        return acc;
-                    },
-                    {} as { [key: string]: boolean },
-                );
-                setCollapsedSections(initialCollapsedState);
-            } catch (error) {
-                console.error("Error fetching phase data:", error);
-            }
-        };
+  useEffect(() => {
+    setIsMounted(true);
+    const fetchPhaseData = async () => {
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL_TESTING;
+      try {
+        const response = await fetch(apiUrl + "/api/groups");
+        const data = await response.json();
+        setPhaseData(data);
+        const initialCollapsedState = Object.keys(data).reduce(
+          (acc, phase) => {
+            acc[phase] = true;
+            return acc;
+          },
+          {} as { [key: string]: boolean },
+        );
+        setCollapsedSections(initialCollapsedState);
+      } catch (error) {
+        console.error("Error fetching phase data:", error);
+      }
+    };
 
-        fetchPhaseData();
-    }, []);
+    fetchPhaseData();
+  }, []);
 
-    const toggleSidebar = () => {
-        setIsSidebarOpen(!isSidebarOpen);
-    };
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
 
-    const toggleSection = (phase: string) => {
-        setCollapsedSections((prevState) => ({
-            ...prevState,
-            [phase]: !prevState[phase],
-        }));
-    };
+  const toggleSection = (phase: string) => {
+    setCollapsedSections((prevState) => ({
+      ...prevState,
+      [phase]: !prevState[phase],
+    }));
+  };
 
-    const handleMemberClick = (member: string) => {
-        setLoadingMember(member);
-    };
+  const handleMemberClick = (member: string) => {
+    setLoadingMember(member);
+  };
 
-    if (!isMounted) {
-        return null;
-    }
+  if (!isMounted) {
+    return null;
+  }
 
-    return (
-        <>
-            <div
-                className="title-bar p-5 shadow-md"
-                style={{ backgroundColor: backgroundColor || "#2D4B71" }}
+  return (
+    <>
+      <div
+        className="title-bar p-5 shadow-md"
+        style={{ backgroundColor: backgroundColor || "#2D4B71" }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <button
+            onClick={toggleSidebar}
+            className="text-white text-3xl mr-4 focus:outline-none"
+          >
+            <FontAwesomeIcon icon={isSidebarOpen ? faTimes : faBars} />
+          </button>
+          <a href={redirectUrl}>
+            <span
+              className="text-white text-4xl font-bold"
+              style={{ fontFamily: "Quantico, sans-serif" }}
             >
-                <div
-                    style={{
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                    }}
-                >
-                    <button
-                        onClick={toggleSidebar}
-                        className="text-white text-3xl mr-4 focus:outline-none"
-                    >
-                        <FontAwesomeIcon
-                            icon={isSidebarOpen ? faTimes : faBars}
-                        />
-                    </button>
-                    <a href={redirectUrl}>
-                        <span
-                            className="text-white text-4xl font-bold"
-                            style={{ fontFamily: "Quantico, sans-serif" }}
-                        >
-                            {title}
-                        </span>
-                    </a>
-                    {showHomeButton && (
-                        <a href="/" className="ml-2 text-white text-3xl">
-                            <FontAwesomeIcon icon={faHouse} />
-                        </a>
-                    )}
-                </div>
-            </div>
+              {title}
+            </span>
+          </a>
+          {showHomeButton && (
+            <Link href="/" className="ml-2 text-white text-3xl">
+              <FontAwesomeIcon icon={faHouse} />
+            </Link>
+          )}
+        </div>
+      </div>
 
-            {/* Sidebar */}
-            <div
-                className={`fixed top-0 left-0 h-screen bg-black text-white shadow-lg transition-transform transform ${
-                    isSidebarOpen ? "translate-x-0" : "-translate-x-full"
-                } duration-500 ease-in-out z-50`}
-                style={{
-                    width: "16rem",
-                    fontFamily: "Quantico, sans-serif",
-                    overflowY: "auto",
-                }}
-            >
-                <div className="p-4 text-3xl font-bold border-b border-gray-700">
-                    PhaseTracker
-                </div>
-                <ul className="text-xl border-b border-gray-700">
-                    <Link href="/">
-                        <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
-                            Home
-                        </li>
-                    </Link>
-                    <Link href="/about">
-                        <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
-                            About
-                        </li>
-                    </Link>
-                    <Link href="https://github.com/pinapelz/Phase-Tracker-Data">
-                        <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
-                            Data
-                        </li>
-                    </Link>
-                </ul>
+      {/* Sidebar */}
+      <div
+        className={`fixed top-0 left-0 h-screen bg-black text-white shadow-lg transition-transform transform ${
+          isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+        } duration-500 ease-in-out z-50`}
+        style={{
+          width: "16rem",
+          fontFamily: "Quantico, sans-serif",
+          overflowY: "auto",
+        }}
+      >
+        <div className="p-4 text-3xl font-bold border-b border-gray-700">
+          PhaseTracker
+        </div>
+        <ul className="text-xl border-b border-gray-700">
+          <Link href="/">
+            <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
+              Home
+            </li>
+          </Link>
+          <Link href="/about">
+            <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
+              About
+            </li>
+          </Link>
+          <Link href="https://github.com/pinapelz/Phase-Tracker-Data">
+            <li className="p-4 hover:bg-gray-700 transition-colors duration-300">
+              Data
+            </li>
+          </Link>
+        </ul>
 
-                <ul className="mt-4 text-xl">
-                    {groupingData ? (
-                        Object.entries(groupingData).map(([group, members]) => (
-                            <li key={group} className="p-4">
-                                <div
-                                    className="flex justify-between items-center cursor-pointer select-none"
-                                    onClick={() => toggleSection(group)}
-                                >
-                                    <span className="font-bold text-lg">
-                                        {group}
-                                    </span>
-                                    <FontAwesomeIcon
-                                        icon={
-                                            collapsedSections[group]
-                                                ? faChevronDown
-                                                : faChevronUp
-                                        }
-                                    />
-                                </div>
-                                {!collapsedSections[group] && (
-                                    <ul className="ml-4 mt-2">
-                                        {members
-                                            .filter(
-                                                (member) =>
-                                                    !hideFromSidebar.includes(
-                                                        member,
-                                                    ),
-                                            )
-                                            .map((member) => (
-                                                <a
-                                                    href={`/stats/${member}`}
-                                                    key={member}
-                                                >
-                                                    <li
-                                                        className="p-1 hover:bg-gray-700 transition-colors duration-300 flex items-center"
-                                                        onClick={() =>
-                                                            handleMemberClick(
-                                                                member,
-                                                            )
-                                                        }
-                                                    >
-                                                        {member}
-                                                        {loadingMember ===
-                                                            member && (
-                                                            <FontAwesomeIcon
-                                                                icon={faSpinner}
-                                                                spin
-                                                                className="ml-2"
-                                                            />
-                                                        )}
-                                                    </li>
-                                                </a>
-                                            ))}
-                                    </ul>
-                                )}
-                            </li>
-                        ))
-                    ) : (
-                        <li className="p-4">Loading...</li>
-                    )}
-                </ul>
-            </div>
-            {isSidebarOpen && (
+        <ul className="mt-4 text-xl">
+          {groupingData ? (
+            Object.entries(groupingData).map(([group, members]) => (
+              <li key={group} className="p-4">
                 <div
-                    className="fixed top-0 left-0 w-full h-full bg-black opacity-50 transition-opacity duration-500"
-                    style={{ zIndex: 40 }}
-                    onClick={toggleSidebar}
-                ></div>
-            )}
-        </>
-    );
+                  className="flex justify-between items-center cursor-pointer select-none"
+                  onClick={() => toggleSection(group)}
+                >
+                  <span className="font-bold text-lg">{group}</span>
+                  <FontAwesomeIcon
+                    icon={
+                      collapsedSections[group] ? faChevronDown : faChevronUp
+                    }
+                  />
+                </div>
+                {!collapsedSections[group] && (
+                  <ul className="ml-4 mt-2">
+                    {members
+                      .filter((member) => !hideFromSidebar.includes(member))
+                      .map((member) => (
+                        <a href={`/stats/${member}`} key={member}>
+                          <li
+                            className="p-1 hover:bg-gray-700 transition-colors duration-300 flex items-center"
+                            onClick={() => handleMemberClick(member)}
+                          >
+                            {member}
+                            {loadingMember === member && (
+                              <FontAwesomeIcon
+                                icon={faSpinner}
+                                spin
+                                className="ml-2"
+                              />
+                            )}
+                          </li>
+                        </a>
+                      ))}
+                  </ul>
+                )}
+              </li>
+            ))
+          ) : (
+            <li className="p-4">Loading...</li>
+          )}
+        </ul>
+      </div>
+      {isSidebarOpen && (
+        <div
+          className="fixed top-0 left-0 w-full h-full bg-black opacity-50 transition-opacity duration-500"
+          style={{ zIndex: 40 }}
+          onClick={toggleSidebar}
+        ></div>
+      )}
+    </>
+  );
 };
 
 export default TitleBar;
-- 
cgit v1.2.3