globuzma/brawlset
1
0
Fork 0
Code Issues Pull requests Projects 2 Releases Packages 1 Wiki Activity

Feat: Add mobile menu

Browse source
This commit is contained in:
zuma 2025-04-12 19:28:25 +02:00
parent 37771e852a
commit 93f437b086
5 changed files with 132 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/lib/components/Accordion.svelte Normal file
View file

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

106
frontend/src/lib/components/Navbar.svelte
View file

@ -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">
<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>
<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>
<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>

3
frontend/src/lib/components/icons/ChevronRight.svelte Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 231 B

2
frontend/src/routes/+layout.svelte
View file

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

3
frontend/src/routes/bset/[slug]/+page.ts
View file

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