README

功能

• 使用Esc键切换
• 使用鼠标悬停和移出切换

安装

composer require osama/nova-collapsible-sidebar

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

php artisan nova:publish

在 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">
      <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
</collapsible-sidebar>

这就完成了！现在您可以使用 Esc 来切换它。当侧边栏折叠时，鼠标悬停会展开，鼠标移出会折叠。

还有其他几个选项可以进行配置。

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

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

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

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

作者

• osama

问题

如果您发现任何问题，请提交一个问题。

屏幕截图