Appearance

LayoutBuilder

Publishing a template

To change the structure of the template, you must use LayoutBuilder.

The first step is to publish the template modification class using the console command.

php artisan moonshine:publish layout 
php artisan moonshine:publish layout

To select the appropriate item, you must use the space key.

After publishing Layout, the MoonShineLayout.php class will appear in the app/MoonShine directory.

namespace App\MoonShine; use MoonShine\Components\Layout\{Content, Flash, Footer, Header, LayoutBlock, LayoutBuilder, Menu, Profile, Search, Sidebar}; use MoonShine\Components\When; use MoonShine\Contracts\MoonShineLayoutContract; final class MoonShineLayout implements MoonShineLayoutContract { public static function build(): LayoutBuilder { return LayoutBuilder::make([ Sidebar::make([ Menu::make()->customAttributes(['class' => 'mt-2']), When::make( static fn() => config('moonshine.auth.enable', true), static fn() => [Profile::make(withBorder: true)] ), ]), LayoutBlock::make([ Flash::make(), Header::make([ Search::make(), ]), Content::make(), Footer::make()->copyright(fn (): string => << CutCode HTML)->menu([ 'https://moonshine.cutcode.dev' => 'Documentation', ]), ])->customAttributes(['class' => 'layout-page']), ]); } } 
namespace App\MoonShine;
 
use MoonShine\Components\Layout\{Content,
    Flash,
    Footer,
    Header,
    LayoutBlock,
    LayoutBuilder,
    Menu,
    Profile,
    Search,
    Sidebar};
use MoonShine\Components\When;
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            Sidebar::make([
                Menu::make()->customAttributes(['class' => 'mt-2']),
                When::make(
                    static fn() => config('moonshine.auth.enable', true),
                    static fn() => [Profile::make(withBorder: true)]
                ),
            ]),
            LayoutBlock::make([
                Flash::make(),
                Header::make([
                    Search::make(),
                ]),
                Content::make(),
                Footer::make()->copyright(fn (): string => <<<HTML
                        &copy; 2021-2023 Made with ?? by
                        <a href="https://cutcode.dev"
                            class="font-semibold text-primary hover:text-secondary"
                            target="_blank"
                        >
                            CutCode
                        </a>
                    HTML)->menu([
                    'https://moonshine.cutcode.dev' => 'Documentation',
                ]),
            ])->customAttributes(['class' => 'layout-page']),
        ]);
    }
}

Top Menu

By default, MoonShine has a top menu component.Let's take a look at how to replace Sidebar with TopBar in LayoutBuilder.

namespace App\MoonShine; use MoonShine\Components\Layout\{Content, Flash, Footer, Header, LayoutBlock, LayoutBuilder, Menu, Profile, Search, TopBar}; use MoonShine\Components\When; use MoonShine\Contracts\MoonShineLayoutContract; final class MoonShineLayout implements MoonShineLayoutContract { public static function build(): LayoutBuilder { return LayoutBuilder::make([ TopBar::make([ Menu::make()->top(), ]) ->actions([ When::make( static fn() => config('moonshine.auth.enable', true), static fn() => [Profile::make()] ) ]), LayoutBlock::make([ Flash::make(), Header::make([ Search::make(), ]), Content::make(), Footer::make()->copyright(fn (): string => << CutCode HTML)->menu([ 'https://moonshine.cutcode.dev' => 'Documentation', ]), ])->customAttributes(['class' => 'layout-page']), ]); } } 
namespace App\MoonShine;
 
use MoonShine\Components\Layout\{Content,
    Flash,
    Footer,
    Header,
    LayoutBlock,
    LayoutBuilder,
    Menu,
    Profile,
    Search,
    TopBar};
use MoonShine\Components\When;
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            TopBar::make([
                Menu::make()->top(),
            ])
                ->actions([
                    When::make(
                        static fn() => config('moonshine.auth.enable', true),
                        static fn() => [Profile::make()]
                    )
                ]),
            LayoutBlock::make([
                Flash::make(),
                Header::make([
                    Search::make(),
                ]),
                Content::make(),
                Footer::make()->copyright(fn (): string => <<<HTML
                        &copy; 2021-2023 Made with ?? by
                        <a href="https://cutcode.dev"
                            class="font-semibold text-primary hover:text-secondary"
                            target="_blank"
                        >
                            CutCode
                        </a>
                    HTML)->menu([
                    'https://moonshine.cutcode.dev' => 'Documentation',
                ]),
            ])->customAttributes(['class' => 'layout-page']),
        ]);
    }
}