Merge pull request #14962 from ModestasV/adding-documentation-images

Added sample generated image

docs-assets/app/app/Livewire/Topbar.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire;
+
+use Filament\Navigation\MenuItem;
+use Filament\Pages\Page;
+
+class Topbar extends Page
+{
+    protected static string $view = 'livewire.topbar';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->userMenuItems([
+                MenuItem::make()
+                    ->label('Settings')
+                    ->url(fn (): string => '#')
+                    ->icon('heroicon-o-cog-6-tooth'),
+            ]);
+    }
+}

docs-assets/app/resources/views/livewire/topbar.blade.php

@@ -0,0 +1,3 @@
+<div>
+
+</div>

docs-assets/app/routes/web.php

@@ -8,6 +8,7 @@ use App\Livewire\Infolists\EntriesDemo;
 use App\Livewire\Infolists\LayoutDemo as InfolistsLayoutDemo;
 use App\Livewire\NotificationsDemo;
 use App\Livewire\TablesDemo;
+use App\Livewire\Topbar;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -29,3 +30,4 @@ Route::get('/infolists/entries', EntriesDemo::class);
 Route::get('/infolists/layout', InfolistsLayoutDemo::class);
 Route::get('/notifications', NotificationsDemo::class);
 Route::get('/tables', TablesDemo::class);
+Route::get('/topbar', Topbar::class);

docs-assets/screenshots/schema.js

@@ -1919,6 +1919,23 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'panels/navigation/user-menu': {
+        url: 'topbar',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 1080, height: 540, left: 1080, top: 0 })
+        },
+        before: async (page) => {
+            await page.click('.fi-user-menu button')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',

packages/panels/docs/06-navigation.md

@@ -460,6 +460,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/user-menu" alt="User menu with custom menu item" version="3.x" />
+
 ### Customizing the profile link
 
 To customize the user profile link at the start of the user menu, register a new item with the `profile` array key: