zuma/brawlset
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity
brawlset/frontend/src/lib/components/Navbar.svelte
zuma cf17e52424 Fix: Change Navbar Z-Index
2025-04-24 15:56:39 +02:00

305 lines
18 KiB
Svelte
Raw Blame History

<script>
import { onMount } from "svelte";
import Blue from "./icons/Blue.svelte";
import White from "./icons/White.svelte";
import Black from "./icons/Black.svelte";
import Colorless from "./icons/Colorless.svelte";
import Red from "./icons/Red.svelte";
import Green from "./icons/Green.svelte";
import IconBase from "./icons/IconBase.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 openMobileMenu = $state(false)
let username = $state("")
let brawlsets = $state([])
let isLoggedIn = $state(false)
onMount( async () => {
const storageData = window.localStorage.getItem("pocketbase_auth")
if (storageData != null) {
const jsonData = JSON.parse(storageData)
username = jsonData.record.name
isLoggedIn = true
}
fetch("/json/misc/brawlsets")
.then( response => response.json() )
.then( data => { brawlsets = data; console.log(data) } )
});
</script>
<div class="fixed top-0 bg-white font-inter-tight flex flex-row justify-between w-screen p-4 h-16 z-30">
<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>
</a>
<div class="hidden flex-row gap-4 items-center md:flex">
<details class="dropdown w-0 md:w-fit">
<summary role="button">
<a class="cursor-pointer text-stone-500">Commandants</a>
</summary>
<ul>
<li><a href="/top/commander/all">Top commandants</a></li>
<li>
<div>Mono</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/white"><White/><span>Blanc</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/blue"><Blue/><span>Bleu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/black"><Black/><span>Noir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/red"><Red/><span>Rouge</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/green"><Green/><span>Vert</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/colorless"><Colorless/><span>Incolor</span></a></li>
</ul>
</li>
<li>
<div>2 couleurs</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/azorius"><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="/top/commander/dimir"><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="/top/commander/rakdos"><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="/top/commander/gruul"><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="/top/commander/selesnya"><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="/top/commander/orzhov"><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="/top/commander/izzet"><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="/top/commander/golgari"><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="/top/commander/boros"><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="/top/commander/simic"><div class="flex flex-row gap-0"><Green/><Blue/></div><span>Simic</span></a></li>
</ul>
</li>
<li>
<div>3 couleurs</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/esper"><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="/top/commander/grixis"><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="/top/commander/jund"><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="/top/commander/naya"><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="/top/commander/bant"><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="/top/commander/abzan"><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="/top/commander/jeskai"><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="/top/commander/sultai"><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="/top/commander/mardu"><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="/top/commander/temur"><div class="flex flex-row gap-0"><Green/><Blue/><Red/></div><span>Temur</span></a></li>
</ul>
</li>
<li>
<div>4+ couleurs</div>
<ul>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/yore-tiller"><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="/top/commander/glint-eye"><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="/top/commander/dune-brood"><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="/top/commander/ink-treader"><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="/top/commander/witch-maw"><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="/top/commander/five-colors"><div class="flex flex-row gap-0"><White/><Blue/><Black/><Red/><Green/></div><span>5 couleurs</span></a></li>
</ul>
</li>
</ul>
</details>
<details class="dropdown">
<summary role="button">
<a class="cursor-pointer text-stone-500">BSets</a>
</summary>
<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>
</details>
<a class="cursor-pointer text-stone-500" href="/regles">Règles</a>
<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 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>
{#if isLoggedIn}
<a class="cursor-pointer flex flex-row items-center" href="/decks">
<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">{username}</a>
{:else}
<a class="cursor-pointer hidden md:block" href="/connexion">Connexion</a>
<a class="cursor-pointer hidden md:block" href="/inscription">Inscription</a>
{/if}
<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 class="fixed inset-0 z-40 hidden h-full w-full peer-checked:block">
&nbsp;
</div>
<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 gap-4">
<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="/top/commander/white"><White/><span>Blanc</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/blue"><Blue/><span>Bleu</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/black"><Black/><span>Noir</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/red"><Red/><span>Rouge</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/green"><Green/><span>Vert</span></a></li>
<li><a class="flex flex-row items-center gap-2" href="/top/commander/colorless"><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="/top/commander/azorius"><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="/top/commander/dimir"><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="/top/commander/rakdos"><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="/top/commander/gruul"><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="/top/commander/selesnya"><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="/top/commander/orzhov"><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="/top/commander/izzet"><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="/top/commander/golgari"><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="/top/commander/boros"><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="/top/commander/simic"><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="/top/commander/esper"><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="/top/commander/grixis"><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="/top/commander/jund"><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="/top/commander/naya"><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="/top/commander/bant"><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="/top/commander/abzan"><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="/top/commander/jeskai"><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="/top/commander/sultai"><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="/top/commander/mardu"><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="/top/commander/temur"><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="/top/commander/yore-tiller"><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="/top/commander/glint-eye"><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="/top/commander/dune-brood"><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="/top/commander/ink-treader"><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="/top/commander/witch-maw"><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="/top/commander/five-colors"><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>
<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="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>
<style>
/* Close the dropdown with outside clicks */
.dropdown > summary::before {
display: none;
}
.dropdown[open] > summary::before {
content: ' ';
display: block;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
}
.dropdown summary {
list-style: none;
list-style-type: none;
}
.dropdown ul {
white-space: nowrap;
position: absolute;
margin-top: 5px;
padding: 5px;
box-sizing: border-box;
z-index: 2;
background-color: white;
border-radius: 5px;
border: 1px solid #D3D3D3;
box-shadow: 0px 4px 5px #D3D3D3;
list-style: none;
}
.dropdown li {
padding: 5px;
border-radius: 5px;
cursor: pointer;
position: relative;
}
.dropdown ul ul {
display: none;
left: 100%;
position: absolute;
top: 0;
}
.dropdown li:hover {
background-color: hsl(240 4.8% 95.9%);
}
.dropdown li:hover > ul {
display: block;
}
</style>
Reference in a new issue View git blame Copy permalink