I referred this site http://demos.krajee.com/widget-details/sidenav
I have added kartik navigation side bar in main layout as per follows but not showing properly, in the frst image I have shown the output & in the next image my expected output.
<?php
use yii\helpers\Url;
use kartik\sidenav\SideNav;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use common\widgets\Alert;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<?php
$menuItems = [
/*['label' => 'Home', 'url' => ['/site/index']],*/
/*['label' => 'Contact', 'url' => ['/site/contact']],*/
];
if (Yii::$app->user->isGuest) {
//$menuItems[] = ['label' => 'Enquiry', 'url' => ['/site/acenquiry']];
$menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
$menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
//print_r(Yii::$app->user->id);
$menuItems[]=[
'label'=>'Dashboard',
'url'=>['/site/dashboard','date'=>'1','status'=>'0'],
];
$menuItems[]=['label' => 'View',
'items' => [
['label' => 'Companies',
'url' => ['/company']
],
['label' => 'Projects',
'url' => ['/project']
],
['label' => 'Documents',
'url' => ['/quotedocs']
],
['label' => 'Quotations',
'url' => ['/quotations']
],
['label' => 'Payments',
'url' => ['/grptankpayment']
],
],
];
$menuItems[]=['label' => 'Configuration',
'items' => [
['label' => 'Status Types',
'url' => ['/status']
],
['label' => 'Document Types',
'url' => ['/doctype']
],
['label' => 'Task Types',
'url' => ['/tasktype']
],
],
];
$menuItems[]=['label' => 'GRP',
'items' => [
['label' => 'GRP Panels',
'url' => ['/grptankpanels']
],
['label' => 'GRP Tools',
'url' => ['/grptanktools']
],
['label' => 'GRP Main Accessories',
'url' => ['/grptankaccessories']
],
['label' => 'GRP Sub Accessories',
'url' => ['/grptanksubaccessories']
],
],
];
$menuItems[]=[
'label'=>'Company',
'url'=>['/company/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[]=['label' => 'Project',
'items' => [
['label'=>'Create Project',
'url'=>['/project/create'],
],
['label'=>'Project Execution',
'url'=>['/project-execution/create'],
],
],
];
$menuItems[] = [
'label' => 'Quotation',
'url' => ['/quotations/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[]=[
'label'=>'Sekisui',
'url'=>['/grptanksekisui/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'Docs',
'url' => ['/quotedocs/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'Payments',
'url' => ['/grptankpayment/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'My Tasks',
'url' => ['/task'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']
];
}
/*echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
]);*/
?>
<div class="container">
<?php echo SideNav::widget([
'encodeLabels' => false,
'items' => $menuItems,
'type' => SideNav::TYPE_PRIMARY
]); ?>
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
<footer class="footer">
<div class="container">
<p class="pull-right">© Test Company <?= date('Y') ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Output image
It should be like this:
It is most likely because you didn't specify bootstrap column widths (col-sm-X). To get pretty similar result, you should add 2 additional parent divs.
Instead of:
<div class="container">
<?php echo SideNav::widget([
'encodeLabels' => false,
'items' => $menuItems,
'type' => SideNav::TYPE_PRIMARY
]); ?>
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
Would be:
<div class="container">
<div class="col-sm-3">
<?php echo SideNav::widget([
'encodeLabels' => false,
'items' => $menuItems,
'type' => SideNav::TYPE_PRIMARY
]); ?>
</div>
<div class="col-sm-9">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
I used just small but you can add more options here.
Related
I have a yii2 application, and this is a part of my layouts/main.php view:
<?php
/* #var $this \yii\web\View */
/* #var $content string */
...
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => Yii::t('app', Yii::$app->name),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-default navbar-fixed-top',
],
]);
// everyone can see Home page
$menuItems[] = ['label' => Yii::t('app', 'Home'), 'url' => ['/index.php/']];
// we do not need to display About and Contact pages to employee+ roles
if (!Yii::$app->user->can('employee')) {
//$menuItems[] = ['label' => Yii::t('app', 'About'), 'url' => ['/site/about']];
$menuItems[] = ['label' => Yii::t('app', 'Contact'), 'url' => ['/site/contact']];
}
// display Users to admin+ roles
if (Yii::$app->user->can('admin')){
$menuItems[] = ['label' => Yii::t('app', 'Users'), 'url' => ['/user/index']];
}
// display Logout to logged in users
if (!Yii::$app->user->isGuest) {
//add items, rooms etc. to menu for logged in users
$menuItems[] = ['label' => Yii::t('app', 'Personnel'), 'url' => ['/person/index']];
$menuItems[] = ['label' => Yii::t('app', 'Items'), 'url' => ['/item/index']];
$menuItems[] = ['label' => Yii::t('app', 'Locations'), 'url' => ['/location/index/']];
$menuItems[] = ['label' => Yii::t('app', 'Buildings'), 'url' => ['/building/index/']];
$menuItems[] = ['label' => Yii::t('app', 'Rooms'), 'url' => ['/room/index/']];
$menuItems[] = [
'label' => Yii::t('app', 'Logout'). ' (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']
];
}
// display Signup and Login pages to guests of the site
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => Yii::t('app', 'Signup'), 'url' => ['/site/signup']];
$menuItems[] = ['label' => Yii::t('app', 'Login'), 'url' => ['/site/login']];
}
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
]);
NavBar::end();
?>
As you can see, I have location, room and building in my menu. However, I'd like to only have location in the main menu, and room and building in location's sub-menu. Is there a simple way to do this?
I don't know what exactly your sub-menu is, if you only want to generate a dropdown list, you may
// display Logout to logged in users
if (!Yii::$app->user->isGuest) {
//add items, rooms etc. to menu for logged in users
$menuItems[] = [
'label' => Yii::t('app', 'Locations'),
'url' => ['/location/index/'],
'items' => [
['label' => Yii::t('app', 'Personnel'), 'url' => ['/person/index']],
['label' => Yii::t('app', 'Items'), 'url' => ['/item/index']],
['label' => Yii::t('app', 'Buildings'), 'url' => ['/building/index/']],
['label' => Yii::t('app', 'Rooms'), 'url' => ['/room/index/']],
[
'label' => Yii::t('app', 'Logout'). ' (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']
],
],
];
}
I have downloaded yii2-widgets-master and don't know where I should keep it.
I am facing the error Class kartik\widgets\SideNav not found.
My code is here
<?php
use yii\helpers\Url;
use kartik\widgets\SideNav;
?>
<div id = "links">
<div class="user-img"><i class="fa fa-user" aria- hidden="true"></i>
<div class="text-center info"> <p>Wecare</p></div>
</div>
<?php
$menuItems[] = ['label' => 'DFenX - Yii2 User - '. Yii::t('app','User Admin Panel'), 'icon' => 'cog', 'url'=>Url::to(['/user/admin/index'])];
$menuItems[] = ['label' => Yii::t('app','Authentication manager'), 'icon' => 'th-list', 'items' => [
['label' => 'Settings', 'icon' => 'th-list', 'items' => [
['label' => '/user/settings', 'url'=>Url::to(['/user/settings'])],
['label' => '/user/settings/profile', 'url'=>Url::to(['/user/settings/profile'])],
['label' => '/user/settings/account', 'url'=>Url::to(['user/settings/account'])],
['label' => '/user/settings/networks', 'url'=>Url::to(['/user/settings/networks'])],
]],
['label' => 'Registration', 'icon' => 'th-list', 'items' => [
['label' => '/user/registration/register', 'url'=>Url::to(['/user/registration/register'])],
['label' => '/user/registration/resend', 'url'=>Url::to(['/user/registration/resend'])],
]],
['label' => 'Security', 'icon' => 'th-list', 'items' => [
['label' => '/user/security/login', 'url'=>Url::to(['/user/security/login'])],
['label' => '/user/security/logout', 'url'=>Url::to(['/user/security/logout'])],
]],
['label' => 'Recovery', 'icon' => 'th-list', 'items' => [
['label' => '/user/recovery/request', 'url'=>Url::to(['/user/recovery/request'])],
['label' => '/user/recovery/reset', 'url'=>Url::to(['/user/recovery/reset'])],
]],
]];
$type = SideNav::TYPE_PRIMARY;
$heading = '<i class="glyphicon glyphicon-user"></i> ' . Yii::t('app','USER Admin - UTILITIES');
echo SideNav::widget([
'type' => $type,
'encodeLabels' => false,
'heading' => $heading,
'items' =>$menuItems,
]);
?>
</div>
Add to composer.json:
"kartik-v/yii2-widget-sidenav": "*"
Run composer update in console under project directory.
I'm trying to bring dropdown in my header. Dropdown label coming. But, dropdwon values not coming. What may be the problem ?
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\bootstrap\Dropdown;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);?>
<?
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown', 'url' => ['#'],
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
]);
NavBar::end();
?>
Here is screenshot.
You all can clearly see. Dropdown coming in header. Right to 'My Company' Text. But, no values are coming. Not clickable.
Any Idea ?
You should simply use another Nav widget instead of Dropdown :
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => [
'class' => 'navbar-nav navbar-left',
],
'items' => [
[
'label' => 'Dropdown',
'url' => '#',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
Please try this code :
echo '<ul id="navbar-id" class="navbar-nav navbar-right nav">';
echo '<li class="dropdown">';
echo 'Label <b class="caret"></b>';
echo Dropdown::widget([
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
]);
echo '</li>';
echo '</ul>';
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => ['data-method' => 'post'],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
[
'label' => 'Login',
'url' => ['site/login'],
'visible' => Yii::$app->user->isGuest
],
],
'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
this is an entire layout code. try this layout for any view it will surely work. first name this file header.php(any name is ok) then select the view file for which u want this layout with dropdown.
small error in your code :
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
NavBar::end();
Then the bad new, there is a limitation with bootstrap, you can only have 2 levels for the dropdown not 3.
If you want more information take a look there :
Multilevel Boostrap Menu in Yii 2
i'm working with yii2 and uikit. i'm trying to build a navbar with the menu widget and i have this:
<nav class='uk-navbar'>
<?php
echo Menu::widget([
'activateItems' => true,
'activateParents' => true,
'activeCssClass' => 'uk-active',
'encodeLabels' => false,
'items' => [
['label' => 'Inicio', 'url' => ['site/index']],
['label' => 'Juridico', 'url' => ['juridico/index']],
['label' => 'Pagos', 'url' => ['pagos/index']],
['label' => 'Universidades', 'url' => ['universidades/index']],
['label' => 'Usuarios', 'url' => ['usuarios/index']],
['label' => 'Planes', 'options' => ['class' => 'uk-parent', 'data' => 'uk-dropdown'], 'url' => ['#'], 'items' => [
['label' => 'Planes Juridico', 'url' => ['#']],
['label' => 'Planes Universidades', 'url' => ['#']],
]],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
'submenuTemplate' => '<div class="uk-dropdown uk-dropdown-navbar"><ul class="uk-nav uk-nav-navbar">{items}</ul></div>',
'options' => [ 'class' => 'uk-navbar-nav'],
]);
?>
</nav>
all i'm missing is this attribute but i don't know how to set it 'data-uk-dropdown'
i need this result in order to the dropdown to work:
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
<li class="uk-parent" data-uk-dropdown>
Parent
<div class="uk-dropdown uk-dropdown-navbar">
<ul class="uk-nav uk-nav-navbar">
<li>Item</li>
<li>Another item</li>
<li class="uk-nav-header">Header</li>
<li>Item</li>
<li>Another item</li>
<li class="uk-nav-divider"></li>
<li>Separated item</li>
</ul>
</div>
</li>
</ul>
</nav>
Thanks in advance.
have you try to add in the 'options' like below?
<?php
echo Menu::widget([
'activateItems' => true,
'activateParents' => true,
'activeCssClass' => 'uk-active',
'encodeLabels' => false,
'items' => [
['label' => 'Inicio', 'url' => ['site/index']],
['label' => 'Juridico', 'url' => ['juridico/index']],
['label' => 'Pagos', 'url' => ['pagos/index']],
['label' => 'Universidades', 'url' => ['universidades/index']],
['label' => 'Usuarios', 'url' => ['usuarios/index']],
['label' => 'Planes', 'options' => ['class' => 'uk-parent', 'data' => 'uk-dropdown'], 'url' => ['#'], 'items' => [
['label' => 'Planes Juridico', 'url' => ['#']],
['label' => 'Planes Universidades', 'url' => ['#']],
]],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
'submenuTemplate' => '<div class="uk-dropdown uk-dropdown-navbar"> <ul class="uk-nav uk-nav-navbar">{items}</ul></div>',
'options' => [
'class' => 'uk-navbar-nav',
'data-uk-dropdown' => ''
],
]);
?>
I think this is how you can add data attributes same method would work in other Yii2 places. So you specify the key 'data' and then add an array of just the attribute names (without prefixing them with 'data'. You can read more about it here.
NavBar::begin([
'options' => [
'id' => 'main-nav-bar',
'class' => 'navbar-inverse',
'data' => ['my-attribute' => 'myValue'] // This line specifically.
],
'innerContainerOptions' => ['class' => 'container-fluid']
]);
I'm trying to put modal in a navbar in my yii2 project. I'm using yii2-bootstrap extension.
Code for my nav:
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
$menuItems = [
['label' => 'Home', 'url' => ['/site/index']],
//['label' => 'facilities', 'url' => ['/facilities/index']],
['label' => 'Hotel',
'items' => [
['label' => 'Facilities', 'url' => ['/facilities/index']],
// '<li class="divider"></li>',
// '<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Cuisines', 'url' => ['/cuisines/index']],
],
]
];
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
$menuItems[] = [
'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']
];
}
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
]);
NavBar::end();
?>
code for modal:
<?php
Modal::begin([
'header' => '<h2>Hello world</h2>',
'toggleButton' => ['label' => 'click me'],
]);
echo 'Say hello...';
Modal::end();
?>
can anyone please tell me how to add this modal to navbar?
First place the modal with an id on your site/index
<?php
use yii\bootstrap\Modal;
Modal::begin(['id' => 'modal',
'header' => '<h2>Hello world</h2>']);
echo "Say Hello...";
Modal::end();
?>
Then create a jQuery action in your controller/SiteController
function actionShowmodal(){
$js='$("#modal").modal("show")';
$this->getView()->registerJs($js);
return $this->render('index');
}
Finally in views\layouts\main add the link in your Nav::wigdet
['label' => 'Show Modal', 'url' => ['/site/showmodal']],
$menuItems = [
['label' => 'Home', 'url' => ['/site/index']],
//['label' => 'facilities', 'url' => ['/facilities/index']],
['label' => 'Hotel',
'items' => [
['label' => 'Facilities', 'url' => ['/facilities/index']],
// '<li class="divider"></li>',
// '<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Cuisines', 'url' => ['/cuisines/index']],
// insert this line
'<li><a data-toggle="modal" data-target="#modal" style="cursor: pointer;">Click me gently!</a></li>',
],
]
];
And for the modal widget:
<?php
Modal::begin([
'header' => '<h2>Hello world</h2>',
'toggleButton' => ['label' => 'click me'],
'id' => 'modal', // <-- insert this modal's ID
]);
echo 'Say hello...';
Modal::end();
?>