From ccd08bc0f03cb59b351c19d78ac0f937a5270368 Mon Sep 17 00:00:00 2001
From: Wolfboy248 <georgejvindkarlsen@gmail.com>
Date: Mon, 25 Aug 2025 11:13:20 +0200
Subject: Moved breadcrum navigation into its own component

---
 .../BreadcrumbNav/BreadcrumbNav.module.css         |  36 +++++
 .../src/components/BreadcrumbNav/BreadcrumbNav.tsx |  72 ++++++++++
 frontend/src/pages/Maplist/Maplist.tsx             |  14 +-
 frontend/src/pages/Maps/Maps.tsx                   | 150 ++++++++-------------
 frontend/src/pages/Rules/Rules.tsx                 |   4 +-
 5 files changed, 173 insertions(+), 103 deletions(-)
 create mode 100644 frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
 create mode 100644 frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx

diff --git a/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
new file mode 100644
index 0000000..9821972
--- /dev/null
+++ b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.module.css
@@ -0,0 +1,36 @@
+.container {
+    display: flex;
+    margin-top: 42px;
+    margin-bottom: 16px;
+    margin-left: 48px;
+    gap: 2px;
+}
+
+.crumb {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background-color: var(--color-block);
+    padding: 6px 16px;
+    transition: all 0.1s ease;
+    font-size: 22px;
+}
+
+.crumb:hover {
+    background-color: var(--color-panel);
+}
+
+.crumb.first {
+    border-top-left-radius: 1000px;
+    border-bottom-left-radius: 1000px;
+}
+
+.crumb.middle {
+    border-radius: 0px;
+}
+
+.crumb.last,
+.crumb.first.last {
+    border-top-right-radius: 1000px;
+    border-bottom-right-radius: 1000px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx
new file mode 100644
index 0000000..7c4af15
--- /dev/null
+++ b/frontend/src/components/BreadcrumbNav/BreadcrumbNav.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+import styles from "./BreadcrumbNav.module.css";
+
+export interface Breadcrumb {
+    to: string;
+    label: string;
+};
+
+interface BreadcrumbNavProps {
+    chapter?: Breadcrumb;
+};
+
+const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({ chapter }) => {
+    const [breadcrumbs, setBreadcrumbs] = React.useState<Breadcrumb[]>([]);
+
+    const path = useLocation();
+
+    React.useEffect(() => {
+        let _paths = path.pathname.split("/").filter(Boolean);
+        console.log(_paths);
+        let _breadcrumbs: Breadcrumb[] = [];
+
+        if (_paths.length >= 2) {
+            _breadcrumbs.push({
+                to: "/games",
+                label: "Games List"
+            })
+
+            // To test 3 crumbs
+            // _breadcrumbs.push({
+            //     to: "/games",
+            //     label: "Test"
+            // })
+
+            if (_paths[0] == "maps") {
+                if (chapter) {
+                    _breadcrumbs.push({
+                        to: chapter.to,
+                        label: chapter.label
+                    });
+                }
+            }
+        }
+
+        setBreadcrumbs(_breadcrumbs);
+    }, [path])
+
+    return (
+        <nav className={styles.container}>
+            {breadcrumbs.map((crumb, i) => {
+                let _styles = ``;
+
+                if (i == 0) {
+                    _styles += `${styles.first} `;
+                }
+
+                if (i + 1 == breadcrumbs.length) {
+                    _styles += `${styles.last}`;
+                }
+
+                return <Link className={`${styles.crumb} ${_styles}`} key={i} to={crumb.to}>
+                    <i className="triangle"></i>
+                    <span className="translate-y-[-2px]">{crumb.label}</span>
+                </Link>
+            })}
+        </nav>
+    )
+}
+
+export default BreadcrumbNav;
diff --git a/frontend/src/pages/Maplist/Maplist.tsx b/frontend/src/pages/Maplist/Maplist.tsx
index a5649db..d8acdf0 100644
--- a/frontend/src/pages/Maplist/Maplist.tsx
+++ b/frontend/src/pages/Maplist/Maplist.tsx
@@ -7,6 +7,7 @@ import { Game } from "@customTypes/Game.ts";
 import { GameChapter, GamesChapters } from "@customTypes/Chapters.ts";
 
 import Map from "./Components/Map";
+import BreadcrumbNav from "@components/BreadcrumbNav/BreadcrumbNav";
 
 const Maplist: React.FC = () => {
   const [game, setGame] = React.useState<Game | null>(null);
@@ -89,24 +90,17 @@ const Maplist: React.FC = () => {
   }, [gameChapters, location.search]);
 
   return (
-    <div className="px-12">
+    <div className="">
       <Helmet>
         <title>LPHUB | Maplist</title>
       </Helmet>
 
-      <section className="my-5">
-        <Link to="/games">
-          <button className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-barlow-semicondensed-regular transition-colors duration-100 hover:bg-surface2 flex items-center px-2">
-            <i className="triangle mr-2"></i>
-            <span className="px-2">Games List</span>
-          </button>
-        </Link>
-      </section>
+      <BreadcrumbNav />
 
       {load ? (
         <div></div>
       ) : (
-        <section>
+        <section className="px-12">
           <h1 className="text-3xl sm:text-6xl my-0">
             {game?.name}
           </h1>
diff --git a/frontend/src/pages/Maps/Maps.tsx b/frontend/src/pages/Maps/Maps.tsx
index 75e3635..03de289 100644
--- a/frontend/src/pages/Maps/Maps.tsx
+++ b/frontend/src/pages/Maps/Maps.tsx
@@ -9,6 +9,7 @@ import Discussions from "@components/Discussions.tsx";
 import ModMenu from "@components/ModMenu.tsx";
 import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map.ts";
 import { API } from "@api/Api.ts";
+import BreadcrumbNav from "@components/BreadcrumbNav/BreadcrumbNav.tsx";
 
 interface MapProps {
   token?: string;
@@ -64,37 +65,28 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
     // loading placeholder
     return (
       <>
-        <main className="*:text-foreground relative left-0 w-[calc(100%-20rem)] min-h-screen p-4 sm:p-8">
-          <section id="section1" className="summary1">
-            <div>
-              <Link to="/games">
-                <button
-                  className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
-                >
-                  <i className="triangle"></i>
-                  <span className="px-2">Games List</span>
-                </button>
-              </Link>
-            </div>
-          </section>
-
-          <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-            <button className="nav-button">
-              <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-              <span>Summary</span>
-            </button>
-            <button className="nav-button">
-              <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-              <span>Leaderboards</span>
-            </button>
-            <button className="nav-button">
-              <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-              <span>Discussions</span>
-            </button>
-          </section>
+        <div className="">
+          <BreadcrumbNav />
+
+          <div className="px-12">
+            <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
+              <button className="nav-button">
+                <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+                <span>Summary</span>
+              </button>
+              <button className="nav-button">
+                <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+                <span>Leaderboards</span>
+              </button>
+              <button className="nav-button">
+                <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+                <span>Discussions</span>
+              </button>
+            </section>
 
-          <section id="section6" className="summary2 mt-4" />
-        </main>
+            <section id="section6" className="summary2 mt-4" />
+          </div>
+        </div>
       </>
     );
   }
@@ -117,67 +109,43 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
       <div id="background-image">
         <img src={mapSummaryData.map.image} alt="" />
       </div>
-      <main className="relative left-0 w-full sm:ml-80 sm:w-[calc(100%-20rem)] min-h-screen max-h-screen overflow-y-auto p-4 sm:p-8 scrollbar-thin scrollbar-track-surface scrollbar-thumb-muted hover:scrollbar-thumb-surface1">
-        <section id="section1" className="summary1">
-          <div>
-            <Link to="/games">
-              <button
-                className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
-              >
-                <i className="triangle"></i>
-                <span className="px-2">Games List</span>
-              </button>
-            </Link>
-            <Link
-              to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}
-            >
-              <button
-                className="nav-button ml-2"
-              >
-                <i className="triangle"></i>
-                <span className="px-2">{mapSummaryData.map.chapter_name}</span>
-              </button>
-            </Link>
-            <br />
-            <span className="block mt-2 text-lg sm:text-xl text-foreground">
-              <b>{mapSummaryData.map.map_name}</b>
-            </span>
-          </div>
-        </section>
-
-        <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-          <button className="nav-button" onClick={() => setNavState(0)}>
-            <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-            <span>Summary</span>
-          </button>
-          <button className="nav-button" onClick={() => setNavState(1)}>
-            <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-            <span>Leaderboards</span>
-          </button>
-          <button className="nav-button" onClick={() => setNavState(2)}>
-            <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-            <span>Discussions</span>
-          </button>
-        </section>
-
-        {navState === 0 && (
-          <Summary
-            selectedRun={selectedRun}
-            setSelectedRun={setSelectedRun}
-            data={mapSummaryData}
-          />
-        )}
-        {navState === 1 && <Leaderboards mapID={mapID} />}
-        {navState === 2 && (
-          <Discussions
-            data={mapDiscussionsData}
-            token={token}
-            isModerator={isModerator}
-            mapID={mapID}
-            onRefresh={() => _fetch_map_discussions()}
-          />
-        )}
-      </main>
+      <div className="">
+        <BreadcrumbNav chapter={{ label: mapSummaryData.map.chapter_name, to: `/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}` }} />
+        <div className="px-12">
+          <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
+            <button className="nav-button" onClick={() => setNavState(0)}>
+              <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Summary</span>
+            </button>
+            <button className="nav-button" onClick={() => setNavState(1)}>
+              <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Leaderboards</span>
+            </button>
+            <button className="nav-button" onClick={() => setNavState(2)}>
+              <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Discussions</span>
+            </button>
+          </section>
+
+          {navState === 0 && (
+            <Summary
+              selectedRun={selectedRun}
+              setSelectedRun={setSelectedRun}
+              data={mapSummaryData}
+            />
+          )}
+          {navState === 1 && <Leaderboards mapID={mapID} />}
+          {navState === 2 && (
+            <Discussions
+              data={mapDiscussionsData}
+              token={token}
+              isModerator={isModerator}
+              mapID={mapID}
+              onRefresh={() => _fetch_map_discussions()}
+            />
+          )}
+        </div>
+      </div>
     </>
   );
 };
diff --git a/frontend/src/pages/Rules/Rules.tsx b/frontend/src/pages/Rules/Rules.tsx
index 9c7885c..20d301c 100644
--- a/frontend/src/pages/Rules/Rules.tsx
+++ b/frontend/src/pages/Rules/Rules.tsx
@@ -25,12 +25,12 @@ const Rules: React.FC = () => {
   }, []);
 
   return (
-    <main className="ml-16 p-8 text-foreground font-[--font-barlow-semicondensed-regular] prose prose-invert max-w-none">
+    <div className="pl-8 pt-2">
       <Helmet>
         <title>LPHUB | Rules</title>
       </Helmet>
       <ReactMarkdown>{rulesText}</ReactMarkdown>
-    </main>
+    </div>
   );
 };
 
-- 
cgit v1.2.3