ebess / nova-collapsible-sidebar
A collapsible sidebar for Laravel Nova.
Installs: 283 171
Dependents: 0
Suggesters: 0
Security: 0
Stars: 32
Watchers: 2
Forks: 4
Open Issues: 19
Language:Vue
Requires
- php: >=7.1.0
- dev-master
- 0.1.2
- 0.1.1
- 0.1.0
- dev-dependabot/npm_and_yarn/express-4.18.2
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-dependabot/npm_and_yarn/css-what-2.1.3
- dev-dependabot/npm_and_yarn/url-parse-1.5.10
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.8
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/tar-2.2.2
- dev-dependabot/npm_and_yarn/dns-packet-1.3.4
- dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9
- dev-dependabot/npm_and_yarn/lodash-4.17.21
- dev-dependabot/npm_and_yarn/y18n-3.2.2
- dev-dependabot/npm_and_yarn/elliptic-6.5.4
- dev-dependabot/npm_and_yarn/ini-1.3.7
- dev-dependabot/npm_and_yarn/http-proxy-1.18.1
- dev-dependabot/npm_and_yarn/lodash.mergewith-4.6.2
- dev-dependabot/npm_and_yarn/node-sass-4.14.1
- dev-dependabot/npm_and_yarn/websocket-extensions-0.1.4
This package is auto-updated.
Last update: 2024-10-08 21:57:18 UTC
README
This package provide you with a collapsible sidebar for the laravel nova admin panel.
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>