Replace desktop nav with unified mobile menu on all screen sizes

Remove the inline desktop navigation links and use the mobile menu
popover everywhere. On lg+ screens, the theme toggle, search field,
and Bifrost button remain visible in the navbar. The popover renders
as a constrained dropdown anchored to the menu button on lg+ and
full-screen on smaller viewports, with scroll-aware positioning to
stay below the sticky navbar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: simonhamp

app/Filament/Resources/SupportTicketResource/Pages/ViewSupportTicket.php

@@ -6,6 +6,7 @@
 use App\Filament\Resources\SupportTicketResource\Widgets\TicketRepliesWidget;
 use App\SupportTicket\Status;
 use Filament\Actions;
+use Filament\Forms\Components\Select;
 use Filament\Resources\Pages\ViewRecord;
 
 class ViewSupportTicket extends ViewRecord
@@ -19,7 +20,7 @@ protected function getHeaderActions(): array
                 ->label('Update Status')
                 ->icon('heroicon-o-arrow-path')
                 ->form([
-                    \Filament\Forms\Components\Select::make('status')
+                    Select::make('status')
                         ->label('Status')
                         ->options(collect(Status::cases())->mapWithKeys(fn (Status $s) => [$s->value => ucwords(str_replace('_', ' ', $s->value))]))
                         ->required(),

app/Livewire/Customer/Support/Create.php

@@ -17,6 +17,11 @@
 #[Title('Submit a Request')]
 class Create extends Component
 {
+    public function boot(): void
+    {
+        abort_unless(auth()->user()->hasUltraAccess(), 403);
+    }
+
     #[Locked]
     public int $currentStep = 1;
 

app/Livewire/Customer/Support/Index.php

@@ -17,6 +17,11 @@ class Index extends Component
 {
     use WithPagination;
 
+    public function boot(): void
+    {
+        abort_unless(auth()->user()->hasUltraAccess(), 403);
+    }
+
     #[Computed]
     public function supportTickets(): LengthAwarePaginator
     {

app/Livewire/Customer/Support/Show.php

@@ -21,6 +21,7 @@ class Show extends Component
 
     public function mount(SupportTicket $supportTicket): void
     {
+        abort_unless(auth()->user()->hasUltraAccess(), 403);
         $this->authorize('view', $supportTicket);
 
         $supportTicket->load(['user', 'replies.user']);

resources/views/components/layout.blade.php

@@ -102,13 +102,7 @@
                 return ! this.scrolled && this.width >= 1024
             },
         }"
-        x-resize="
-            width = $width
-            if (window.matchMedia('(min-width: 80rem)').matches) {
-                showMobileMenu = false
-                showDocsMenu = false
-            }
-        "
+        x-resize="width = $width"
         x-init="
             window.addEventListener('scroll', () => {
                 scrolled = window.scrollY > 1

resources/views/components/layouts/dashboard.blade.php

@@ -111,9 +111,11 @@ class="min-h-screen bg-white font-poppins antialiased dark:bg-zinc-900 dark:text
                     Purchase History
                 </flux:sidebar.item>
 
-                <flux:sidebar.item icon="chat-bubble-left-right" href="{{ route('customer.support.tickets') }}" :current="request()->routeIs('customer.support.*')">
-                    Support Tickets
-                </flux:sidebar.item>
+                @if(auth()->user()->hasUltraAccess())
+                    <flux:sidebar.item icon="chat-bubble-left-right" href="{{ route('customer.support.tickets') }}" :current="request()->routeIs('customer.support.*')">
+                        Support Tickets
+                    </flux:sidebar.item>
+                @endif
 
                 <flux:sidebar.group expandable :expanded="false" heading="Community" class="mt-4 grid">
                     <flux:sidebar.item href="{{ route('customer.showcase.index') }}" :current="request()->routeIs('customer.showcase.*')">

resources/views/components/navbar/mobile-menu.blade.php

@@ -1,19 +1,22 @@
 <div
     x-init="
         () => {
+            const updatePopoverTop = () => {
+                const nav = $refs.menuButton.closest('nav');
+                if (nav && $refs.mobilePopover.matches(':popover-open')) {
+                    $refs.mobilePopover.style.top = (nav.getBoundingClientRect().bottom + 8) + 'px';
+                }
+            };
+
             // Sync Popover ➜ Alpine
             $refs.mobilePopover.addEventListener('toggle', (e) => {
                 showMobileMenu = $refs.mobilePopover.matches(':popover-open')
 
-                // Scroll past the banner when menu opens
                 if (e.newState === 'open') {
-                    const banner = document.querySelector('[data-site-banner]')
-                    if (banner) {
-                        const bannerBottom = banner.offsetTop + banner.offsetHeight
-                        if (window.scrollY < bannerBottom) {
-                            window.scrollTo({ top: bannerBottom, behavior: 'smooth' })
-                        }
-                    }
+                    updatePopoverTop()
+                    window.addEventListener('scroll', updatePopoverTop, { passive: true })
+                } else {
+                    window.removeEventListener('scroll', updatePopoverTop)
                 }
             })
 
@@ -27,10 +30,11 @@
             })
         }
     "
-    class="relative z-40 xl:hidden"
+    class="relative z-40"
 >
     <button
         type="button"
+        x-ref="menuButton"
         popovertarget="mobile-menu-popover"
         popovertargetaction="toggle"
         class="-m-1.5 grid size-9 place-items-center overflow-hidden focus:ring-0 focus:outline-none"
@@ -79,7 +83,8 @@ class="-ml-2.5 h-5 w-0.5 -rotate-45 rounded-full bg-current transition duration-
         role="dialog"
         aria-modal="true"
         aria-label="Site menu"
-        class="fixed top-20 right-3 bottom-3.5 left-3 w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-200/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
+        x-bind:style="width >= 1024 ? 'right:' + (window.innerWidth - $refs.menuButton.getBoundingClientRect().right - 6) + 'px' : ''"
+        class="fixed m-0 inset-[unset] inset-x-3 bottom-3.5 w-auto -translate-y-3 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-200/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition-[opacity,transform] transition-discrete duration-300 open:translate-y-0 open:opacity-100 min-[500px]:inset-x-3.5 lg:bottom-auto lg:left-auto lg:w-md dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-3 starting:open:opacity-0"
     >
         <div class="@container flex flex-col overflow-hidden px-6 pt-4 pb-6">
             <nav

resources/views/components/navigation-bar.blade.php

@@ -70,225 +70,29 @@ class="-mt-px size-3.5"
 
         {{-- Right side --}}
         <div class="flex items-center gap-2.5">
-            {{-- Mobile menu --}}
-            <x-navbar.mobile-menu />
+            {{-- Theme toggle (visible on large screens) --}}
+            <div class="hidden lg:block">
+                <x-navbar.theme-toggle />
+            </div>
 
-            {{-- Desktop menu --}}
+            {{-- Doc search (visible on large screens) --}}
             <div
-                class="hidden items-center gap-2.5 text-sm xl:flex"
-                aria-label="Primary navigation"
+                class="hidden -mr-0.5 transition-all duration-200 ease-in-out will-change-transform lg:block"
             >
-                {{-- Link --}}
-                <a
-                    href="{{ route('blog') }}"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('blog*'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('blog*'),
-                    ])
-                    aria-current="{{ request()->routeIs('blog*') ? 'page' : 'false' }}"
-                >
-                    Blog
-                </a>
-
-                {{-- Decorative circle --}}
-                <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
-                ></div>
-
-                {{-- Link --}}
-                {{-- <a
-                    href="https://shop.nativephp.com/"
-                    class="opacity-60 transition duration-200 hover:opacity-100"
-                >
-                    Swag
-                </a> --}}
-
-                {{-- Decorative circle --}}
-                {{-- <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
-                ></div> --}}
-
-                {{-- Link --}}
-                <a
-                    href="/partners"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('partners'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('partners'),
-                    ])
-                    aria-current="{{ request()->routeIs('partners') ? 'page' : 'false' }}"
-                >
-                    Partners
-                </a>
-
-                {{-- Decorative circle --}}
-                <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
-                ></div>
-
-                {{-- Link --}}
-                <a
-                    href="/sponsor"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('sponsoring'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('sponsoring'),
-                    ])
-                    aria-current="{{ request()->routeIs('sponsoring') ? 'page' : 'false' }}"
-                >
-                    Sponsor
-                </a>
-
-                {{-- Decorative circle --}}
-                <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
-                ></div>
-
-                {{-- Link --}}
-                <a
-                    href="{{ route('build-my-app') }}"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('build-my-app'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('build-my-app'),
-                    ])
-                    aria-current="{{ request()->routeIs('build-my-app') ? 'page' : 'false' }}"
-                >
-                    Develop
-                </a>
-
-                {{-- Decorative circle --}}
                 <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
