Components

Profile

Basics

Using the Profile component, you can display a user's profile card with a logout button, a link to the profile, and an additional menu.

make(
    ?string $route = null,
    ?string $logOutRoute = null,
    ?Closure $avatar = null,
    ?Closure $nameOfUser = null,
    ?Closure $username = null,
    ?string $guard = null,
)
make(
    ?string $route = null,
    ?string $logOutRoute = null,
    ?Closure $avatar = null,
    ?Closure $nameOfUser = null,
    ?Closure $username = null,
    ?string $guard = null,
)
  • $route - URL page with Profile,
  • $logOutRoute - URL for Logout,
  • $avatar - Avatar,
  • $nameOfUser - Name,
  • $username - Nickname,
  • $guard - Guard.
Profile::make()
Profile::make()
<x-moonshine::layout.profile
    route="/admin/profile"
    log-out-route="/logout"
    avatar="/vendor/moonshine/avatar.jpg"
    name-of-user="Admin"
    username="admin@getmoonshine.app"
>
</x-moonshine::layout.profile>
<x-moonshine::layout.profile
    route="/admin/profile"
    log-out-route="/logout"
    avatar="/vendor/moonshine/avatar.jpg"
    name-of-user="Admin"
    username="admin@getmoonshine.app"
>
</x-moonshine::layout.profile>

Avatar placeholder

Profile::make()->avatarPlaceholder('https://robohash.org/username.png')
Profile::make()->avatarPlaceholder('https://robohash.org/username.png')
Profile::make()->menu([
    ActionButton::make('Dashboard', '/admin')->icon('home-modern'),
])
Profile::make()->menu([
    ActionButton::make('Dashboard', '/admin')->icon('home-modern'),
])
<x-moonshine::layout.profile
    route="/admin/profile"
    log-out-route="/logout"
    avatar="/vendor/moonshine/avatar.jpg"
    name-of-user="Admin"
    username="admin@getmoonshine.app"
>
    <x-slot:before></x-slot:before>
    <x-slot:after></x-slot:after>
 
    <x-slot:menu>
        <ul class="dropdown-menu">
            <li class="dropdown-menu-item p-2">
                <x-moonshine::link-native href="/admin/profile">
                    Profile
                </x-moonshine::link-native>
            </li>
        </ul>
    </x-slot:menu>
</x-moonshine::layout.profile>
<x-moonshine::layout.profile
    route="/admin/profile"
    log-out-route="/logout"
    avatar="/vendor/moonshine/avatar.jpg"
    name-of-user="Admin"
    username="admin@getmoonshine.app"
>
    <x-slot:before></x-slot:before>
    <x-slot:after></x-slot:after>
 
    <x-slot:menu>
        <ul class="dropdown-menu">
            <li class="dropdown-menu-item p-2">
                <x-moonshine::link-native href="/admin/profile">
                    Profile
                </x-moonshine::link-native>
            </li>
        </ul>
    </x-slot:menu>
</x-moonshine::layout.profile>

Fragments

The Profile component is placed inside a Fragment, due to which the profile data is updated without reloading the page when the user changes. If necessary, you can manually restart the update of the profile block by raising the JSEvents event on the profile fragment.

Example with update from controller method:

public function saveElement(CrudRequestContract $request): JsonResponse
{
    //...
    return JsonResponse::make()->events([
        AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'profile'),
    ]);
}
public function saveElement(CrudRequestContract $request): JsonResponse
{
    //...
    return JsonResponse::make()->events([
        AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'profile'),
    ]);
}