ebess/nova-collapsible-sidebar

Laravel Nova 的可折叠侧边栏。


README

此包为您提供了 Laravel Nova 管理面板的可折叠侧边栏。

Sidebar

安装

composer require ebess/nova-collapsible-sidebar

为了扩展默认侧边栏,您需要导出 nova 的布局。

mkdir -p resources/views/vendor/nova
cp -r vendor/laravel/nova/resources/views/layout.blade.php resources/views/vendor/nova/layout.blade.php

resources/views/vendor/nova/layout.blade.php 中,您可以找到看起来类似于以下的侧边栏。

<!-- Sidebar -->
<div class="min-h-screen flex-none pt-header min-h-screen w-sidebar bg-grad-sidebar px-6">
    <a href="{{ Nova::path() }}">
        <div class="absolute pin-t pin-l pin-r bg-logo flex items-center w-sidebar h-header px-6 text-white">
           @include('nova::partials.logo')
        </div>
    </a>

    @foreach (Nova::availableTools(request()) as $tool)
        {!! $tool->renderNavigation() !!}
    @endforeach
</div>

将普通 div 标签替换为 collapsible-sidebar

<collapsible-sidebar class="min-h-screen flex-none pt-header min-h-screen w-sidebar bg-grad-sidebar px-6">
    <!-- -->
</collapsible-sidebar>

这就完成了!现在您可以通过点击图标来切换侧边栏。 默认情况下,您也可以使用 Esc 来切换它。

此外,还有一些其他选项您可以配置。

将折叠状态保存到本地存储

<collapsible-sidebar class="..." persist>    
    <!-- -->
</collapsible-sidebar>

现在您可以通过按下 F2 而不是 Esc 来切换它

<collapsible-sidebar class="..." toggle-key-code="F2">    
    <!-- -->
</collapsible-sidebar>