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

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 => <<<'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 => <<<'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']),
]);
}
}