initial commit

resources/views/components/sidebar-link.blade.php

@@ -1,26 +1,43 @@
-@props(['active', 'icon'])
+@props([
+    'active' => false,
+    'icon' => null,
+    'tone' => 'indigo',
+])
 
 @php
-// Logika untuk menentukan class CSS jika link sedang aktif atau tidak
-$classes = ($active ?? false)
-            ? 'flex items-center px-4 py-2.5 text-sm font-bold text-indigo-700 bg-indigo-50 rounded-xl border border-indigo-100 transition-all'
-            : 'flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-xl transition-all';
+    $classes = ($active ?? false)
+        ? 'group flex items-center rounded-xl bg-slate-100 px-2.5 py-2 text-sm font-bold text-slate-900 transition-all'
+        : 'group flex items-center rounded-xl px-2.5 py-2 text-sm font-medium text-slate-600 transition-all hover:bg-slate-50 hover:text-slate-900';
 
-$iconClasses = ($active ?? false)
-            ? 'text-indigo-600'
-            : 'text-slate-400 group-hover:text-indigo-500';
+    $tones = [
+        'indigo' => ['idle' => 'bg-indigo-50 text-indigo-600', 'active' => 'bg-indigo-600 text-white', 'paw' => 'text-indigo-500'],
+        'blue' => ['idle' => 'bg-blue-50 text-blue-600', 'active' => 'bg-blue-600 text-white', 'paw' => 'text-blue-500'],
+        'sky' => ['idle' => 'bg-sky-50 text-sky-600', 'active' => 'bg-sky-600 text-white', 'paw' => 'text-sky-500'],
+        'rose' => ['idle' => 'bg-rose-50 text-rose-600', 'active' => 'bg-rose-600 text-white', 'paw' => 'text-rose-500'],
+        'emerald' => ['idle' => 'bg-emerald-50 text-emerald-600', 'active' => 'bg-emerald-600 text-white', 'paw' => 'text-emerald-500'],
+        'amber' => ['idle' => 'bg-amber-50 text-amber-600', 'active' => 'bg-amber-500 text-white', 'paw' => 'text-amber-500'],
+        'violet' => ['idle' => 'bg-violet-50 text-violet-600', 'active' => 'bg-violet-600 text-white', 'paw' => 'text-violet-500'],
+        'cyan' => ['idle' => 'bg-cyan-50 text-cyan-600', 'active' => 'bg-cyan-600 text-white', 'paw' => 'text-cyan-500'],
+        'slate' => ['idle' => 'bg-slate-100 text-slate-600', 'active' => 'bg-slate-700 text-white', 'paw' => 'text-slate-500'],
+    ];
+
+    $toneSet = $tones[$tone] ?? $tones['indigo'];
+    $iconClasses = ($active ?? false) ? $toneSet['active'] : $toneSet['idle'];
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
     @if($icon)
-        <i class="fas {{ $icon }} mr-3 w-5 text-center {{ $iconClasses }}"></i>
+        <span class="relative mr-3 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl {{ $iconClasses }} transition-transform group-hover:-rotate-3 group-hover:scale-105">
+            <i class="fas {{ $icon }} text-sm"></i>
+            <span class="absolute -bottom-1 -right-1 flex h-3.5 w-3.5 items-center justify-center rounded-full border-2 border-white bg-white shadow-sm {{ $toneSet['paw'] }}">
+                <i class="fas fa-paw text-[6px]"></i>
+            </span>
+        </span>
     @endif
-    
-    <span class="truncate">
-        {{ $slot }}
-    </span>
+
+    <span class="truncate">{{ $slot }}</span>
 
     @if($active ?? false)
-        <span class="ml-auto w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
+        <span class="ml-auto h-1.5 w-1.5 rounded-full bg-slate-700"></span>
     @endif
-</a>
+</a>