Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: semantic & target blank

Browse source
This commit is contained in:
Théo 2023-09-24 21:57:30 +02:00
parent 7bdf176611
commit 24a626bbeb
1 changed files with 77 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

163
src/lib/components/Sidenav.svelte
View file

@ -80,32 +80,30 @@
}} }}
href={item.slug} href={item.slug}
class={cn( class={cn(
'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start', 'flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
{ {
'bg-primary-700': isActive(item.slug), 'bg-primary-700': isActive(item.slug),
'group hover:bg-primary-700': !isActive(item.slug) 'group hover:bg-primary-700': !isActive(item.slug)
} }
)} )}
> >
<div class="flex items-center gap-2"> <svelte:component
<svelte:component this={item.icon}
this={item.icon} class={cn({
class={cn({ 'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0': !isActive(item.slug)
!isActive(item.slug) })}
})} />
/> <span
<span class={cn('hidden lg:block', {
class={cn('hidden lg:block', { 'block sm:hidden': isOpen,
'block sm:hidden': isOpen, hidden: !isOpen,
hidden: !isOpen, 'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
'text-highlight-secondary transition-colors duration-150 group-hover:text-primary': !isActive(item.slug)
!isActive(item.slug) })}
})} >
> {item.name}
{item.name} </span>
</span>
</div>
</a> </a>
</li> </li>
{/each} {/each}
@ -118,22 +116,17 @@
<ul class="flex flex-col gap-4"> <ul class="flex flex-col gap-4">
<li> <li>
<span <span
class="group pointer-events-none flex justify-center rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start" class="group pointer-events-none flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start"
> >
<div class="flex items-center gap-2"> <Help class="stroke-highlight-secondary transition-colors duration-150" />
<Help class="stroke-highlight-secondary transition-colors duration-150" /> <span
<span class={cn('hidden text-highlight-secondary transition-colors duration-150 lg:block', {
class={cn( 'block sm:hidden': isOpen,
'hidden text-highlight-secondary transition-colors duration-150 lg:block', hidden: !isOpen
{ })}
'block sm:hidden': isOpen, >
hidden: !isOpen Aide
} </span>
)}
>
Aide
</span>
</div>
</span> </span>
</li> </li>
<li> <li>
@ -142,24 +135,22 @@
isOpen = false; isOpen = false;
}} }}
href="mailto:cyberbottle@peerat.dev" href="mailto:cyberbottle@peerat.dev"
class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start" class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<div class="flex items-center gap-2"> <Mail
<Mail class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0" />
/> <span
<span class={cn(
class={cn( 'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', {
{ 'block sm:hidden': isOpen,
'block sm:hidden': isOpen, hidden: !isOpen
hidden: !isOpen }
} )}
)} >
> Mail
Mail </span>
</span>
</div>
</a> </a>
</li> </li>
<li> <li>
@ -168,24 +159,24 @@
isOpen = false; isOpen = false;
}} }}
href="//discord.gg/72vuHcwUkE" href="//discord.gg/72vuHcwUkE"
class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start" target="_blank"
rel="noopener"
class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<div class="flex items-center gap-2"> <Discord
<Discord class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0" />
/> <span
<span class={cn(
class={cn( 'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', {
{ 'block sm:hidden': isOpen,
'block sm:hidden': isOpen, hidden: !isOpen
hidden: !isOpen }
} )}
)} >
> Discord
Discord </span>
</span>
</div>
</a> </a>
</li> </li>
<li> <li>
@ -194,24 +185,24 @@
isOpen = false; isOpen = false;
}} }}
href="//git.peerat.dev" href="//git.peerat.dev"
class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start" target="_blank"
rel="noopener"
class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<div class="flex items-center gap-2"> <Git
<Git class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0" />
/> <span
<span class={cn(
class={cn( 'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', {
{ 'block sm:hidden': isOpen,
'block sm:hidden': isOpen, hidden: !isOpen
hidden: !isOpen }
} )}
)} >
> Git
Git </span>
</span>
</div>
</a> </a>
</li> </li>
</ul> </ul>