🎨 Update navbar & sidebar styles + create global sidebar items

src/components/navbar.svelte

@@ -9,15 +9,6 @@
   import XIcon from './xIcon.svelte';
   import GithubIcon from './githubIcon.svelte';
 
-  // Se le pusieron aria-labels a los links
-  const socials = [
-    {
-      name: 'GitHub',
-      url: 'https://github.com/pheralb/svgl',
-      icon: GithubIcon
-    }
-  ];
-
   const externalLinks = [
     {
       name: 'API',
@@ -58,7 +49,7 @@
         <div class="flex items-center space-x-2 opacity-80 hover:opacity-100 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
-          <p class="text-neutral-400 hidden md:block font-mono">v4.1</p>
+          <p class="text-neutral-400 hidden md:block font-mono">v4.2</p>
         </div>
       </a>
     </div>

src/routes/+layout.svelte

@@ -22,6 +22,7 @@
   // Layout:
   import Navbar from '@/components/navbar.svelte';
   import { cn } from '@/utils/cn';
+  import { sidebarItemStyles } from '@/ui/styles';
 </script>
 
 <ModeWatcher />
@@ -42,11 +43,12 @@
       >
         <a
           href="/"
-          class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 ${
-            data.pathname === `/`
+          class={cn(
+            sidebarItemStyles,
+            data.pathname === '/'
               ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
               : ''
-          }`}
+          )}
           data-sveltekit-preload-data>All</a
         >
         <!-- Order alfabetically: -->
@@ -54,7 +56,7 @@
           <a
             href={`/directory/${category.toLowerCase()}`}
             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',
+              sidebarItemStyles,
               data.pathname === `/directory/${category.toLowerCase()}`
                 ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
                 : ''

src/ui/styles.ts

@@ -6,3 +6,6 @@ export const inputStyles =
 
 export const badgeStyles =
   'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline hover:bg-neutral-200 dark:hover:bg-neutral-700/50 transition-colors duration-100';
+
+export const sidebarItemStyles =
+  'flex w-full items-center space-x-3 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';