✨ Design improvements.

src/components/navbar.svelte

@@ -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'}
+            target={link.external ? '_blank' : ''}
-            class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3"
+            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}

src/routes/+layout.svelte

@@ -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>