Panels navigation documentation

docs-assets/app/app/Livewire/Panels/Navigation/ActiveIcon.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class ActiveIcon extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.active-icon';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Settings Inactive')
+                    ->url(fn (): string => '#')
+                    ->activeIcon('heroicon-o-document-text')
+                    ->icon('heroicon-o-cog-6-tooth'),
+                NavigationItem::make('')
+                    ->label('Settings Active')
+                    ->url(fn (): string => '#')
+                    ->isActiveWhen(fn() => request()->path() === 'panels/navigation/active-icon')
+                    ->activeIcon('heroicon-o-document-text')
+                    ->icon('heroicon-o-cog-6-tooth'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/Badge.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class Badge extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.badge';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Orders')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-shopping-cart')
+                    ->badge(24),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/BadgeColor.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+use Filament\Support\Colors\Color;
+
+class BadgeColor extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.badge-color';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Orders')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-shopping-cart')
+                    ->badge(32, Color::Red),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/BadgeTooltip.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class BadgeTooltip extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.badge-tooltip';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Users')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-user-group')
+                    ->badge(12)
+                    ->badgeTooltip('The number of users'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/ChangeIcon.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class ChangeIcon extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.change-icon';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Settings')
+                    ->url(fn (): string => '#')
+                    ->icon('heroicon-o-document-text'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/CustomItems.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Pages\Dashboard;
+use Filament\Navigation\NavigationItem;
+
+class CustomItems extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.custom-items';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make('Analytics')
+                    ->url('https://filament.pirsch.io', shouldOpenInNewTab: true)
+                    ->icon('heroicon-o-presentation-chart-line')
+                    ->group('Reports')
+                    ->sort(3),
+                NavigationItem::make('dashboard')
+                    ->label(fn (): string => __('filament-panels::pages/dashboard.title'))
+                    ->url(fn (): string => Dashboard::getUrl())
+                    ->isActiveWhen(fn () => request()->routeIs('filament.admin.pages.dashboard')),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/DisabledNavigation.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+
+class DisabledNavigation extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.disabled-navigation';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigation(false);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/Group.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class Group extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.group';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Bank Accounts')
+                    ->url(fn(): string => '#')
+                    ->group('Settings')
+                    ->icon('heroicon-o-currency-dollar'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/GroupCollapsible.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationGroup;
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class GroupCollapsible extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.group-collapsible';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationGroups([
+                NavigationGroup::make('Settings')->collapsed()
+            ])
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Bank Accounts')
+                    ->url(fn(): string => '#')
+                    ->group('Settings')
+                    ->icon('heroicon-o-currency-dollar'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/GroupNotCollapsible.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationGroup;
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class GroupNotCollapsible extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.group-not-collapsible';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationGroups([
+                NavigationGroup::make('Settings')->collapsible(false)
+            ])
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Bank Accounts')
+                    ->url(fn(): string => '#')
+                    ->group('Settings')
+                    ->icon('heroicon-o-currency-dollar'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/SidebarCollapsibleOnDesktop.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class SidebarCollapsibleOnDesktop extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.collapsible-on-desktop';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Products')
+                    ->sort(2)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+            ])
+            ->sidebarCollapsibleOnDesktop();
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/SidebarFullyCollapsibleOnDesktop.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class SidebarFullyCollapsibleOnDesktop extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.fully-collapsible-on-desktop';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Products')
+                    ->sort(2)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+            ])
+            ->sidebarFullyCollapsibleOnDesktop();
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/SortItems.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class SortItems extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.sort-item';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Products (Sort = 2)')
+                    ->sort(2)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+                NavigationItem::make('')
+                    ->label('Orders (Sort = 1)')
+                    ->sort(1)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+            ]);
+    }
+}

docs-assets/app/app/Livewire/Panels/Navigation/TopNavigation.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Pages\Dashboard;
+use Filament\Navigation\NavigationItem;
+
+class TopNavigation extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.top-navigation';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make('Analytics')
+                    ->url('https://filament.pirsch.io', shouldOpenInNewTab: true)
+                    ->icon('heroicon-o-presentation-chart-line')
+                    ->group('Reports')
+                    ->sort(3),
+                NavigationItem::make('dashboard')
+                    ->label(fn (): string => __('filament-panels::pages/dashboard.title'))
+                    ->url(fn (): string => Dashboard::getUrl())
+                    ->isActiveWhen(fn () => request()->routeIs('filament.admin.pages.dashboard')),
+            ])
+            ->topNavigation();
+    }
+}

docs-assets/app/app/Livewire/Topbar.php → docs-assets/app/app/Livewire/Panels/Navigation/UserMenuCustomization.php

@@ -1,13 +1,13 @@
 <?php
 
-namespace App\Livewire;
+namespace App\Livewire\Panels\Navigation;
 
 use Filament\Navigation\MenuItem;
 use Filament\Pages\Page;
 
-class Topbar extends Page
+class UserMenuCustomization extends Page
 {
-    protected static string $view = 'livewire.topbar';
+    protected static string $view = 'livewire.panels.navigation.users-menu-customization';
 
     public function mount()
     {