LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added /explore and /search to navbar

Browse Source
This commit is contained in:
Mawoka
2022-04-14 15:31:58 +02:00
parent afefa1928f
commit b726e021b5
1 changed files with 83 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/navbar.svelte
+82 -65
View File
@@ -16,128 +16,145 @@
</script> </script>
<nav <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"> <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" <a href='/' class='font-black tracking-tight text-xl text-black marck-script link-hover'
>ClassQuiz</a >ClassQuiz</a
> >
<button <button
class="lg:hidden" class='lg:hidden'
id="open-menu" id='open-menu'
on:click={toggleMenu} on:click={toggleMenu}
class:hidden={!openMenu} class:hidden={!openMenu}
aria-label="Open navbar" aria-label='Open navbar'
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
width="24" width='24'
height="24" height='24'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
display="block" display='block'
id="TextAlignJustified" id='TextAlignJustified'
> >
<path d="M3 6h18M3 12h18M3 18h18" /> <path d='M3 6h18M3 12h18M3 18h18' />
</svg> </svg>
</button> </button>
<!-- Close menu --> <!-- Close menu -->
<button <button
class="hidden" class='hidden'
id="close-menu" id='close-menu'
class:hidden={!closeMenu} class:hidden={!closeMenu}
on:click={toggleMenu} on:click={toggleMenu}
aria-label="Close navbar" aria-label='Close navbar'
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
width="14" width='14'
height="14" height='14'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
stroke="currentColor" stroke='currentColor'
stroke-width="3" stroke-width='3'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
display="block" display='block'
id="Cross" id='Cross'
> >
<path d="M20 20L4 4m16 0L4 20" /> <path d='M20 20L4 4m16 0L4 20' />
</svg> </svg>
</button> </button>
</section> </section>
<ul <ul
id="menu-items" id='menu-items'
class="lg:flex w-full flex-col lg:flex-row lg:pl-6" class='lg:flex w-full flex-col lg:flex-row lg:pl-6'
class:hidden={!menuItems} class:hidden={!menuItems}
> >
{#if $signedIn} {#if $signedIn}
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/play">{$t('words.play')}</a href='/play'>{$t('words.play')}</a
> >
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/overview">{$t('words.overview')}</a href='/overview'>{$t('words.overview')}</a
> >
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" 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 href='/explore'>Explore</a
> >
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" 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 href='/search'>Search</a
> >
<!--TODO: Add translation -->
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/docs">{$t('words.docs')}</a href='/api/v1/users/logout'>{$t('words.logout')}</a
> >
</li> </li>
{:else} {:else}
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/play">{$t('words.play')}</a href='/play'>{$t('words.play')}</a
> >
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/account/register">{$t('words.register')}</a href='/account/register'>{$t('words.register')}</a
> >
</li> </li>
<li class="py-2">
<li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/account/login">{$t('words.login')}</a href='/account/login'>{$t('words.login')}</a
> >
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" 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 href='/explore'>Explore</a
> >
</li> </li>
<li class="py-2"> <li class='py-2'>
<a <a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover" class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
href="/docs">{$t('words.docs')}</a 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> </li>
{/if} {/if}