Moved breadcrum navigation into its own component

3 files changed, 65 insertions, 103 deletions

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