Collapsible sidebar widget
Sidebar widget you can add to your page with your own custom content
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist matejch/yii2-sidebar-collapsible "^1.0.1"
or add
"matejch/yii2-sidebar-collapsible": "^1.0.1"
to the require section of your composer.json
file.
Setup
Elements with [data-sidebar-hide] will be hidden when sidebar is collapsed
Example
<a><i class="fa fa-eye"></i> <span data-sidebar-hide='1'>This text is shown only when sidebar is not collapsed</span></a>
Elements with [data-sidebar-collapsible] will update their left padding when is sidebar size has changed
Example
<div data-sidebar-collapsible="1"></div>
Sidebar example with custom content
<?php Sidebar::begin([
'collapseText' => 'Collapse', // Optional text in button, defaults to Collapse
'top' => '75px', //Optional Fixed top, where sidebar begins, defaults to 0px
'left' => '0px', //Optional Fixed left, where sidebar begins on letf side, defaults to 0px
//'sidebarCacheName' => 'test', //Optional Name for saving state in localstorage
'widthOpen' => '256px', //Optional size when sidebar is opened
'widthCollapsed' => '70px', //Optional size when sidebar is colapsed
'topMobile' => '0px', //Optional
'leftMobile' => '0px', //Optional
'position' => 'fixed', //Optional
'positionMobile' => 'fixed' //Optional
]) ?>
<div>
<?= Html::a('<i class="fas fa-trash"></i> <span data-sidebar-hide="1">text will hide on collapse</span>', '#', ['class' => "btn btn-danger"]) ?>
</div>
<div>
<?= Html::a('<i class="fas fa-edit"></i> <span data-sidebar-hide="1">text will hide on collapse</span>', '#', ['class' => "btn btn-primary"]) ?>
</div>
<div>
<?= Html::a('<i class="fas fa-eye"></i> <span data-sidebar-hide="1">text will hide on collapse</span>', '#', ['class' => "btn btn-success"]) ?>
</div>
<div>
<?= Html::a('<i class="fas fa-check"></i> <span data-sidebar-hide="1">text will hide on collapse</span>','#', ['class' => "btn btn-warning"]) ?>
</div>
<?php Sidebar::end() ?>