ebess/nova-collapsible-sidebar 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

ebess/nova-collapsible-sidebar

最新稳定版本:0.1.2

Composer 安装命令:

composer require ebess/nova-collapsible-sidebar

包简介

A collapsible sidebar for Laravel Nova.

README 文档

README

This package provide you with a collapsible sidebar for the laravel nova admin panel.

Sidebar

Installation

composer require ebess/nova-collapsible-sidebar

In order to extend the default sidebar you need to export the layout of nova.

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

In resources/views/vendor/nova/layout.blade.php you will find the sidebar which looks something like this.

<!-- 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>

Replace the ordinary div tag by collapsible-sidebar.

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

That's it! Now you can toggle the sidebar by clicking the icon. By default you can use Esc to toggle it as well.

Also there are several other options you can configure.

Will save the collapsed status to local storage:

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

Now you can toggle it by pressing F2 instead of Esc:

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

统计信息

  • 总下载量: 308.71k
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 32
  • 点击次数: 1
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 32
  • Watchers: 2
  • Forks: 4
  • 开发语言: Vue

其他信息

  • 授权协议: MIT
  • 更新时间: 2018-10-02