qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-03-12 16:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Design improvements.

Browse Source
This commit is contained in:
pheralb 2023-12-16 17:44:30 +00:00
parent e61f58d751
commit d7bc686349
2 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/navbar.svelte
View File

@ -17,13 +17,19 @@
}
];
const links = [
const externalLinks = [
{
name: 'API',
url: '/api',
icon: CloudyIcon,
external: false
},
{
name: 'Terminal',
url: 'https://github.com/sujjeee/svgls',
icon: ArrowUpRight,
external: true
},
{
name: 'Submit logo',
url: 'https://github.com/pheralb/svgl#-getting-started',
@ -53,18 +59,23 @@
</div>
<div class="flex items-center space-x-7">
<div class="flex items-center space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700">
{#each links as link}
{#each externalLinks as link}
<a
href={link.url}
target={link.external ? '_blank' : '_self'}
class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3"
target={link.external ? '_blank' : ''}
class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group"
>
{#if !link.external}
<svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
{/if}
<span>{link.name}</span>
{#if link.external}
<svelte:component this={link.icon} size={16} strokeWidth={1.5} class="ml-1" />
<svelte:component
this={link.icon}
size={16}
strokeWidth={1.5}
class="ml-1 transition-transform duration-300 group-hover:-translate-y-[1px]"
/>
{/if}
</a>
{/each}

20
src/routes/+layout.svelte
View File

@ -54,28 +54,30 @@
{#each categories.sort() as category}
<a
href={`/directory/${category.toLowerCase()}`}
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
${
class={cn(
'flex w-full items-center justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40',
data.pathname === `/directory/${category.toLowerCase()}`
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
: ''
}`}
data-sveltekit-preload-data>{category}</a
)}
>
<span>{category}</span>
</a>
{/each}
</div>
<div>
</div>
<div></div>
<a
href="https://twitter.com/pheralb_"
target="_blank"
class="mt-5 md:flex hidden items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
class="group mt-5 md:flex hidden items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
>
<Heart color="#991b1b" size={18} weight={'duotone'} />
<div class="flex items-center space-x-1">
<p class="text-muted text-sm">Created by pheralb</p>
<ArrowUpRight size={14} />
<ArrowUpRight
size={14}
class="transition-transform duration-300 group-hover:-translate-y-[1px]"
/>
</div>
</a>
</div>