+                    id="docsearch-desktop"
+                    x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
+                    aria-label="Search documentation"
                 ></div>
+            </div>
 
-                {{-- Link --}}
-                <a
-                    href="{{ route('pricing') }}"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('pricing'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('pricing'),
-                    ])
-                    aria-current="{{ request()->routeIs('pricing') ? 'page' : 'false' }}"
-                >
-                    <span class="inline-flex items-center gap-1.5">
-                        Ultra
-                        <span class="rounded-full bg-emerald-500 px-1.5 py-px text-[10px] font-bold leading-tight text-white">New</span>
-                    </span>
-                </a>
-
-                {{-- Decorative circle --}}
-                <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
-                ></div>
-
-                {{-- Link --}}
-                <a
-                    href="{{ route('course') }}"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('course'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('course'),
-                    ])
-                    aria-current="{{ request()->routeIs('course') ? 'page' : 'false' }}"
-                >
-                    <span class="inline-flex items-center gap-1.5">
-                        Learn
-                        <span class="rounded-full bg-emerald-500 px-1.5 py-px text-[10px] font-bold leading-tight text-white">New</span>
-                    </span>
-                </a>
-
-                {{-- Decorative circle --}}
-                <div
-                    class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                    aria-hidden="true"
-                ></div>
-
-                {{-- Link --}}
-                <a
-                    href="{{ route('support.index') }}"
-                    @class([
-                        'transition duration-200',
-                        'font-medium' => request()->routeIs('support.*'),
-                        'opacity-60 hover:opacity-100' => ! request()->routeIs('support.*'),
-                    ])
-                    aria-current="{{ request()->routeIs('support.*') ? 'page' : 'false' }}"
-                >
-                    <span class="inline-flex items-center gap-1.5">
-                        Support
-                        <span class="rounded-full bg-emerald-500 px-1.5 py-px text-[10px] font-bold leading-tight text-white">New</span>
-                    </span>
-                </a>
-
-                {{-- Login/Logout --}}
-                @feature(App\Features\ShowAuthButtons::class)
-                    {{-- Decorative circle --}}
-                    <div
-                        class="size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 dark:opacity-60"
-                        aria-hidden="true"
-                    ></div>
-
-                    @auth
-                        <a
-                            href="{{ route('dashboard') }}"
-                            class="opacity-60 transition duration-200 hover:opacity-100"
-                            title="Logged in as {{ auth()->user()->email }}"
-                        >
-                            Dashboard
-                        </a>
-                    @else
-                        <a
-                            href="{{ route('customer.login') }}"
-                            class="opacity-60 transition duration-200 hover:opacity-100"
-                        >
-                            Dashboard
-                        </a>
-                    @endauth
-                @endfeature
-
-                {{-- Cart Icon --}}
-                @feature(App\Features\ShowPlugins::class)
-                    @if ($cartCount > 0)
-                        <a
-                            href="{{ route('cart.show') }}"
-                            class="relative opacity-60 transition duration-200 hover:opacity-100"
-                            title="View cart"
-                        >
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
-                            </svg>
-                            <span class="absolute -top-1.5 -right-1.5 flex size-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-bold text-white">
-                                {{ $cartCount > 9 ? '9+' : $cartCount }}
-                            </span>
-                            <span class="sr-only">Cart ({{ $cartCount }} items)</span>
-                        </a>
-                    @endif
-                @endfeature
-
-                {{-- Theme toggle --}}
-                <x-navbar.theme-toggle />
-
-                {{-- Doc search --}}
-                <div
-                    class="-mr-0.5 transition-all duration-200 ease-in-out will-change-transform"
-                >
-                    <div
-                        id="docsearch-desktop"
-                        x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
-                        aria-label="Search documentation"
-                    ></div>
-                </div>
-
+            {{-- Bifrost button (visible on large screens) --}}
+            <div class="hidden lg:block">
                 <x-bifrost-button small />
             </div>
+
+            {{-- Menu --}}
+            <x-navbar.mobile-menu />
         </div>
     </div>
 </nav>