feat: top navigation subgroups

app/Filament/Company/Pages/Service/LiveCurrency.php

@@ -5,6 +5,7 @@ namespace App\Filament\Company\Pages\Service;
 use App\Facades\Forex;
 use App\Models\Service\CurrencyList;
 use App\Models\Setting\Currency;
+use Filament\Facades\Filament;
 use Filament\Pages\Page;
 use Illuminate\Contracts\Support\Htmlable;
 use Livewire\Attributes\Url;
@@ -34,6 +35,15 @@ class LiveCurrency extends Page
         return translate(static::$title);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Banking');
+        }
+
+        return null;
+    }
+
     public static function shouldRegisterNavigation(): bool
     {
         return Forex::isEnabled();

app/Filament/Company/Pages/Setting/Appearance.php

@@ -11,6 +11,7 @@ use App\Enums\TableSortDirection;
 use App\Models\Setting\Appearance as AppearanceModel;
 use Filament\Actions\Action;
 use Filament\Actions\ActionGroup;
+use Filament\Facades\Filament;
 use Filament\Forms\Components\Component;
 use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Select;
@@ -59,6 +60,15 @@ class Appearance extends Page
         return translate(static::$title);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Personalization');
+        }
+
+        return null;
+    }
+
     public function mount(): void
     {
         $this->record = AppearanceModel::firstOrNew([

app/Filament/Company/Pages/Setting/CompanyDefault.php

@@ -10,6 +10,7 @@ use App\Models\Setting\Discount;
 use App\Models\Setting\Tax;
 use Filament\Actions\Action;
 use Filament\Actions\ActionGroup;
+use Filament\Facades\Filament;
 use Filament\Forms\Components\Component;
 use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Select;
@@ -61,6 +62,15 @@ class CompanyDefault extends Page
         return translate(static::$title);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Personalization');
+        }
+
+        return null;
+    }
+
     public function mount(): void
     {
         $this->record = CompanyDefaultModel::firstOrNew([

app/Filament/Company/Pages/Setting/CompanyProfile.php

@@ -9,6 +9,7 @@ use App\Models\Locale\State;
 use App\Models\Setting\CompanyProfile as CompanyProfileModel;
 use Filament\Actions\Action;
 use Filament\Actions\ActionGroup;
+use Filament\Facades\Filament;
 use Filament\Forms\Components\Component;
 use Filament\Forms\Components\FileUpload;
 use Filament\Forms\Components\Group;
@@ -63,6 +64,15 @@ class CompanyProfile extends Page
         return translate(static::$title);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Company');
+        }
+
+        return null;
+    }
+
     public function mount(): void
     {
         $this->record = CompanyProfileModel::firstOrNew([

app/Filament/Company/Pages/Setting/Invoice.php

@@ -9,6 +9,7 @@ use App\Enums\Template;
 use App\Models\Setting\DocumentDefault as InvoiceModel;
 use Filament\Actions\Action;
 use Filament\Actions\ActionGroup;
+use Filament\Facades\Filament;
 use Filament\Forms\Components\Checkbox;
 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\Component;
@@ -65,6 +66,15 @@ class Invoice extends Page
         return translate(static::$title);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Personalization');
+        }
+
+        return null;
+    }
+
     public function mount(): void
     {
         $this->record = InvoiceModel::invoice()

app/Filament/Company/Pages/Setting/Localization.php

@@ -10,6 +10,7 @@ use App\Models\Setting\Localization as LocalizationModel;
 use App\Utilities\Localization\Timezone;
 use Filament\Actions\Action;
 use Filament\Actions\ActionGroup;
+use Filament\Facades\Filament;
 use Filament\Forms\Components\Component;
 use Filament\Forms\Components\DatePicker;
 use Filament\Forms\Components\Section;
@@ -60,6 +61,15 @@ class Localization extends Page
         return translate(static::$title);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Company');
+        }
+
+        return null;
+    }
+
     public function mount(): void
     {
         $this->record = LocalizationModel::firstOrNew([

app/Filament/Company/Resources/Banking/AccountResource.php

@@ -9,6 +9,7 @@ use App\Filament\Company\Resources\Banking\AccountResource\Pages;
 use App\Models\Banking\Account;
 use App\Utilities\Currency\CurrencyAccessor;
 use App\Utilities\Currency\CurrencyConverter;
+use Filament\Facades\Filament;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Notifications\Notification;
@@ -38,6 +39,15 @@ class AccountResource extends Resource
         return translate($modelLabel);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate(static::$navigationGroup);
+        }
+
+        return null;
+    }
+
     public static function form(Form $form): Form
     {
         return $form

app/Filament/Company/Resources/Core/DepartmentResource.php

@@ -5,6 +5,7 @@ namespace App\Filament\Company\Resources\Core;
 use App\Filament\Company\Resources\Core\DepartmentResource\Pages;
 use App\Filament\Company\Resources\Core\DepartmentResource\RelationManagers\ChildrenRelationManager;
 use App\Models\Core\Department;
+use Filament\Facades\Filament;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Resources\Resource;
@@ -31,6 +32,15 @@ class DepartmentResource extends Resource
         return translate($modelLabel);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return 'HR';
+        }
+
+        return null;
+    }
+
     public static function form(Form $form): Form
     {
         return $form

app/Filament/Company/Resources/Setting/CategoryResource.php

@@ -8,6 +8,7 @@ use App\Models\Setting\Category;
 use App\Traits\NotifiesOnDelete;
 use Closure;
 use Exception;
+use Filament\Facades\Filament;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Resources\Resource;
@@ -37,6 +38,15 @@ class CategoryResource extends Resource
         return translate($modelLabel);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Finance');
+        }
+
+        return null;
+    }
+
     public static function form(Form $form): Form
     {
         return $form

app/Filament/Company/Resources/Setting/CurrencyResource.php

@@ -11,6 +11,7 @@ use App\Traits\ChecksForeignKeyConstraints;
 use App\Traits\NotifiesOnDelete;
 use App\Utilities\Currency\CurrencyAccessor;
 use Closure;
+use Filament\Facades\Filament;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Resources\Resource;
@@ -42,6 +43,15 @@ class CurrencyResource extends Resource
         return translate($modelLabel);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Finance');
+        }
+
+        return null;
+    }
+
     public static function form(Form $form): Form
     {
         return $form

app/Filament/Company/Resources/Setting/DiscountResource.php

@@ -12,6 +12,7 @@ use App\Models\Setting\Discount;
 use App\Models\Setting\Localization;
 use App\Traits\NotifiesOnDelete;
 use Closure;
+use Filament\Facades\Filament;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Resources\Resource;
@@ -41,6 +42,15 @@ class DiscountResource extends Resource
         return translate($modelLabel);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Finance');
+        }
+
+        return null;
+    }
+
     public static function form(Form $form): Form
     {
         return $form

app/Filament/Company/Resources/Setting/TaxResource.php

@@ -9,6 +9,7 @@ use App\Filament\Company\Resources\Setting\TaxResource\Pages;
 use App\Models\Setting\Tax;
 use App\Traits\NotifiesOnDelete;
 use Closure;
+use Filament\Facades\Filament;
 use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Resources\Resource;
@@ -38,6 +39,15 @@ class TaxResource extends Resource
         return translate($modelLabel);
     }
 
