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

@@ -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',

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",

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",

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
+
+<style data-navigate-track>
+    .fi-bottom-nav {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 20;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        height: 4rem;
+        padding-bottom: env(safe-area-inset-bottom, 0px);
+        border-top-width: 1px;
+        border-top-style: solid;
+        background-color: #ffffff;
+        border-top-color: var(--gray-200);
+    }
+
+    .dark .fi-bottom-nav {
+        background-color: var(--gray-900);
+        border-top-color: var(--gray-700);
+    }
+
+    .fi-bottom-nav-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        gap: 0.25rem;
+        padding: 0.5rem 0;
+        border: none;
+        background: none;
+        text-decoration: none;
+        cursor: pointer;
+        position: relative;
+        -webkit-tap-highlight-color: transparent;
+        color: var(--gray-500);
+    }
+
+    .dark .fi-bottom-nav-item {
+        color: var(--gray-400);
+    }
+
+    .fi-bottom-nav-item.fi-active {
+        color: var(--primary-600);
+    }
+
+    .dark .fi-bottom-nav-item.fi-active {
+        color: var(--primary-400);
+    }
+
+    .fi-bottom-nav-label {
+        font-size: 0.625rem;
+        line-height: 1;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        text-align: center;
+        padding: 0 0.25rem;
+    }
+
+    .fi-bottom-nav-icon-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .fi-bottom-nav-badge {
+        position: absolute;
+        top: -0.25rem;
+        right: -0.5rem;
+        min-width: 1rem;
+        height: 1rem;
+        border-radius: 9999px;
+        color: #fff;
+        font-size: 0.625rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.25rem;
+        line-height: 1;
+    }
+
+    .fi-bottom-nav-badge-dot {
+        position: absolute;
+        top: -0.125rem;
+        right: -0.125rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 9999px;
+    }
+
+    @media (min-width: 1024px) {
+        .fi-bottom-nav {
+            display: none !important;
+        }
+
+        .fi-main {
+            padding-bottom: 0 !important;
+        }
+    }
+
+    @media (max-width: 1023px) {
+        .fi-main {
+            padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
+        }
+    }
+</style>
+
+<nav
+    x-data="{}"
+    x-show="! $store.sidebar.isOpen"
+    x-transition:leave="transition ease-in duration-150"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    class="fi-bottom-nav"
+    aria-label="Bottom navigation"
+>
+    @foreach ($items as $item)
+        @php
+            $isActive = $item->isActiveState();
+            $icon = $isActive && $item->getActiveIcon() ? $item->getActiveIcon() : $item->getIcon();
+            $badge = $item->getBadge();
+            $badgeColor = $item->getBadgeColor() ?? 'primary';
+            $badgeCssColor = is_string($badgeColor) ? "var(--{$badgeColor}-500)" : 'var(--primary-500)';
+        @endphp
+
+        <a
+            {{ generate_href_html($item->getUrl()) }}
+            @class(['fi-bottom-nav-item', 'fi-active' => $isActive])
+            @if ($isActive) aria-current="page" @endif
+        >
+            <span class="fi-bottom-nav-icon-wrapper">
+                {{ generate_icon_html($icon, size: IconSize::Large) }}
+
+                @if ($badge !== null && $badge !== '')
+                    @if (is_numeric($badge))
+                        <span class="fi-bottom-nav-badge" style="background-color: {{ $badgeCssColor }}">{{ $badge }}</span>
+                    @else
+                        <span class="fi-bottom-nav-badge-dot" style="background-color: {{ $badgeCssColor }}"></span>
+                    @endif
+                @endif
+            </span>
+
+            <span class="fi-bottom-nav-label">{{ $item->getLabel() }}</span>
+        </a>
+    @endforeach
+
+    @if ($moreButtonEnabled)
+        <button
+            type="button"
+            x-on:click="$store.sidebar.open()"
+            class="fi-bottom-nav-item"
+            aria-label="{{ $moreButtonLabel }}"
+        >
+            <span class="fi-bottom-nav-icon-wrapper">
+                {{ generate_icon_html('heroicon-o-bars-3', size: IconSize::Large) }}
+            </span>
+
+            <span class="fi-bottom-nav-label">{{ $moreButtonLabel }}</span>
+        </button>
+    @endif
+</nav>