From faeb193531f6254e8416b7a74409796579a756c8 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sun, 17 Dec 2023 00:20:11 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Design=20improvements.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navbar.svelte | 14 +++++++++++---
 src/routes/+layout.svelte    |  2 +-
 src/routes/+page.svelte      |  2 +-
 src/routes/api/+page.svelte  |  2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index 3fbe88d..39348ef 100644
--- a/src/components/navbar.svelte
+++ b/src/components/navbar.svelte
@@ -1,4 +1,6 @@
-<script>
+<script lang="ts">
+  export let currentPath: string;
+
   import { cn } from '@/utils/cn';
   import Logo from './logo.svelte';
   import { ArrowUpRight, CloudyIcon, GithubIcon, TwitterIcon } from 'lucide-svelte';
@@ -37,6 +39,8 @@
       external: true
     }
   ];
+
+  console.log(currentPath);
 </script>
 
 <nav
@@ -53,7 +57,7 @@
         <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
-          <p class="text-neutral-500 hidden md:block">v4.0.0</p>
+          <p class="text-neutral-500 hidden md:block font-mono">v4</p>
         </div>
       </a>
     </div>
@@ -63,7 +67,11 @@
           <a
             href={link.url}
             target={link.external ? '_blank' : ''}
-            class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group"
+            class={cn(
+              'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group',
+              currentPath === link.url &&
+                'underline underline-offset-8 decoration-dotted decoration-neutral-500'
+            )}
           >
             {#if !link.external}
               <svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5e9e5dd..3b775e4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -26,7 +26,7 @@
   import { cn } from '@/utils/cn';
 </script>
 
-<Navbar />
+<Navbar currentPath={data.pathname} />
 <main>
   <aside
     class={cn(
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a99b890..d119593 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -84,7 +84,7 @@
   <div class="flex items-center justify-end mb-4">
     <button
       class={cn(
-        'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium',
+        'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium hover:opacity-80 transition-opacity',
         filteredSvgs.length === 0 && 'hidden'
       )}
       on:click={() => sort()}
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 6e1d005..5d26386 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -25,7 +25,7 @@
           class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
         />
         <div
-          class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-sm font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800"
+          class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono"
         >
           beta
         </div>