feat: add support for active state in navigation groups

filamentphp · Oct 31, 2023 · 35b303e · 35b303e
1 parent 66925a1
commit 35b303e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 13 deletions.
diff --git a/packages/panels/resources/views/components/sidebar/group.blade.php b/packages/panels/resources/views/components/sidebar/group.blade.php
@@ -1,4 +1,6 @@
 @props([
+    'active' => false,
+    'activeIcon' => null,
     'collapsible' => true,
     'icon' => null,
     'items' => [],
@@ -10,7 +12,10 @@
 <li
     x-data="{ label: @js($label) }"
     data-group-label="{{ $label }}"
-    class="fi-sidebar-group flex flex-col gap-y-1"
+    @class([
+        'fi-sidebar-group flex flex-col gap-y-1',
+        'fi-active fi-sidebar-group-active' => $active,
+    ])
 >
     @if ($label)
         <div
@@ -24,23 +29,32 @@ class="fi-sidebar-group flex flex-col gap-y-1"
                 x-transition:enter-end="opacity-100"
             @endif
             @class([
-                'flex items-center gap-x-3 px-2 py-2',
+                'flex items-center gap-x-3 px-2 py-2 rounded-lg',
+                'transition duration-75 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-white/5 dark:focus:bg-white/5' => (bool) $url,
+                'bg-gray-100 dark:bg-white/5' => $active,
                 'cursor-pointer' => $collapsible,
             ])
         >
             @if ($icon)
                 <x-filament::icon
-                    :icon="$icon"
-                    class="fi-sidebar-group-icon h-6 w-6 text-gray-400 dark:text-gray-500"
+                    :icon="($active && $activeIcon) ? $activeIcon : $icon"
+                    @class([
+                        'fi-sidebar-group-icon h-6 w-6',
+                        'text-gray-400 dark:text-gray-500' => ! $active,
+                        'text-primary-600 dark:text-primary-400' => $active,
+                    ])
                 />
             @endif
 
             <a
                 @if($url)
-                    href="{{ $url }}"
-                    target="{{ $shouldOpenUrlInNewTab ? '_blank' : '_self' }}"
+                    {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
                 @endif
-                class="fi-sidebar-group-label flex-1 text-sm font-semibold text-gray-700 dark:text-gray-200"
+                @class([
+                    'fi-sidebar-group-label flex-1 text-sm font-semibold',
+                    'text-gray-700 dark:text-gray-200' => ! $active,
+                    'text-primary-600 dark:text-primary-400' => $active                    
+                ])
             >
                 {{ $label }}
             </a>

diff --git a/packages/panels/resources/views/components/sidebar/index.blade.php b/packages/panels/resources/views/components/sidebar/index.blade.php
@@ -114,6 +114,8 @@ class="fi-sidebar-nav flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden px
             <ul class="-mx-2 flex flex-col gap-y-7">
                 @foreach ($navigation as $group)
                     <x-filament-panels::sidebar.group
+                        :active-icon="$group->getActiveIcon()"
+                        :active="$group->isActive()"
                         :collapsible="$group->isCollapsible()"
                         :icon="$group->getIcon()"
                         :items="$group->getItems()"

diff --git a/packages/panels/src/Navigation/NavigationGroup.php b/packages/panels/src/Navigation/NavigationGroup.php
@@ -13,8 +13,12 @@ class NavigationGroup extends Component
 
     protected bool | Closure | null $isCollapsible = null;
 
+    protected ?Closure $isActiveWhen = null;
+
     protected string | Closure | null $icon = null;
 
+    protected string | Closure | null $activeIcon = null;
+
     /**
      * @var array<NavigationItem> | Arrayable
      */
@@ -55,6 +59,20 @@ public function collapsible(bool | Closure | null $condition = true): static
         return $this;
     }
 
+    public function activeIcon(string | Closure | null $activeIcon): static
+    {
+        $this->activeIcon = $activeIcon;
+
+        return $this;
+    }
+
+    public function isActiveWhen(Closure $callback): static
+    {
+        $this->isActiveWhen = $callback;
+
+        return $this;
+    }
+
     public function icon(string | Closure | null $icon): static
     {
         $this->icon = $icon;
@@ -99,6 +117,7 @@ public function url(string | Closure | null $url, bool | Closure $shouldOpenInNe
     {
         $this->openUrlInNewTab($shouldOpenInNewTab);
         $this->url = $url;
+        $this->isActiveWhen(fn () => request()->fullUrlIs($url) || request()->path() === trim($url, '/'));
 
         return $this;
     }
@@ -114,6 +133,11 @@ public function getIcon(): ?string
         return $icon;
     }
 
+    public function getActiveIcon(): ?string
+    {
+        return $this->evaluate($this->activeIcon);
+    }
+
     /**
      * @return array<NavigationItem> | Arrayable
      */
@@ -144,15 +168,13 @@ public function isCollapsible(): bool
 
     public function isActive(): bool
     {
-        foreach ($this->getItems() as $item) {
-            if (! $item->isActive()) {
-                continue;
-            }
+        $callback = $this->isActiveWhen;
 
-            return true;
+        if ($callback === null) {
+            return false;
         }
 
-        return false;
+        return (bool) $this->evaluate($callback);
     }
 
     public function hasItemIcons(): bool