Feat: Add mobile menu

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>

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";
@@ -11,8 +11,10 @@
   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,17 +135,82 @@
         <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">
+      <a class="cursor-pointer hidden md:inline" href="/profil">{username}</a>
-        <span class="invisible w-0 md:w-fit md:visible">{username}</span>
-      </a>
     {:else}
-      <a class="cursor-pointer" href="/connexion">Connexion</a>
+      <a class="cursor-pointer hidden md:block" href="/connexion">Connexion</a>
-      <a class="cursor-pointer" href="#">Inscription</a>
+      <a class="cursor-pointer hidden md:block" href="/inscription">Inscription</a>
     {/if}
-    <details class="dropdown inline md:hidden">
+
-      <summary role="button">
+    <label class="relative z-40 cursor-pointer block md:hidden" for="mobile-menu">
-        <a class="cursor-pointer"><MenuIcon /></a>
+      <input class="peer hidden" bind:checked={openMobileMenu} type="checkbox" id="mobile-menu" />
-      </summary>
+      <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>
+            <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>
+          <li>
+            <Accordion title="BSet">
               <ul>
                 {#each brawlsets.slice(0,5) as brawlset}
                   <li>
@@ -159,7 +226,20 @@
                 {/each}
                 <li><a href="/bset/all">Plus de BSets...</a></li>
               </ul>
-    </details>
+            </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>
 

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>

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 />

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}
-  return {slug: params.slug, test: "yeeeeheeee"}
 };