eb2-website/src/lib/Navigation.svelte

90 řádky
2.8 KiB
Svelte

<script>
/**
* @type {boolean}
*/
export let open;
import logo from '$lib/assets/logo_black.svg';
import { page, session } from '$app/stores';
</script>
<nav class="flex flex-wrap items-center justify-between px-4 bg-white mx-auto sticky top-0 z-50">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<a
class="text-sm leading-relaxed inline-block mr-4 p-4 whitespace-nowrap uppercase underline"
href="/"
>
<img src={logo} alt="logo" class="w-[145px] h-[54px] p-2 -ml-3" />
</a>
<button
class="text-black cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
on:click={() => open = !open}
>
</button>
</div>
<div class="{open ? 'lg:flex flex-grow items-center flex' : 'lg:flex flex-grow items-center hidden'}" id="navbar">
<ul
class="flex flex-col lg:flex-row lg:flex-grow-0 lg:mt-0 list-none lg:ml-auto text-base flex-grow my-8 lg:my-0"
>
<li>
<a
href="/"
class="p-5 flex items-center uppercase font-bold leading-snug text-black hover:opacity-75 hover:underline" class:active={$page.url.pathname === '/'}
>Home</a
>
</li>
<li>
<a
href="/manual"
class="p-5 flex items-center uppercase font-bold leading-snug text-black hover:opacity-75 hover:underline hidden"
>Hacker Manual</a
>
</li>
<li>
<a
href="/schedule"
class="p-5 flex items-center uppercase font-bold leading-snug text-black hover:opacity-75 hover:underline hidden"
>Schedule</a
>
</li>
<li>
<a
href="/venues"
class="p-5 flex items-center uppercase font-bold leading-snug text-black hover:opacity-75 hover:underline"
class:active={$page.url.pathname === '/venues'}
>Venues</a
>
</li>
<li>
<a
href="/contributors"
class="p-5 flex items-center uppercase font-bold leading-snug text-black hover:opacity-75 hover:underline"
class:active={$page.url.pathname === '/contributors' || $page.url.pathname === '/team'}
>Contributors</a
>
</li>
<li>
<a
href="https://matrix.to/#/#ethbrno:gwei.cz"
rel="noopener noreferrer"
class="p-5 flex items-center uppercase font-bold leading-snug text-black hover:opacity-75 hover:underline"
>Chat</a
>
</li>
<li>
<a
href="https://join.ethbrno.cz"
rel="noopener noreferrer"
target="_blank"
class="p-5 flex items-center bg-black text-white uppercase font-bold leading-snug hover:opacity-75 hover:underline"
>Join</a
>
</li>
</ul>
</div>
</div>
</nav>