From 93f437b0869e7cc12d5c883db66f06049cc487b3 Mon Sep 17 00:00:00 2001
From: zuma <lucien@shenanigans.cc>
Date: Sat, 12 Apr 2025 19:28:25 +0200
Subject: [PATCH] Feat: Add mobile menu

---
 frontend/src/lib/components/Accordion.svelte  |  18 +++
 frontend/src/lib/components/Navbar.svelte     | 138 ++++++++++++++----
 .../lib/components/icons/ChevronRight.svelte  |   3 +
 frontend/src/routes/+layout.svelte            |   2 +-
 frontend/src/routes/bset/[slug]/+page.ts      |   3 +-
 5 files changed, 132 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/lib/components/Accordion.svelte
 create mode 100644 frontend/src/lib/components/icons/ChevronRight.svelte

diff --git a/frontend/src/lib/components/Accordion.svelte b/frontend/src/lib/components/Accordion.svelte
new file mode 100644
index 0000000..a001bf0
--- /dev/null
+++ b/frontend/src/lib/components/Accordion.svelte
@@ -0,0 +1,18 @@
+<script>
+    import ChevronRight from "./icons/ChevronRight.svelte";
+
+  let { children, title = "" } = $props()
+</script>
+
+
+<details class="group">
+    <summary class="flex items-center justify-center marker:content-none hover:cursor-pointer">
+      <div class="flex flex-row items-center justify-between">
+        <span>{title}</span>
+        <ChevronRight class="size-4 transition group-open:rotate-90"/>
+      </div> 
+    </summary>
+    <article class="mt-2 mb-2">
+      {@render children()}
+    </article>
+</details>
diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index 1001bae..fe91d41 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext, onMount } from "svelte";
+  import { onMount } from "svelte";
   import Blue from "./icons/Blue.svelte";
   import White from "./icons/White.svelte";
   import Black from "./icons/Black.svelte";
@@ -8,11 +8,13 @@
   import Green from "./icons/Green.svelte";
   import IconBase from "./icons/IconBase.svelte";
   import CardSearch from "./CardSearch.svelte";
-    import SearchIcon from "./icons/SearchIcon.svelte";
-    import DeckIcon from "./icons/DeckIcon.svelte";
-    import MenuIcon from "./icons/MenuIcon.svelte";
+  import SearchIcon from "./icons/SearchIcon.svelte";
+  import DeckIcon from "./icons/DeckIcon.svelte";
+  import MenuIcon from "./icons/MenuIcon.svelte";
+  import Accordion from "./Accordion.svelte";
 
   let dialog
+  let openMobileMenu = $state(false)
 
   let username = $state("")
 
@@ -34,7 +36,7 @@
   
 </script>
 
-<div class="font-inter-tight flex flex-row justify-between w-screen p-4 h-16">
+<div class="fixed top-0 bg-white font-inter-tight flex flex-row justify-between w-screen p-4 h-16">
   <a class="flex flex-row gap-2 items-center" href="/">
     <img alt="brawlset website logo" src="/assets/logo.png" class="h-8" />
     <span class="font-beleren text-3xl mt-2 bg-gradient-to-r from-black to-orange-500 bg-clip-text text-transparent">BrawlSet</span>
@@ -124,7 +126,7 @@
     <a class="cursor-pointer text-stone-500" href="/faq">F.A.Q</a>
   </div>
   <div class="flex flex-row gap-4 items-center text-stone-500">
-    <button class="flex flex-row items-center" onclick={() => dialog.showModal()}>
+    <button class="flex flex-row items-center cursor-pointer" onclick={() => dialog.showModal()}>
       <SearchIcon class="visible w-fit  md:invisible md:w-0" />
       <span class="invisible w-0 md:w-fit md:visible">Rechercher</span>
     </button>
@@ -133,33 +135,111 @@
         <DeckIcon  class="visible w-fit  md:invisible md:w-0" />
         <span class="invisible w-0 md:w-fit md:visible">Decks</span>
       </a>
-      <a class="cursor-pointer hidden md:inline" href="/profil">
-        <span class="invisible w-0 md:w-fit md:visible">{username}</span>
-      </a>
+      <a class="cursor-pointer hidden md:inline" href="/profil">{username}</a>
     {:else}
-      <a class="cursor-pointer" href="/connexion">Connexion</a>
-      <a class="cursor-pointer" href="#">Inscription</a>
+      <a class="cursor-pointer hidden md:block" href="/connexion">Connexion</a>
+      <a class="cursor-pointer hidden md:block" href="/inscription">Inscription</a>
     {/if}
