composer require yiisoft/yii2-bootstrap4
1) To change the name of our app:
'id' => 'app-backend',
'name' => 'YuTub',
backend > config > main.php
delete:
'options' => [
'class' => 'navbar navbar-expand-md navbar-dark bg-dark fixed-top',
],
backend > views > layouts > main.php
NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
]);
39 40 41 42 43 44 45 46 47 48 49 |
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'
]
];
}
|
backend > views > layouts > main.php
It is important to declare URL like in line 44 so that the link will be
dynamic, so that whether we use pretty URL or ugly URL, the link will still
work.
It is important to use linkOptions like in line 45 to 47, so that we won't get
"Method not allowed (#405)" error.
4) Move the navbar links to the right
50 51 52 53 |
echo Nav::widget([
'options' => ['class' => 'navbar-nav ml-auto'],
'items' => $menuItems,
]);
|
5) Break down header, content and footer into few parts. Create new file named
_header.php and _sidebar.php inside backend > view > layouts first.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;
NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
'options' => ['class' => 'navbar-expand-lg navbar-light bg-light shadow-sm']
]);
$menuItems = [
['label' => 'Home', 'url' => ['/site/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 ml-auto'],
'items' => $menuItems,
]);
NavBar::end();
|
backend > views > layouts > _header.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<aside class="shadow">
<?php
use yii\bootstrap4\Nav;
echo Nav::widget([
'options' => [
'class' => 'd-flex flex-column nav-pills'
],
'items' => [
[
'label' => 'Dashboard',
'url' => ['/site/index']
],
[
'label' => 'Video',
'url' => ['/video/index']
]
]
]);
?>
</aside>
|
backend > views > layouts > _sidebar.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php
/** @var \yii\web\View $this */
/** @var string $content */
use backend\assets\AppAsset;
use common\widgets\Alert;
use yii\bootstrap4\Breadcrumbs;
use yii\bootstrap4\Html;
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" class="h-100">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body class="d-flex flex-column h-100">
<?php $this->beginBody() ?>
<header>
<?php echo $this->render('_header'); ?>
</header>
<main role="main" class="d-flex">
<?php echo $this->render('_sidebar'); ?>
<div class="content-wrapper p-3">
<?= Alert::widget() ?>
<?= $content ?>
</div>
</main>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage();
|
backend > views > layouts > main.php
6) Emptied the content
1 2 3 4 5 6 7 8 9 10 |
<?php
/** @var yii\web\View $this */
$this->title = 'My Yii Application';
?>
<div class="site-index">
Index
</div>
|
backend > views > site > index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
main{
flex: 1;
}
.content-wrapper {
flex: 1 !important;
}
aside{
min-width: 200px;
}
aside .nav-pills .nav-link {
border-radius: 0;
color: #444444;
}
aside .nav-pills .nav-link:hover {
background: rgba(0, 0, 0, 0.05);
}
aside .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: rgba(0, 0, 0, 0.05);
color: #b90000;
border-left: 4px solid #b90000;
}
|
backend > web > css > site.css
8) Put navbar in login page
21 22 23 24 25 26 27 28 29 30 31 32 33 |
<body class="d-flex flex-column h-100">
<?php $this->beginBody() ?>
<?php echo $this->render('../layouts/_header'); ?>
<main role="main">
<div class="container">
<?= $content ?>
</div>
</main>
<?php $this->endBody() ?>
</body>
|
backend > views > layouts > blank.php
9) Change navbar item for logged in and logged out user
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | NavBar::begin([
'brandLabel' => Yii::$app->name,
'brandUrl' => Yii::$app->homeUrl,
'options' => ['class' => 'navbar-expand-lg navbar-light bg-light shadow-sm']
]);
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
$menuItems[] = [
'label' => 'Create',
'url' => ['/site/create'],
];
$menuItems[] = [
'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => [
'data-method' => 'post'
]
];
}
|
backend > views > layouts > _header.php
No comments:
Post a Comment