+    public static function getNavigationParentItem(): ?string
+    {
+        if (Filament::hasTopNavigation()) {
+            return translate('Finance');
+        }
+
+        return null;
+    }
+
     public static function form(Form $form): Form
     {
         return $form

app/Listeners/ConfigureCompanyDefault.php

@@ -17,7 +17,6 @@ use Filament\Facades\Filament;
 use Filament\Forms\Components\DatePicker;
 use Filament\Forms\Components\Section;
 use Filament\Forms\Components\Tabs\Tab;
-use Filament\Navigation\NavigationGroup;
 use Filament\Resources\Components\Tab as ResourcesTab;
 use Filament\Support\Facades\FilamentColor;
 use Filament\Tables\Table;
@@ -38,7 +37,6 @@ class ConfigureCompanyDefault
         $modalWidth = $company->appearance->modal_width->value ?? ModalWidth::DEFAULT;
         $maxContentWidth = $company->appearance->max_content_width->value ?? MaxContentWidth::DEFAULT;
         $defaultFont = $company->appearance->font->value ?? Font::DEFAULT;
-        $hasTopNavigation = $company->appearance->has_top_navigation ?? false;
         $default_language = $company->locale->language ?? config('transmatic.source_locale');
         $defaultTimezone = $company->locale->timezone ?? config('app.timezone');
         $dateFormat = $company->locale->date_format->value ?? DateFormat::DEFAULT;
@@ -73,8 +71,6 @@ class ConfigureCompanyDefault
         Filament::getPanel('company')
             ->font($defaultFont)
             ->brandName($company->name)
-            ->topNavigation($hasTopNavigation)
-            ->sidebarCollapsibleOnDesktop(! $hasTopNavigation)
             ->maxContentWidth($maxContentWidth);
 
         DatePicker::configureUsing(static function (DatePicker $component) use ($dateFormat, $weekStart) {
@@ -98,10 +94,6 @@ class ConfigureCompanyDefault
             $tab->localizeLabel();
         }, isImportant: true);
 
-        NavigationGroup::configureUsing(static function (NavigationGroup $group): void {
-            $group->localizeLabel();
-        }, isImportant: true);
-
         ConfigureCurrencies::syncCurrencies();
     }
 }

app/Listeners/ConfigureCompanyNavigation.php

@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Listeners;
+
+use App\Events\CompanyConfigured;
+use App\Filament\Company\Pages\Service\LiveCurrency;
+use App\Filament\Company\Pages\Setting\Appearance;
+use App\Filament\Company\Pages\Setting\CompanyDefault;
+use App\Filament\Company\Pages\Setting\CompanyProfile;
+use App\Filament\Company\Pages\Setting\Invoice;
+use App\Filament\Company\Pages\Setting\Localization;
+use App\Filament\Company\Resources\Banking\AccountResource;
+use App\Filament\Company\Resources\Core\DepartmentResource;
+use App\Filament\Company\Resources\Setting\CategoryResource;
+use App\Filament\Company\Resources\Setting\CurrencyResource;
+use App\Filament\Company\Resources\Setting\DiscountResource;
+use App\Filament\Company\Resources\Setting\TaxResource;
+use Filament\Facades\Filament;
+use Filament\Navigation\NavigationBuilder;
+use Filament\Navigation\NavigationGroup;
+use Filament\Pages\Dashboard;
+
+class ConfigureCompanyNavigation
+{
+    /**
+     * Handle the event.
+     */
+    public function handle(CompanyConfigured $event): void
+    {
+        $company = $event->company;
+
+        $hasTopNavigation = $company->appearance->has_top_navigation ?? false;
+
+        Filament::getPanel('company')
+            ->topNavigation($hasTopNavigation)
+            ->sidebarCollapsibleOnDesktop(! $hasTopNavigation);
+
+        if (Filament::getPanel('company')->hasTopNavigation()) {
+            Filament::getPanel('company')->navigation(
+                $this->buildCompanyNavigation()
+            );
+        }
+
+        NavigationGroup::configureUsing(static function (NavigationGroup $group): void {
+            $group->localizeLabel();
+        }, isImportant: true);
+    }
+
+    /**
+     * Build the company navigation.
+     */
+    protected function buildCompanyNavigation(): callable
+    {
+        return function (NavigationBuilder $builder): NavigationBuilder {
+            return $builder
+                ->items(Dashboard::getNavigationItems())
+                ->groups([
+                    $this->buildSettingsGroup(),
+                    $this->buildResourcesGroup(),
+                ]);
+        };
+    }
+
+    /**
+     * Build the settings group.
+     */
+    protected function buildSettingsGroup(): NavigationGroup
+    {
+        return NavigationGroup::make(translate('Settings'))
+            ->items([
+                ...CategoryResource::getNavigationItems(),
+                ...CurrencyResource::getNavigationItems(),
+                ...DiscountResource::getNavigationItems(),
+                ...TaxResource::getNavigationItems(),
+                ...Appearance::getNavigationItems(),
+                ...CompanyDefault::getNavigationItems(),
+                ...Invoice::getNavigationItems(),
+                ...CompanyProfile::getNavigationItems(),
+                ...Localization::getNavigationItems(),
+            ]);
+    }
+
+    /**
+     * Build the resources group.
+     */
+    protected function buildResourcesGroup(): NavigationGroup
+    {
+        return NavigationGroup::make(translate('Resources'))
+            ->items([
+                ...LiveCurrency::getNavigationItems(),
+                ...AccountResource::getNavigationItems(),
+                ...DepartmentResource::getNavigationItems(),
+            ]);
+    }
+}

