Mawoka
97 lines
2.3 KiB
Svelte
97 lines
2.3 KiB
Svelte
<script>
|
|
import '@fontsource/marck-script/index.css';
|
|
|
|
let openMenu = true;
|
|
let closeMenu = false;
|
|
let menuItems = false;
|
|
const toggleMenu = () => {
|
|
openMenu = !openMenu;
|
|
closeMenu = !closeMenu;
|
|
menuItems = !menuItems;
|
|
};
|
|
</script>
|
|
|
|
<nav
|
|
class='w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0'
|
|
>
|
|
<!-- Our logo and button -->
|
|
<section class='w-full lg:w-max flex justify-between'>
|
|
<!-- Logo -->
|
|
<a href='/' class='font-black tracking-tight text-xl text-black marck-script link-hover'
|
|
>ClassQuiz</a
|
|
>
|
|
|
|
<!-- Our open/close buttons -->
|
|
<!-- Open menu -->
|
|
<button class='lg:hidden' id='open-menu' on:click={toggleMenu} class:hidden={!openMenu}>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
width='24'
|
|
height='24'
|
|
viewBox='0 0 24 24'
|
|
fill='none'
|
|
stroke='currentColor'
|
|
stroke-width='2'
|
|
stroke-linecap='round'
|
|
stroke-linejoin='round'
|
|
display='block'
|
|
id='TextAlignJustified'
|
|
>
|
|
<path d='M3 6h18M3 12h18M3 18h18' />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Close menu -->
|
|
<button class='hidden' id='close-menu' class:hidden={!closeMenu} on:click={toggleMenu}>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
width='14'
|
|
height='14'
|
|
viewBox='0 0 24 24'
|
|
fill='none'
|
|
stroke='currentColor'
|
|
stroke-width='3'
|
|
stroke-linecap='round'
|
|
stroke-linejoin='round'
|
|
display='block'
|
|
id='Cross'
|
|
>
|
|
<path d='M20 20L4 4m16 0L4 20' />
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
|
|
<!-- Our list of items -->
|
|
<ul
|
|
id='menu-items'
|
|
class='lg:flex w-full flex-col lg:flex-row lg:pl-6'
|
|
class:hidden={!menuItems}
|
|
>
|
|
<li class='py-2'>
|
|
<a
|
|
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
|
href='/play'>Play</a
|
|
>
|
|
</li>
|
|
<li class='py-2'>
|
|
<a
|
|
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
|
href='/account/register'>Register</a
|
|
>
|
|
</li>
|
|
<li class='py-2'>
|
|
<a
|
|
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
|
href='/account/login'>Login</a
|
|
>
|
|
<li class='py-2'>
|
|
<a
|
|
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
|
href='https://github.com/mawoka-myblock/classquiz'>GitHub</a
|
|
>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|