-    <details class="dropdown inline md:hidden">
-      <summary role="button">
-        <a class="cursor-pointer"><MenuIcon /></a>
-      </summary>
-      <ul>
-        {#each brawlsets.slice(0,5) as brawlset}
+
+    <label class="relative z-40 cursor-pointer block md:hidden" for="mobile-menu">
+      <input class="peer hidden" bind:checked={openMobileMenu} type="checkbox" id="mobile-menu" />
+      <MenuIcon />
+      <div onclick={(e) => {if(e.target.nodeName == "A") {openMobileMenu = false}}} class="fixed top-16 left-0 z-40 h-fit w-screen hidden peer-checked:block bg-white p-4 shadow-md">
+        <ul class="w-full flex flex-col items-center">
           <li>
-            <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
-              <div class="flex flex-row gap-1">
-                {#each brawlset.IconsSvgUri as icon}
-                  <IconBase src={icon} alt="brawlset icon"/>
-                {/each}
-              </div>
-              {brawlset.Name}
-            </a>
+            <Accordion title="Commandants">
+              <ul class="w-full">
+                <li><a href="top/commander/all">Top commandants</a></li>
+                <li>
+                  <Accordion title="Mono">
+                    <ul>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><White/><span>Blanc</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><Blue/><span>Bleu</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><Black/><span>Noir</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><Red/><span>Rouge</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><Green/><span>Vert</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><Colorless/><span>Incolor</span></a></li>
+                    </ul>
+                  </Accordion>
+                </li>
+                <li>
+                  <Accordion title="2 couleurs">
+                    <ul>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/></div><span>Azorius</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/></div><span>Dimir</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/></div><span>Rakdos</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/></div><span>Gruul</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/></div><span>Selesnya</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Black/></div><span>Orzhov</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Red/></div><span>Izzet</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Green/></div><span>Golgari</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><White/></div><span>Boros</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
+                    </ul>
+                  </Accordion>
+                </li>
+                <li>
+                  <Accordion title="3 couleurs">
+                    <ul>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/></div><span>Esper</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/><Red/></div><span>Grixis</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/><Green/></div><span>Jund</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/><White/></div><span>Naya</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/><Blue/></div><span>Bant</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Black/><Green/></div><span>Abzan</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Red/><White/></div><span>Jeskai</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Green/><Blue/></div><span>Sultai</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><White/><Black/></div><span>Mardu</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
+                    </ul>
+                  </Accordion>
+                </li>
+                <li>
+                  <Accordion title="4+ couleurs">
+                    <ul>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/></div><span>Yore-Tiller</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Blue/><Black/><Red/><Green/></div><span>Glint-Eye</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Black/><Red/><Green/><White/></div><span>Dune-Brood</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Red/><Green/><White/><Blue/></div><span>Ink-Treader</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><Green/><White/><Blue/><Black/></div><span>Witch-Maw</span></a></li>
+                      <li><a class="flex flex-row items-center gap-2" href="#"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
+                    </ul>
+                  </Accordion>
+                </li>
+              </ul>
+            </Accordion>
           </li>
-        {/each}
-        <li><a href="/bset/all">Plus de BSets...</a></li>
-      </ul>
-    </details>
+          <li>
+            <Accordion title="BSet">
+              <ul>
+                {#each brawlsets.slice(0,5) as brawlset}
+                  <li>
+                    <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
+                      <div class="flex flex-row gap-1">
+                        {#each brawlset.IconsSvgUri as icon}
+                          <IconBase src={icon} alt="brawlset icon"/>
+                        {/each}
+                      </div>
+                      {brawlset.Name}
+                    </a>
+                  </li>
+                {/each}
+                <li><a href="/bset/all">Plus de BSets...</a></li>
+              </ul>
+            </Accordion>
+          </li>
+          <li><a href="/regles">Règles</a></li>
+          <li><a href="/faq">F.A.Q</a></li>
+          <li><div class="mt-4 mb-4 max-w-screen w-64 block h-[1px] bg-stone-500 content-[' ']"></div></li>
+          {#if isLoggedIn}
+            <li><a href="/profil">{username}</a></li>
+          {:else}
+            <li><a href="/connexion">Connexion</a></li>
+            <li><a href="/inscription">Inscription</a></li>
+          {/if}
+        </ul>
+      </div>
+    </label>
   </div>
 </div>
 
diff --git a/frontend/src/lib/components/icons/ChevronRight.svelte b/frontend/src/lib/components/icons/ChevronRight.svelte
new file mode 100644
index 0000000..35d807d
--- /dev/null
+++ b/frontend/src/lib/components/icons/ChevronRight.svelte
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...$$props}>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6" />
+</svg>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 8be6a08..1b26158 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
 
 <div class="w-screen min-h-screen flex flex-col gap-0">
 <Navbar />
-<div class="mt-8 font-inter-tight grow">
+<div class="mt-16 font-inter-tight grow">
   {@render children()}
 </div>
 <Footer />
diff --git a/frontend/src/routes/bset/[slug]/+page.ts b/frontend/src/routes/bset/[slug]/+page.ts
index fa75e60..793b550 100644
--- a/frontend/src/routes/bset/[slug]/+page.ts
+++ b/frontend/src/routes/bset/[slug]/+page.ts
@@ -1,6 +1,5 @@
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = ({ params }) => {
-  console.log("test")
-  return {slug: params.slug, test: "yeeeeheeee"}
+  return {slug: params.slug}
 };