Компоненты

SecondBar

Основы

Используется для создания шаблонов в MoonShine.

Компонент SecondBar предназначен для создания дополнительной боковой панели с меню для конкретной страницы.

make(iterable $components = [])
make(iterable $components = [])
  • $components - массив компонентов.

SecondBar отображается между основным Sidebar и содержимым страницы и позволяет создавать вторичное навигационное меню для текущей страницы.

SecondBar автоматически скрывается на мобильных устройствах (экраны меньше lg).

 namespaces
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\Layout\SecondBar;
 
SecondBar::make([
    Menu::make($this->getPage()->getMenu())
])->collapsed()
 namespaces
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\Layout\SecondBar;
 
SecondBar::make([
    Menu::make($this->getPage()->getMenu())
])->collapsed()
<x-moonshine::layout.second-bar :collapsed="true">
    <x-moonshine::layout.menu
        :elements="[
            ['label' => 'Section 1', 'url' => '/section1'],
            ['label' => 'Section 2', 'url' => '/section2'],
        ]"
    />
</x-moonshine::layout.second-bar>
<x-moonshine::layout.second-bar :collapsed="true">
    <x-moonshine::layout.menu
        :elements="[
            ['label' => 'Section 1', 'url' => '/section1'],
            ['label' => 'Section 2', 'url' => '/section2'],
        ]"
    />
</x-moonshine::layout.second-bar>

Возможность скрыть

По умолчанию SecondBar всегда открыт, но с помощью метода collapsed(), вы можете добавить возможность скрыть SecondBar.

collapsed(Closure|bool $condition = true)
collapsed(Closure|bool $condition = true)
 namespaces
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\Layout\SecondBar;
 
SecondBar::make([
    Menu::make(),
])->collapsed()
 namespaces
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\Layout\SecondBar;
 
SecondBar::make([
    Menu::make(),
])->collapsed()

Пример использования

Для использования SecondBar на странице, необходимо переопределить метод menu() в классе страницы, который возвращает массив элементов меню.

 namespaces
namespace App\MoonShine\Pages;
 
use MoonShine\Laravel\Pages\Page;
use MoonShine\MenuManager\MenuItem; 
 
class CustomPage extends Page
{
    // ...
 
    protected function menu(): array
    {
        return [
            MenuItem::make('Section 1', '/section1'),
            MenuItem::make('Section 2', '/section2'),
            MenuItem::make('Section 3', '/section3'),
        ];
    }
}
 namespaces
namespace App\MoonShine\Pages;
 
use MoonShine\Laravel\Pages\Page;
use MoonShine\MenuManager\MenuItem; 
 
class CustomPage extends Page
{
    // ...
 
    protected function menu(): array
    {
        return [
            MenuItem::make('Section 1', '/section1'),
            MenuItem::make('Section 2', '/section2'),
            MenuItem::make('Section 3', '/section3'),
        ];
    }
}

Затем в вашем кастомном Layout нужно добавить SecondBar компонент, который будет отображать меню страницы:

 namespaces
namespace App\MoonShine\Layouts;
 
use MoonShine\Laravel\Layouts\AppLayout;
use MoonShine\UI\Components\Layout\SecondBar;
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\When; 
 
class CustomLayout extends AppLayout
{
    protected bool $secondBar = true;
 
    // ...
}
 namespaces
namespace App\MoonShine\Layouts;
 
use MoonShine\Laravel\Layouts\AppLayout;
use MoonShine\UI\Components\Layout\SecondBar;
use MoonShine\UI\Components\Layout\Menu;
use MoonShine\UI\Components\When; 
 
class CustomLayout extends AppLayout
{
    protected bool $secondBar = true;
 
    // ...
}

В базовом AppLayout уже реализована поддержка SecondBar. Достаточно установить свойство $secondBar = true в вашем кастомном лейауте, и SecondBar будет автоматически отображаться с меню из метода menu() текущей страницы.