fix: semantic & target blank
This commit is contained in:
Théo
parent
7bdf176611
commit
24a626bbeb
1 changed files with 77 additions and 86 deletions
|
|
@ -80,32 +80,30 @@
|
|||
}}
|
||||
href={item.slug}
|
||||
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),
|
||||
'group hover:bg-primary-700': !isActive(item.slug)
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<svelte:component
|
||||
this={item.icon}
|
||||
class={cn({
|
||||
'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
|
||||
!isActive(item.slug)
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
class={cn('hidden lg:block', {
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen,
|
||||
'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
|
||||
!isActive(item.slug)
|
||||
})}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
<svelte:component
|
||||
this={item.icon}
|
||||
class={cn({
|
||||
'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
|
||||
!isActive(item.slug)
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
class={cn('hidden lg:block', {
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen,
|
||||
'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
|
||||
!isActive(item.slug)
|
||||
})}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
|
|
@ -118,22 +116,17 @@
|
|||
<ul class="flex flex-col gap-4">
|
||||
<li>
|
||||
<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" />
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Aide
|
||||
</span>
|
||||
</div>
|
||||
<Help class="stroke-highlight-secondary transition-colors duration-150" />
|
||||
<span
|
||||
class={cn('hidden text-highlight-secondary transition-colors duration-150 lg:block', {
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
})}
|
||||
>
|
||||
Aide
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -142,24 +135,22 @@
|
|||
isOpen = false;
|
||||
}}
|
||||
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
|
||||
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
|
||||
/>
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Mail
|
||||
</span>
|
||||
</div>
|
||||
<Mail
|
||||
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
|
||||
/>
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Mail
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -168,24 +159,24 @@
|
|||
isOpen = false;
|
||||
}}
|
||||
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
|
||||
class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
|
||||
/>
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Discord
|
||||
</span>
|
||||
</div>
|
||||
<Discord
|
||||
class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
|
||||
/>
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Discord
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -194,24 +185,24 @@
|
|||
isOpen = false;
|
||||
}}
|
||||
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
|
||||
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
|
||||
/>
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Git
|
||||
</span>
|
||||
</div>
|
||||
<Git
|
||||
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
|
||||
/>
|
||||
<span
|
||||
class={cn(
|
||||
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
|
||||
{
|
||||
'block sm:hidden': isOpen,
|
||||
hidden: !isOpen
|
||||
}
|
||||
)}
|
||||
>
|
||||
Git
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue