create top menű in modern view

app/Providers/Filament/AdminPanelProvider.php

@@ -10,8 +10,10 @@
 use Filament\Panel;
 use Filament\PanelProvider;
 use Filament\Support\Colors\Color;
+use Filament\View\PanelsRenderHook;
 use Filament\Widgets\AccountWidget;
 use Filament\Widgets\FilamentInfoWidget;
+use Illuminate\Contracts\View\View;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
 use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken;
@@ -74,6 +76,12 @@ public function panel(Panel $panel): Panel
             ])
             ->authMiddleware([
                 Authenticate::class,
-            ]);
+            ])
+            ->darkMode(false)
+            ->topNavigation()
+            ->renderHook(
+                PanelsRenderHook::TOPBAR_START,
+                fn (): View => view('filament.components.speed-button-nav-bar'),
+            );
     }
 }

resources/views/filament/components/speed-button-nav-bar.blade.php

@@ -0,0 +1,49 @@
+@php
+    $modules = [
+        ['name' => 'home', 'displayName' => 'Főoldal', 'icon' => 'home', 'link' => route('dashboard.index'), 'roles' => ['root','admin','developer','profit-center']],
+        ['name' => 'order', 'displayName' => 'Új megrendelés', 'icon' => 'bevetelezes', 'link' => route('order.index'), 'roles' => ['root','profit-center']],
+        ['name' => 'activeOrder', 'displayName' => 'Megrendelések', 'icon' => 'tranzakciok', 'link' => route('orderArchive.index'), 'roles' => ['root','developer','admin','profit-center']],
+        ['name' => 'productGroup', 'displayName' => 'Termékcsoportok', 'icon' => 'category', 'link' => route('admin.productGroup.index'), 'roles' => ['root','developer','admin']],
+        ['name' => 'product', 'displayName' => 'Termék', 'icon' => 'raktar', 'link' => route('admin.product.index'), 'roles' => ['root','developer','admin']],
+        ['name' => 'supplier', 'displayName' => 'Beszállító adatbázis', 'icon' => 'supplier', 'link' => route('admin.supplier.index'), 'roles' => ['root','developer','admin','profit-center']],
+        ['name' => 'priceList', 'displayName' => 'Webrendelős árlisták', 'icon' => 'price_list2', 'link' => route('admin.priceList.index'), 'roles' => ['root','developer','admin','profit-center']],
+        ['name' => 'priceListProcessor', 'displayName' => 'Árlista feldolgozó', 'icon' => 'price_list', 'link' => '/admin/price-list-processor', 'roles' => ['root','developer','admin']],
+    ];
+@endphp
+
+<nav class="fi-speed-button-nav flex items-center h-full ml-4">
+    <ul class="flex items-center gap-x-1">
+        @foreach ($modules as $module)
+            @role($module['roles'])
+                @php
+                    $isActive = request()->is(ltrim($module['link'], '/') . '*');
+                @endphp
+                <li class="flex-none">
+                    <a href="{{ $module['link'] }}"
+                       title="{{ $module['displayName'] }}"
+                       class="flex flex-col items-center justify-center w-[110px] h-[105px] rounded-md transition-colors duration-200 {{ $isActive ? 'bg-white/50 shadow-inner' : 'hover:bg-white/30' }}">
+                        <img src="{{ asset('images/icons/ico_'.$module['icon'].'.png') }}"
+                             class="w-16 h-16 object-contain mb-1"
+                             alt="">
+                        <span class="text-[11px] font-bold text-[#453821] truncate w-full text-center px-1 leading-tight">
+                            {{ $module['displayName'] }}
+                        </span>
+                    </a>
+                </li>
+            @endrole
+        @endforeach
+    </ul>
+</nav>
+
+<style>
+    /* Biztosítjuk, hogy a topbar ne essen szét */
+    .fi-topbar {
+        height: auto !important;
+    }
+    .fi-topbar-content {
+        height: auto !important;
+        min-height: 64px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+</style>