From a499075a5dd5f970e21eca3a6066165a45a8d63d Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Sat, 7 Mar 2026 23:53:59 +0700 Subject: [PATCH] feat: Integrate mobile bottom navigation for Filament admin panel, enhancing user experience with a thumb-friendly interface and seamless navigation. --- app/Providers/Filament/AdminPanelProvider.php | 27 +++ composer.json | 1 + composer.lock | 79 +++++++- .../views/vendor/mobile-bottom-nav/.gitkeep | 0 .../bottom-navigation.blade.php | 174 ++++++++++++++++++ 5 files changed, 280 insertions(+), 1 deletion(-) create mode 100644 resources/views/vendor/mobile-bottom-nav/.gitkeep create mode 100644 resources/views/vendor/mobile-bottom-nav/bottom-navigation.blade.php diff --git a/app/Providers/Filament/AdminPanelProvider.php b/app/Providers/Filament/AdminPanelProvider.php index fa2eaf4..62c60cf 100644 --- a/app/Providers/Filament/AdminPanelProvider.php +++ b/app/Providers/Filament/AdminPanelProvider.php @@ -15,6 +15,8 @@ use Filament\PanelProvider; use Filament\Support\Colors\Color; use Filament\Widgets\AccountWidget; +use Hammadzafar05\MobileBottomNav\MobileBottomNav; +use Hammadzafar05\MobileBottomNav\MobileBottomNavItem; use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse; use Illuminate\Cookie\Middleware\EncryptCookies; use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken; @@ -83,6 +85,31 @@ public function panel(Panel $panel): Panel '#f97316', '#10b981', ]), + + MobileBottomNav::make() + ->items([ + MobileBottomNavItem::make('Dasbor') + ->icon('heroicon-m-home') + ->activeIcon('heroicon-s-home') + ->url('/admin') + ->isActive(fn () => request()->is('admin')), + + MobileBottomNavItem::make('Produksi Telur') + ->icon('heroicon-m-rectangle-group') + ->url('/admin/manage/egg-collections') + ->isActive(fn () => request()->is('admin/manage/egg-collections')), + + MobileBottomNavItem::make('Pesanan') + ->icon('heroicon-m-shopping-cart') + ->url('/admin/manage/orders') + ->isActive(fn () => request()->is('admin/manage/orders')), + + MobileBottomNavItem::make('Barang Tertunda') + ->icon('heroicon-m-clock') + ->url('/admin/manage/delayed-goods') + ->isActive(fn () => request()->is('admin/manage/delayed-goods')), + ]) + ->moreButton(false), ]) ->navigationGroups([ 'Master', diff --git a/composer.json b/composer.json index 91f3c65..aa9b970 100644 --- a/composer.json +++ b/composer.json @@ -12,6 +12,7 @@ "diogogpinto/filament-auth-ui-enhancer": "^2.0", "filament/filament": "^4.0", "filament/spatie-laravel-media-library-plugin": "^4.0", + "hammadzafar05/mobile-bottom-nav": "^1.0", "husam-tariq/filament-timepicker": "^4.0", "laravel/framework": "^12.0", "laravel/tinker": "^2.10.1", diff --git a/composer.lock b/composer.lock index a0f0045..4f11e4d 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "24ee72a4926fdacc5b6a2963d6040ab4", + "content-hash": "d6cf9ab33f7e87200635eb1a7e4792dc", "packages": [ { "name": "akaunting/laravel-money", @@ -2529,6 +2529,83 @@ ], "time": "2025-08-22T14:27:06+00:00" }, + { + "name": "hammadzafar05/mobile-bottom-nav", + "version": "v1.0.2", + "source": { + "type": "git", + "url": "https://github.com/hammadzafar05/mobile-bottom-nav.git", + "reference": "740d2020f6dc7d6e2db466c221d11ee1d829feaa" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/hammadzafar05/mobile-bottom-nav/zipball/740d2020f6dc7d6e2db466c221d11ee1d829feaa", + "reference": "740d2020f6dc7d6e2db466c221d11ee1d829feaa", + "shasum": "" + }, + "require": { + "filament/filament": "^4.0 || ^5.0", + "php": "^8.2", + "spatie/laravel-package-tools": "^1.15.0" + }, + "require-dev": { + "larastan/larastan": "^3.0", + "laravel/pint": "^1.0", + "nunomaduro/collision": "^8.0", + "orchestra/testbench": "^9.0|^10.0", + "pestphp/pest": "^3.7|^4.0", + "pestphp/pest-plugin-arch": "^3.0|^4.0", + "pestphp/pest-plugin-laravel": "^3.0|^4.0", + "pestphp/pest-plugin-livewire": "^3.0|^4.0", + "rector/rector": "^2.0", + "spatie/laravel-ray": "^1.26" + }, + "type": "library", + "extra": { + "laravel": { + "providers": [ + "Hammadzafar05\\MobileBottomNav\\MobileBottomNavServiceProvider" + ] + } + }, + "autoload": { + "psr-4": { + "Hammadzafar05\\MobileBottomNav\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Hammad Zafar", + "email": "hammadarain05@gmail.com", + "role": "Developer" + } + ], + "description": "A thumb-friendly mobile bottom navigation bar for Filament panels. It programmatically integrates with the Filament navigation registry to provide a seamless, ergonomic mobile experience with full support for dark mode and safe-area insets.", + "homepage": "https://github.com/hammadzafar05/mobile-bottom-nav", + "keywords": [ + "filament", + "filament-plugin", + "filamentphp", + "hammadzafar05", + "laravel", + "mobile-bottom-nav" + ], + "support": { + "issues": "https://github.com/hammadzafar05/mobile-bottom-nav/issues", + "source": "https://github.com/hammadzafar05/mobile-bottom-nav" + }, + "funding": [ + { + "url": "https://github.com/hammadzafar05", + "type": "github" + } + ], + "time": "2026-02-24T07:51:29+00:00" + }, { "name": "husam-tariq/filament-timepicker", "version": "v4.0.2", diff --git a/resources/views/vendor/mobile-bottom-nav/.gitkeep b/resources/views/vendor/mobile-bottom-nav/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/resources/views/vendor/mobile-bottom-nav/bottom-navigation.blade.php b/resources/views/vendor/mobile-bottom-nav/bottom-navigation.blade.php new file mode 100644 index 0000000..874e0ea --- /dev/null +++ b/resources/views/vendor/mobile-bottom-nav/bottom-navigation.blade.php @@ -0,0 +1,174 @@ +@php + use function Filament\Support\generate_href_html; + use function Filament\Support\generate_icon_html; + use Filament\Support\Enums\IconSize; +@endphp + + + +