app/Providers/AppServiceProvider.php

@@ -4,7 +4,9 @@ namespace App\Providers;
 
 use BezhanSalleh\PanelSwitch\PanelSwitch;
 use Filament\Notifications\Livewire\Notifications;
+use Filament\Support\Assets\Js;
 use Filament\Support\Enums\Alignment;
+use Filament\Support\Facades\FilamentAsset;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -25,6 +27,10 @@ class AppServiceProvider extends ServiceProvider
         Notifications::alignment(Alignment::Center);
 
         $this->configurePanelSwitch();
+
+        FilamentAsset::register([
+            Js::make('top-navigation-script', __DIR__ . '/../../resources/js/top-navigation.js'),
+        ]);
     }
 
     /**

app/Providers/EventServiceProvider.php

@@ -9,6 +9,7 @@ use App\Events\CompanyGenerated;
 use App\Events\CurrencyRateChanged;
 use App\Events\DefaultCurrencyChanged;
 use App\Listeners\ConfigureCompanyDefault;
+use App\Listeners\ConfigureCompanyNavigation;
 use App\Listeners\CreateCompanyDefaults;
 use App\Listeners\SyncAssociatedModels;
 use App\Listeners\SyncWithCompanyDefaults;
@@ -41,6 +42,7 @@ class EventServiceProvider extends ServiceProvider
         ],
         CompanyConfigured::class => [
             ConfigureCompanyDefault::class,
+            ConfigureCompanyNavigation::class,
         ],
         CompanyGenerated::class => [
             CreateCompanyDefaults::class,

app/Providers/MacroServiceProvider.php

@@ -57,10 +57,7 @@ class MacroServiceProvider extends ServiceProvider
                 $currency = $column->evaluate($currency);
                 $convert = $column->evaluate($convert);
 
-                $formatted = money($state, $currency, $convert);
-                $currencyCode = currency($currency)->getCurrency();
-
-                return "{$formatted} {$currencyCode}";
+                return money($state, $currency, $convert)->formatWithCode();
             });
 
             return $this;

app/Providers/TranslationServiceProvider.php

@@ -64,7 +64,7 @@ class TranslationServiceProvider extends ServiceProvider
         NavigationGroup::macro('localizeLabel', function () {
             $label = $this->getLabel();
 
-            if (filled($label)) {
+            if ($label !== 'HR' && filled($label)) {
                 $this->label(translate($label));
             }
 

package-lock.json

@@ -606,9 +606,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.22.1",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
-            "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+            "version": "4.22.2",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
+            "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
             "dev": true,
             "funding": [
                 {
@@ -625,9 +625,9 @@
                 }
             ],
             "dependencies": {
-                "caniuse-lite": "^1.0.30001541",
-                "electron-to-chromium": "^1.4.535",
-                "node-releases": "^2.0.13",
+                "caniuse-lite": "^1.0.30001565",
+                "electron-to-chromium": "^1.4.601",
+                "node-releases": "^2.0.14",
                 "update-browserslist-db": "^1.0.13"
             },
             "bin": {
@@ -647,9 +647,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001564",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
-            "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+            "version": "1.0.30001566",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz",
+            "integrity": "sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==",
             "dev": true,
             "funding": [
                 {
@@ -766,9 +766,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.594",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz",
-            "integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ==",
+            "version": "1.4.605",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.605.tgz",
+            "integrity": "sha512-V52j+P5z6cdRqTjPR/bYNxx7ETCHIkm5VIGuyCy3CMrfSnbEpIlLnk5oHmZo7gYvDfh2TfHeanB6rawyQ23ktg==",
             "dev": true
         },
         "node_modules/esbuild": {
@@ -1208,9 +1208,9 @@
             }
         },
         "node_modules/node-releases": {
-            "version": "2.0.13",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-            "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+            "version": "2.0.14",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+            "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
             "dev": true
         },
         "node_modules/normalize-path": {
@@ -1310,9 +1310,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.31",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-            "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+            "version": "8.4.32",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+            "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
             "dev": true,
             "funding": [
                 {
@@ -1329,7 +1329,7 @@
                 }
             ],
             "dependencies": {
-                "nanoid": "^3.3.6",
+                "nanoid": "^3.3.7",
                 "picocolors": "^1.0.0",
                 "source-map-js": "^1.0.2"
             },
@@ -1625,9 +1625,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.3.5",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
-            "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+            "version": "3.3.6",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
+            "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
             "dev": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
@@ -1750,9 +1750,9 @@
             "dev": true
         },
         "node_modules/vite": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
-            "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+            "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.18.10",

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
     plugins: {
+        'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
     },

resources/css/filament/company/tailwind.config.js

@@ -17,7 +17,11 @@ export default {
                 white: '#F6F5F3',
                 platinum: '#E8E9EB',
                 moonlight: '#F6F5F3',
-                translucent: 'rgba(54, 54, 52, 0.06)',
+                'translucent': {
+                    light: 'rgba(255, 255, 255, 0.5)',
+                    DEFAULT: 'rgba(255, 255, 255, 0.5)',
+                    dark: 'rgba(25, 25, 25, 0.5)',
+                },
             },
         }
     }

resources/css/filament/company/theme.css

@@ -6,12 +6,132 @@
     @apply bg-platinum;
 }
 
+.fi-topbar > nav, .fi-sidebar-header {
+    @apply bg-transparent ring-0 shadow-none !important;
+    transition: background-color 0.3s, top 0.3s;
+}
+
 .fi-topbar > nav {
-    @apply bg-translucent;
+    @apply relative flex justify-center;
+
+    > ul {
+        @apply absolute -translate-x-2/4 gap-x-0 left-2/4;
+    }
+
+    > div {
+        @apply static;
+    }
+}
+
+.fi-topbar > nav.topbar-hovered, .fi-sidebar-header.topbar-hovered {
+    @apply bg-translucent dark:bg-translucent-dark !important;
 }
 
-.fi-sidebar-header {
-    @apply bg-translucent;
+.fi-dropdown.fi-topbar-dropdown .fi-dropdown-panel {
+    transition: max-width 0.3s linear 0.1s, opacity 0.1s linear 0.1s;
+    @apply absolute -translate-x-1/2 left-1/2 !important;
+}
+
+.fi-topbar-item > * {
+    @apply h-16 rounded-none !bg-transparent border-b-2 border-transparent;
+}
+
+.fi-topbar-item > button > svg {
+    transition: transform 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+
+.fi-topbar-item-active {
+    & > a, & > button {
+        @apply border-primary-600 dark:border-primary-400;
+    }
+
+    > button {
+        @apply text-gray-700 dark:text-gray-200;
+    }
+
+    > button > svg {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+}
+
+.fi-topbar-item > a:hover, a:focus-visible {
+    @apply text-primary-600 dark:text-primary-400 border-primary-600 dark:border-primary-400;
+
+    > svg {
+        @apply text-primary-500;
+    }
+}
+
+.fi-topbar-dropdown[aria-expanded="true"], .fi-topbar-dropdown[aria-expanded="false"] .fi-dropdown-trigger[aria-expanded="true"] {
+    .fi-topbar-item > button {
+        @apply text-primary-600 dark:text-primary-400 border-primary-600 dark:border-primary-400 !important;
+
+        > svg {
+            @apply rotate-180 text-primary-500;
+        }
+    }
+}
+
+.menu-groups {
+    @apply flex flex-row relative transition-[unset] m-0 px-12 py-9;
+
+    .menu-group {
+        @apply flex flex-col justify-between relative z-[3] mx-2.5 my-0 p-0;
+    }
+}
+
+.submenu-wrap {
+    .submenu {
+        @apply flex flex-wrap m-0 p-0;
+    }
+
+    .submenu.cols-1 {
+        @apply w-60;
+    }
+
+    .menu-label, .menu-label-invisible-spacer {
+        @apply text-gray-700 dark:text-gray-200 text-base font-medium mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 min-h-[2.5625rem];
+    }
+
+    .menu-label-invisible-spacer {
+        @apply invisible;
+    }
+}
+
+.menu-item {
+    @apply cursor-pointer -left-4 leading-tight relative w-[calc(100%_-_10px)] p-2;
+}
+
+.fi-topbar-dropdown-list-item {
+    @apply flex justify-between relative transition-[left] duration-200 z-[2] rounded-none left-0;
+
+    &:after {
+        @apply bg-primary-600 dark:bg-primary-400 content-[''] block h-0 left-[-1rem] absolute transition-all duration-300 w-px top-[calc(100%_+_0.5rem)];
+    }
+
+    &:hover {
+        @apply left-4 !bg-transparent;
+    }
+
+    &:hover > span {
+        @apply text-primary-600 dark:text-primary-400;
+    }
+
+    &:hover:after {
+        @apply -top-2 h-[calc(100%+1rem)];
+    }
+
+    &:hover .bg {
+        @apply w-full;
+    }
+
+    > span {
+        @apply flex flex-col relative z-[1] font-medium;
+    }
+
+    .bg {
+        @apply h-[calc(100%+1rem)] -left-4 absolute -top-2 transition-[width] duration-200 delay-100 bg-gradient-to-r from-primary-600/10 dark:from-primary-400/10;
+    }
 }
 
 .choices__inner {
@@ -21,5 +141,3 @@
 .fi-badge {
     display: inline-flex;
 }
-
-

resources/css/filament/user/tailwind.config.js

@@ -15,8 +15,12 @@ export default {
                 white: '#F6F5F3',
                 platinum: '#E8E9EB',
                 moonlight: '#F6F5F3',
-                translucent: 'rgba(54, 54, 52, 0.06)',
-            }
+                'translucent': {
+                    light: 'rgba(255, 255, 255, 0.5)',
+                    DEFAULT: 'rgba(255, 255, 255, 0.5)',
+                    dark: 'rgba(25, 25, 25, 0.5)',
+                },
+            },
         }
     }
 }

resources/css/filament/user/theme.css

@@ -6,18 +6,31 @@
     @apply bg-platinum;
 }
 
+.fi-topbar > nav, .fi-sidebar-header {
+    @apply bg-transparent ring-0 shadow-none !important;
+    transition: background-color 0.3s, top 0.3s;
+}
+
 .fi-topbar > nav {
-    @apply bg-translucent;
+    @apply relative flex justify-center;
+
+    > ul {
+        @apply absolute -translate-x-2/4 gap-x-0 left-2/4;
+    }
+
+    > div {
+        @apply static;
+    }
 }
 
-.fi-sidebar-header {
-    @apply bg-translucent;
+.fi-topbar > nav.topbar-hovered, .fi-sidebar-header.topbar-hovered {
+    @apply bg-translucent dark:bg-translucent-dark !important;
 }
 
-.fi-icon-btn.bg-gray-100.\!rounded-full.dark\:bg-custom-500\/20 {
-    @apply bg-translucent;
+.fi-dropdown.fi-topbar-dropdown .fi-dropdown-panel {
+    @apply absolute -translate-x-1/2 left-1/2 !important;
 }
 
-.panel-switch-card-section {
-    @apply bg-platinum;
+.fi-icon-btn.bg-gray-100.\!rounded-full.dark\:bg-custom-500\/20 {
+    @apply bg-translucent;
 }

resources/data/lang/ar.json

@@ -46,7 +46,6 @@
     "Side Navigation": "التنقل الجانبي",
     "Disabled": "معاق",
     "Discount": "خصم",
-    "HR": "HR",
     "Striped Tables": "طاولات مخططة",
     "Identification": "تحديد",
     "fuchsia": "فوشيا",
@@ -224,5 +223,11 @@
     "Action Denied": "تم رفض الإجراء",
     "The rate must be between 0 and 100.": "يجب أن يكون المعدل بين 0 و 100.",
     "The rate must be greater than 0.": "يجب أن يكون المعدل أكبر من 0.",
-    "Parent Department": "قسم أولياء الأمور"
-}
+    "Parent Department": "قسم أولياء الأمور",
+    "Company": "الشركة",
+    "Management": "الإدارة",
+    "Website": "الموقع الإلكتروني",
+    "Resources": "الموارد",
+    "Finance": "التمويل",
+    "Personalization": "التخصيص"
+}

resources/data/lang/de.json

@@ -29,7 +29,6 @@
     "State \/ Province": "Bundesland\/Provinz",
     "Categories": "Kategorien",
     "Layout": "Raumaufteilung",
-    "HR": "HR",
     "sky": "Himmel",
     "stone": "Stein",
     "Settings": "Einstellungen",
@@ -224,5 +223,11 @@
     "Parent Department": "Elternabteilung",
     "Action Denied": "Aktion verweigert",
     "Live Rate": "Live-Rate",
-    "Entity": "Entität"
-}
+    "Entity": "Entität",
+    "Website": "Webseite",
+    "Resources": "Ressourcen",
+    "Management": "Verwaltung",
+    "Finance": "Finanzen",
+    "Company": "Firma",
+    "Personalization": "Personalisierung"
+}

resources/data/lang/en.json

@@ -67,7 +67,6 @@
     "Tax": "Tax",
     "Settings": "Settings",
     "Banking": "Banking",
-    "HR": "HR",
     "Taxes & Discounts": "Taxes & Discounts",
     "Sales Tax": "Sales Tax",
     "Purchase Tax": "Purchase Tax",
@@ -224,5 +223,11 @@
     "Currencies": "Currencies",
     "Live Rate": "Live Rate",
     "Currency List": "Currency List",
-    "Company Currencies": "Company Currencies"
+    "Company Currencies": "Company Currencies",
+    "Website": "Website",
+    "Management": "Management",
+    "Resources": "Resources",
+    "Finance": "Finance",
+    "Personalization": "Personalization",
+    "Company": "Company"
 }

resources/data/lang/es.json

@@ -50,7 +50,6 @@
     "slate": "pizarra",
     "Banking": "Banca",
     "Settings": "Ajustes",
-    "HR": "HORA",
     "Currency": "Divisa",
     "Ascending": "Ascendente",
     "Localization": "Localización",
@@ -224,5 +223,11 @@
     "Live Currency": "Divisa en vivo",
     "The :Type :record \":name\" already exists.": "El :Type :record \":name\" ya existe.",
     "Currency Rate": "Tipo de cambio",
-    "The rate must be between 0 and 100.": "La tasa debe estar entre 0 y 100."
-}
+    "The rate must be between 0 and 100.": "La tasa debe estar entre 0 y 100.",
+    "Resources": "Recursos",
+    "Company": "Empresa",
+    "Website": "Sitio web",
+    "Management": "Administración",
+    "Finance": "Finanzas",
+    "Personalization": "Personalización"
+}

resources/data/lang/fr.json

@@ -53,7 +53,6 @@
     "Identification": "Identification",
     "Limited Partnership (LP)": "Société en commandite (LP)",
     "Accent Color": "Couleur d'accent",
-    "HR": "HR",
     "Number Digits": "Chiffres numériques",
     "Navigation Layout": "Disposition de navigation",
     "Content": "Contenu",
@@ -224,5 +223,11 @@
     "Action Denied": "Action refusée",
     "Parent Department": "Département parent",
     "The rate must be between 0 and 100.": "Le taux doit être compris entre 0 et 100.",
-    "The rate must be greater than 0.": "Le taux doit être supérieur à 0."
-}
+    "The rate must be greater than 0.": "Le taux doit être supérieur à 0.",
+    "Management": "Gestion",
+    "Website": "Site Web",
+    "Resources": "Ressources",
+    "Finance": "Finances",
+    "Company": "Entreprise",
+    "Personalization": "Personnalisation"
+}

resources/data/lang/id.json

@@ -17,7 +17,6 @@
     "cyan": "biru kehijau-hijauan",
     "Descending": "Menurun",
     "red": "merah",
-    "HR": "SDM",
     "Income Category": "Kategori Pendapatan",
     "Ascending": "Menaik",
     "Department": "Departemen",
@@ -224,5 +223,11 @@
     "Company Currencies": "Mata Uang Perusahaan",
     "Action Denied": "Tindakan Ditolak",
     "The rate must be between 0 and 100.": "Tarifnya harus antara 0 dan 100.",
-    "The :Type :record \":name\" already exists.": ":Type :record \":name\" sudah ada."
-}
+    "The :Type :record \":name\" already exists.": ":Type :record \":name\" sudah ada.",
+    "Company": "Perusahaan",
+    "Management": "Manajemen",
+    "Website": "Situs Web",
+    "Resources": "Sumber daya",
+    "Finance": "Keuangan",
+    "Personalization": "Personalisasi"
+}

resources/data/lang/it.json

@@ -46,7 +46,6 @@
     "Font": "Font",
     "Large": "Grande",
     "Account": "Account",
-    "HR": "RISORSE UMANE",
     "Other": "Altro",
     "Items": "Oggetti",
     "Rate": "Tariffa",
@@ -224,5 +223,11 @@
     "Action Denied": "Azione negata",
     "The rate must be between 0 and 100.": "La tariffa deve essere compresa tra 0 e 100.",
     "The rate must be greater than 0.": "La tariffa deve essere maggiore di 0.",
-    "Parent Department": "Dipartimento dei genitori"
-}
+    "Parent Department": "Dipartimento dei genitori",
+    "Resources": "Risorse",
+    "Company": "Azienda",
+    "Website": "Sito Web",
+    "Finance": "Finanza",
+    "Personalization": "Personalizzazione",
+    "Management": "Direzione"
+}

resources/data/lang/nl.json

@@ -18,7 +18,6 @@
     "pink": "roze",
     "rose": "roos",
     "Layout": "Indeling",
-    "HR": "HR",
     "violet": "paars",
     "Categories": "Categorieën",
     "Account": "Account",
@@ -224,5 +223,11 @@
     "Action Denied": "Actie afgewezen",
     "Parent Department": "Ouderafdeling",
     "The rate must be greater than 0.": "De snelheid moet groter zijn dan 0.",
-    "The rate must be between 0 and 100.": "Het tarief moet tussen 0 en 100 liggen."
-}
+    "The rate must be between 0 and 100.": "Het tarief moet tussen 0 en 100 liggen.",
+    "Personalization": "Personalisatie",
+    "Website": "Website",
+    "Resources": "Hulpbronnen",
+    "Finance": "Financiën",
+    "Company": "Bedrijf",
+    "Management": "Management"
+}

resources/data/lang/pt.json

@@ -35,7 +35,6 @@
     "Account": "Conta",
     "Items": "Itens",
     "Street Address": "Endereço da rua",
-    "HR": "RH",
     "City \/ Town": "Cidade\/ Cidade",
     "Country": "País",
     "Quantity": "Quantidade",
@@ -224,5 +223,11 @@
     "Live Currency": "Moeda ao vivo",
     "Parent Department": "Departamento de pais",
     "The rate must be between 0 and 100.": "A taxa deve estar entre 0 e 100.",
-    "The rate must be greater than 0.": "A taxa deve ser maior que 0."
-}
+    "The rate must be greater than 0.": "A taxa deve ser maior que 0.",
+    "Website": "Site",
+    "Personalization": "Personalização",
+    "Management": "Gestão",
+    "Resources": "Recursos",
+    "Finance": "Finanças",
+    "Company": "Companhia"
+}

resources/data/lang/tr.json

@@ -26,7 +26,6 @@
     "Small": "Küçük",
     "Rate": "Oranı",
     "Large": "Büyük",
-    "HR": "İK",
     "Layout": "Düzen",
     "Invoice": "Fatura",
     "Terms": "Şartlar",
@@ -224,5 +223,11 @@
     "The rate must be greater than 0.": "Oranın 0'dan büyük olması gerekir.",
     "Live Rate": "Canlı Oran",
     "The rate must be between 0 and 100.": "Oranın 0 ile 100 arasında olması gerekir.",
-    "Action Denied": "Eylem Reddedildi"
-}
+    "Action Denied": "Eylem Reddedildi",
+    "Website": "İnternet sitesi",
+    "Management": "Yönetim",
+    "Resources": "Kaynaklar",
+    "Personalization": "Kişiselleştirme",
+    "Company": "ŞİRKETİ",
+    "Finance": "Finans"
+}

resources/data/lang/zh.json

@@ -46,7 +46,6 @@
     "Quantity": "数量",
     "Large": "大",
     "Item Name": "物品名",
-    "HR": "HR",
     "Content": "内容",
     "Phone Number": "电话号码",
     "State \/ Province": "州\/省",
@@ -224,5 +223,11 @@
     "Action Denied": "操作被拒绝",
     "Parent Department": "家长部门",
     "The rate must be between 0 and 100.": "速率必须介于 0 和 100 之间。",
-    "The rate must be greater than 0.": "速率必须大于 0。"
-}
+    "The rate must be greater than 0.": "速率必须大于 0。",
+    "Finance": "财务",
+    "Website": "网站",
+    "Personalization": "个性化",
+    "Management": "管理",
+    "Company": "公司",
+    "Resources": "资源"
+}

resources/js/top-navigation.js

@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', () => {
+    for (const dropdown of document.querySelectorAll('.fi-topbar-dropdown, .fi-topbar-dropdown .fi-dropdown-trigger')) {
+        const observer = new MutationObserver((mutations) => {
+            for (const { attributeName } of mutations) {
+                if (attributeName === 'aria-expanded') {
+                    updateBorder(dropdown);
+                }
+            }
+        });
+
+        observer.observe(dropdown, { attributes: true });
+    }
+
+    document.querySelectorAll('.fi-topbar-item > a').forEach(item => {
+        item.addEventListener('mouseenter', () => updateBorderOnHover(true, item));
+        item.addEventListener('mouseleave', () => updateBorderOnHover(false, item));
+    });
+
+    insertBgDiv();
+
+    handleTopbarAndSidebarHover();
+});
+
+const updateBorder = (dropdown) => {
+    const activeItem = document.querySelector('.fi-topbar-item-active > *');
+    const hoveredItem = dropdown.querySelector('.fi-topbar-item > *');
+
+    if (activeItem && hoveredItem !== activeItem) {
+        activeItem.style.borderBottomColor = dropdown.getAttribute('aria-expanded') === 'true' ? 'transparent' : '';
+    }
+};
+
+const updateBorderOnHover = (isHovered, hoveredItem) => {
+    const activeItem = document.querySelector('.fi-topbar-item-active > *');
+    if (activeItem && hoveredItem !== activeItem) {
+        activeItem.style.borderBottomColor = isHovered ? 'transparent' : '';
+    }
+};
+
+const insertBgDiv = () => {
+    document.querySelectorAll('a.fi-topbar-dropdown-list-item').forEach(anchor => {
+        anchor.insertAdjacentHTML('beforeend', '<div class="bg"></div>');
+    });
+};
+
+const handleTopbarAndSidebarHover = () => {
+    const topbarNav = document.querySelector('.fi-topbar > nav');
+    const sidebarHeader = document.querySelector('.fi-sidebar-header');
+
+    const addHoveredClass = () => {
+        topbarNav.classList.add('topbar-hovered');
+        sidebarHeader.classList.add('topbar-hovered');
+    };
+
+    const removeHoveredClass = () => {
+        topbarNav.classList.remove('topbar-hovered');
+        sidebarHeader.classList.remove('topbar-hovered');
+    };
+
+    topbarNav.addEventListener('mouseenter', addHoveredClass);
+    sidebarHeader.addEventListener('mouseenter', addHoveredClass);
+    topbarNav.addEventListener('mouseleave', removeHoveredClass);
+    sidebarHeader.addEventListener('mouseleave', removeHoveredClass);
+};
+

resources/svg/currency-convert.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-    <path d="M10.25 7a.75.75 0 0 1 .75-.75h3.69l-.72-.72a.75.75 0 0 1 1.06-1.06l2 2a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l.72-.72h-3.69a.75.75 0 0 1-.75-.75Z" fill="currentColor"/>
-    <path d="M7.25 5.25a.75.75 0 0 0-1.5 0v.75h-.375a2.375 2.375 0 0 0 0 4.75h1.28a.875.875 0 1 1 0 1.75h-2.905a.75.75 0 0 0 0 1.5h1v.75a.75.75 0 0 0 1.5 0v-.75h.404a2.375 2.375 0 0 0 0-4.75h-1.279a.875.875 0 0 1 0-1.75h2.904a.75.75 0 1 0 0-1.5h-1.029v-.75Z" fill="currentColor"/>
-    <path d="M12.81 13.75h3.69a.75.75 0 0 0 0-1.5h-3.69l.72-.72a.75.75 0 1 0-1.06-1.06l-2 2a.75.75 0 0 0 0 1.06l2 2a.75.75 0 1 0 1.06-1.06l-.72-.72Z" fill="currentColor"/>
-</svg>

resources/views/vendor/filament-panels/components/topbar/index.blade.php

@@ -0,0 +1,214 @@
+@props([
+    'navigation',
+])
+
+<div
+    {{
+        $attributes->class([
+            'fi-topbar sticky top-0 z-20 overflow-x-clip',
+            'fi-topbar-with-navigation' => filament()->hasTopNavigation(),
+        ])
+    }}
+>
+    <nav
+        class="flex h-16 items-center gap-x-4 bg-white px-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 md:px-6 lg:px-8"
+    >
+        {{ \Filament\Support\Facades\FilamentView::renderHook('panels::topbar.start') }}
+
+        <x-filament::icon-button
+            color="gray"
+            icon="heroicon-o-bars-3"
+            icon-alias="panels::topbar.open-sidebar-button"
+            icon-size="lg"
+            :label="__('filament-panels::layout.actions.sidebar.expand.label')"
+            x-cloak
+            x-data="{}"
+            x-on:click="$store.sidebar.open()"
+            x-show="! $store.sidebar.isOpen"
+            @class([
+                'lg:hidden' => (! filament()->isSidebarFullyCollapsibleOnDesktop()) || filament()->isSidebarCollapsibleOnDesktop(),
+            ])
+        />
+
+        <x-filament::icon-button
+            color="gray"
+            icon="heroicon-o-x-mark"
+            icon-alias="panels::topbar.close-sidebar-button"
+            icon-size="lg"
+            :label="__('filament-panels::layout.actions.sidebar.collapse.label')"
+            x-cloak
+            x-data="{}"
+            x-on:click="$store.sidebar.close()"
+            x-show="$store.sidebar.isOpen"
+            class="lg:hidden"
+        />
+
+        @if (filament()->hasTopNavigation())
+            <div class="me-6 hidden lg:flex">
+                @if ($homeUrl = filament()->getHomeUrl())
+                    <a {{ \Filament\Support\generate_href_html($homeUrl) }}>
+                        <x-filament-panels::logo />
+                    </a>
+                @else
+                    <x-filament-panels::logo />
+                @endif
+            </div>
+
+            @if (filament()->hasTenancy())
+                <x-filament-panels::tenant-menu class="hidden lg:block" />
+            @endif
+
+            @if (filament()->hasNavigation())
+                <ul class="me-4 hidden items-center gap-x-4 lg:flex">
+                    @foreach($navigation as $group)
+                        @if ($group->getLabel() === null)
+                            @foreach ($group->getItems() as $item)
+                                <x-filament-panels::topbar.item
+                                    :active="$item->isActive()"
+                                    :active-icon="$item->getActiveIcon()"
+                                    :badge="$item->getBadge()"
+                                    :badge-color="$item->getBadgeColor()"
+                                    :icon="$item->getIcon()"
+                                    :should-open-url-in-new-tab="$item->shouldOpenUrlInNewTab()"
+                                    :url="$item->getUrl()"
+                                >
+                                    {{ $item->getLabel() }}
+                                </x-filament-panels::topbar.item>
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    @foreach ($navigation as $group)
+                        @php
+                            $groupLabel = $group->getLabel();
+                            $groupItems = collect($group->getItems());
+                            $subgroups = $groupItems->groupBy(fn(\Filament\Navigation\NavigationItem $item) => $item->getParentItem())->filter(fn($subgroup, $key) => filled($key));
+                            $standaloneItems = $groupItems->reject(fn(\Filament\Navigation\NavigationItem $item) => filled($item->getParentItem()));
+                            $itemsCount = $groupItems->count();
+                        @endphp
+
+                        @if ($groupLabel)
+                            <x-filament::dropdown
+                                offset="0"
+                                width="max-w-fit"
+                                placement="bottom-start"
+                                teleport
+                                x-on:mouseenter="open"
+                                x-on:mouseleave="close"
+                                :attributes="
+                                    \Filament\Support\prepare_inherited_attributes($attributes)
+                                    ->class(['fi-topbar-dropdown'])
+                                "
+                            >
+                                <x-slot name="trigger">
+                                    <x-filament-panels::topbar.item
+                                        :active="$group->isActive()"
+                                        :icon="$group->getIcon()"
+                                    >
+                                        {{ $groupLabel }}
+                                    </x-filament-panels::topbar.item>
+                                </x-slot>
+
+                                <x-filament::dropdown.list>
+                                    @if($subgroups->isNotEmpty() || $standaloneItems->isNotEmpty())
+                                        <ul class="menu-groups">
+                                            @foreach($subgroups as $subgroupTitle => $subgroupItems)
+                                                <li class="menu-group cols-1">
+                                                    <div class="submenu-wrap">
+                                                        <div class="menu-label">{{ $subgroupTitle }}</div>
+                                                        <ul class="submenu cols-1">
+                                                            @foreach($subgroupItems as $item)
+                                                                <li class="menu-item cols-1">
+                                                                    <x-filament::dropdown.list.item
+                                                                        @class(['fi-topbar-dropdown-list-item' => $itemsCount > 1])
+                                                                        :badge="$item->getBadge()"
+                                                                        :badge-color="$item->getBadgeColor()"
+                                                                        :href="$item->getUrl()"
+                                                                        :icon="$item->isActive() ? ($item->getActiveIcon() ?? $item->getIcon()) : $item->getIcon()"
+                                                                        tag="a"
+                                                                        :target="$item->shouldOpenUrlInNewTab() ? '_blank' : null"
+                                                                    >
+                                                                        {{ $item->getLabel() }}
+                                                                    </x-filament::dropdown.list.item>
+                                                                </li>
+                                                            @endforeach
+                                                        </ul>
+                                                    </div>
+                                                </li>
+                                            @endforeach
+                                            @if($standaloneItems->isNotEmpty())
+                                                <li class="menu-group cols-1">
+                                                    <div class="submenu-wrap">
+                                                        <div class="menu-label-invisible-spacer"></div>
+                                                        <ul class="submenu cols-1">
+                                                            @foreach($itemsWithoutSubgroup as $item)
+                                                                <li class="menu-item cols-1">
+                                                                    <x-filament::dropdown.list.item
+                                                                        @class([
+                                                                            'fi-topbar-dropdown-list-item' => $itemsCount > 1,
+                                                                        ])
+                                                                        :badge="$item->getBadge()"
+                                                                        :badge-color="$item->getBadgeColor()"
+                                                                        :href="$item->getUrl()"
+                                                                        :icon="$item->isActive() ? ($item->getActiveIcon() ?? $item->getIcon()) : $item->getIcon()"
+                                                                        tag="a"
+                                                                        :target="$item->shouldOpenUrlInNewTab() ? '_blank' : null"
+                                                                    >
+                                                                        {{ $item->getLabel() }}
+                                                                    </x-filament::dropdown.list.item>
+                                                                </li>
+                                                            @endforeach
+                                                        </ul>
+                                                    </div>
+                                                </li>
+                                            @endif
+                                        </ul>
+                                    @else
+                                        @foreach ($group->getItems() as $item)
+                                            <x-filament::dropdown.list.item
+                                                @class([
+                                                    'fi-topbar-dropdown-list-item' => $itemsCount > 1,
+                                                ])
+                                                :badge="$item->getBadge()"
+                                                :badge-color="$item->getBadgeColor()"
+                                                :href="$item->getUrl()"
+                                                :icon="$item->isActive() ? ($item->getActiveIcon() ?? $item->getIcon()) : $item->getIcon()"
+                                                tag="a"
+                                                :target="$item->shouldOpenUrlInNewTab() ? '_blank' : null"
+                                            >
+                                                {{ $item->getLabel() }}
+                                            </x-filament::dropdown.list.item>
+                                        @endforeach
+                                    @endif
+                                </x-filament::dropdown.list>
+                            </x-filament::dropdown>
+                        @endif
+                    @endforeach
+                </ul>
+            @endif
+        @endif
+
+        <div
+            x-persist="topbar.end"
+            class="ms-auto flex items-center gap-x-4"
+        >
+            {{ \Filament\Support\Facades\FilamentView::renderHook('panels::global-search.before') }}
+
+            @if (filament()->isGlobalSearchEnabled())
+                @livewire(Filament\Livewire\GlobalSearch::class, ['lazy' => true])
+            @endif
+
+            {{ \Filament\Support\Facades\FilamentView::renderHook('panels::global-search.after') }}
+
+            @if (filament()->auth()->check())
+                @if (filament()->hasDatabaseNotifications())
+                    @livewire(Filament\Livewire\DatabaseNotifications::class, ['lazy' => true])
+                @endif
+
+                <x-filament-panels::user-menu />
+            @endif
+        </div>
+
+        {{ \Filament\Support\Facades\FilamentView::renderHook('panels::topbar.end') }}
+    </nav>
+</div>