✨ Added /explore and /search to navbar
This commit is contained in:
Mawoka
@@ -16,128 +16,145 @@
|
||||
</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"
|
||||
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'
|
||||
>
|
||||
<section class="w-full lg:w-max flex justify-between">
|
||||
<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
|
||||
>ClassQuiz</a
|
||||
<section class='w-full lg:w-max flex justify-between'>
|
||||
<a href='/' class='font-black tracking-tight text-xl text-black marck-script link-hover'
|
||||
>ClassQuiz</a
|
||||
>
|
||||
|
||||
<button
|
||||
class="lg:hidden"
|
||||
id="open-menu"
|
||||
class='lg:hidden'
|
||||
id='open-menu'
|
||||
on:click={toggleMenu}
|
||||
class:hidden={!openMenu}
|
||||
aria-label="Open navbar"
|
||||
aria-label='Open navbar'
|
||||
>
|
||||
<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"
|
||||
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" />
|
||||
<path d='M3 6h18M3 12h18M3 18h18' />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Close menu -->
|
||||
<button
|
||||
class="hidden"
|
||||
id="close-menu"
|
||||
class='hidden'
|
||||
id='close-menu'
|
||||
class:hidden={!closeMenu}
|
||||
on:click={toggleMenu}
|
||||
aria-label="Close navbar"
|
||||
aria-label='Close navbar'
|
||||
>
|
||||
<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"
|
||||
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" />
|
||||
<path d='M20 20L4 4m16 0L4 20' />
|
||||
</svg>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<ul
|
||||
id="menu-items"
|
||||
class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
|
||||
id='menu-items'
|
||||
class='lg:flex w-full flex-col lg:flex-row lg:pl-6'
|
||||
class:hidden={!menuItems}
|
||||
>
|
||||
{#if $signedIn}
|
||||
<li class="py-2">
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/play">{$t('words.play')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/play'>{$t('words.play')}</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/overview">{$t('words.overview')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/overview'>{$t('words.overview')}</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<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
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/explore'>Explore</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/api/v1/users/logout">{$t('words.logout')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/search'>Search</a
|
||||
>
|
||||
<!--TODO: Add translation -->
|
||||
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/docs">{$t('words.docs')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/api/v1/users/logout'>{$t('words.logout')}</a
|
||||
>
|
||||
</li>
|
||||
{:else}
|
||||
<li class="py-2">
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/play">{$t('words.play')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/play'>{$t('words.play')}</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<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">{$t('words.register')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/account/register'>{$t('words.register')}</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
|
||||
<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">{$t('words.login')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/account/login'>{$t('words.login')}</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<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
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/explore'>Explore</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/docs">{$t('words.docs')}</a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/search'>Search</a
|
||||
>
|
||||
<!--TODO: Add translation -->
|
||||
|
||||
</li>
|
||||
<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>
|
||||
<li class='py-2'>
|
||||
<a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/docs'>{$t('words.docs')}</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user