cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [layout:navbar-right] Started implementation

pull/72/head
mokaddem 2021-09-09 16:27:09 +02:00
parent b0e594320b
commit 5ccf46c1cd
4 changed files with 56 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
templates/element/layouts/header/header-notifications.php Normal file
View File

@ -0,0 +1,13 @@
<?php
use Cake\Routing\Router;
?>
<div class="btn-group">
<a class="nav-link px-2 text-decoration-none profile-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" data-offset="10,20">
<i class="<?= $this->FontAwesome->getClass('bell') ?> fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<?php if (empty($notifications)): ?>
<h6 class="dropdown-header"><?= __('- No notification -') ?></h6>
<?php endif; ?>
</div>
</div>

28
templates/element/layouts/header/header-profile.php
View File

@ -1 +1,27 @@
<i class="<?= $this->FontAwesome->getClass('user-circle') ?> fa-lg"></i> <?php
use Cake\Routing\Router;
?>
<div class="btn-group">
<a class="nav-link px-2 text-decoration-none profile-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" data-offset="10,20">
<i class="<?= $this->FontAwesome->getClass('user-circle') ?> fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header"><?= h($this->request->getAttribute('identity')['username']) ?></h6>
<a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'view']) ?>">
<i class="mr-1 <?= $this->FontAwesome->getClass('user-circle') ?>"></i>
<?= __('My Account') ?>
</a>
<a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'userSettings']) ?>">
<i class="mr-1 <?= $this->FontAwesome->getClass('user-cog') ?>"></i>
<?= __('Settings') ?>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="<?= Router::url(['controller' => 'users', 'action' => 'logout']) ?>">
<i class="mr-1 <?= $this->FontAwesome->getClass('sign-out-alt') ?>"></i>
<?= __('Logout') ?>
</a>
</div>
</div>
<style>
</style>

11
templates/element/layouts/header/header-right.php
View File

@ -4,15 +4,8 @@
<i class="icon <?= $this->FontAwesome->getClass('search') ?>"></i> <i class="icon <?= $this->FontAwesome->getClass('search') ?>"></i>
</div> </div>
<div class="header-menu d-flex ml-1"> <div class="header-menu d-flex ml-1">
<a class="nav-link px-2 text-decoration-none" href="#"> <?= $this->element('layouts/header/header-notifications') ?>
<i class="<?= $this->FontAwesome->getClass('bell') ?> fa-lg"></i> <?= $this->element('layouts/header/header-profile') ?>
</a>
<a class="nav-link px-2 text-decoration-none" href="#">
<i class="<?= $this->FontAwesome->getClass('cog') ?> fa-lg"></i>
</a>
<a class="nav-link px-2 text-decoration-none" href="#">
<?= $this->element('layouts/header/header-profile') ?>
</a>
</div> </div>
</div> </div>

15
webroot/css/layout.css
View File

@ -89,8 +89,20 @@ main.content {
justify-content: end; justify-content: end;
flex: 1 0 auto; flex: 1 0 auto;
padding-right: 20px; padding-right: 20px;
height: var(--navbar-height);
} }
.right-navbar div.global-search-container {
margin: auto 0;
}
.right-navbar div.header-menu a.nav-link {
margin: auto 0;
}
.right-navbar .header-menu .dropdown-menu a.dropdown-item > i {
min-width: 25px;
}
/* sidebar */ /* sidebar */
@ -346,7 +358,7 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.navbar-dark .right-navbar .header-menu a { .navbar-dark .right-navbar .header-menu a.nav-link {
color: white; color: white;
} }
.navbar-light .right-navbar .header-menu a { .navbar-light .right-navbar .header-menu a {
@ -366,3 +378,4 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
.navbar-light .left-navbar .navbar-brand:hover img { .navbar-light .left-navbar .navbar-brand:hover img {
filter: invert(0) drop-shadow(0px 0px 4px #000); filter: invert(0) drop-shadow(0px 0px 4px #000);
} }