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

chg: [layout:navbar] Breadcrumb and navbar menu - WiP

pull/72/head
mokaddem 2021-09-08 10:57:22 +02:00
parent f0d8338de4
commit da32b8dfab
6 changed files with 138 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/element/layouts/header.php
View File

@ -1,11 +1,11 @@
<div class="container-fluid bg-success">
<div class="container-fluid">
<div class="left-navbar">
<span class="navbar-brand">Logo</span>
</div>
<div class="center-navbar">
Breadcrumb
<?= $this->element('layouts/header/header-center'); ?>
</div>
<div class="right-navbar">
right
<?= $this->element('layouts/header/header-right'); ?>
</div>
</div>

26
templates/element/layouts/header/header-center.php Normal file
View File

@ -0,0 +1,26 @@
<?php
$this->Breadcrumbs->add([
['title' => 'Broods', 'url' => ['controller' => 'Broods', 'action' => 'index']],
['title' => 'Self', 'url' => ['controller' => 'Broods', 'action' => 'view', 4]],
[]
]);
$this->Breadcrumbs->setTemplates([
'wrapper' => sprintf(
'<nav class="header-breadcrumb"{{attrs}}><ol class="">{{content}}</ol></nav>'
),
'item' => sprintf(
'<li class="header-breadcrumb-item"{{attrs}}><a href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}',
empty($darkMode) ? 'light' : 'dark'
),
'itemWithoutLink' => '<li class="header-breadcrumb-item"{{attrs}}><span{{innerAttrs}}>{{title}}</span></li>{{separator}}',
'separator' => '<li class="header-breadcrumb-separator"{{attrs}}><span{{innerAttrs}}><i class="fa fa-sm fa-angle-right"></i></span></li>'
]);
echo $this->Breadcrumbs->render(
[],
['separator' => '']
);
?>
<div class="header-breadcrumb-children">
<a class="btn btn-secondary btn-sm" role="button" href="#">View</a>
<a class="btn btn-primary btn-sm" role="button" href="#">Local tools</a>
</div>

1
templates/element/layouts/header/header-profile.php Normal file
View File

@ -0,0 +1 @@
<i class="<?= $this->FontAwesome->getClass('id-card') ?> fa-lg"></i>

33
templates/element/layouts/header/header-right.php Normal file
View File

@ -0,0 +1,33 @@
<div class="d-flex">
<div class="global-search-container">
<input type="text" class="form-control d-inline-block" id="globalSearch" placeholder="<?= __('Search in Cerebrate') ?>">
<i class="icon <?= $this->FontAwesome->getClass('search') ?>"></i>
</div>
<div class="header-menu d-flex ml-1">
<a class="nav-link px-2 text-decoration-none" href="#">
<i class="<?= $this->FontAwesome->getClass('bell') ?> fa-lg"></i>
</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>
<style>
.top-navbar .global-search-container {
position: relative;
}
#globalSearch {
padding-right: 26px;
}
.top-navbar .global-search-container > i.icon {
position: absolute;
right: 8px;
line-height: 38px;
}
</style>

2
templates/layout/default.php
View File

@ -50,7 +50,7 @@ $cakeDescription = 'Cerebrate';
</head>
<body>
<div class="main-wrapper">
<header class="navbar top-navbar">
<header class="navbar top-navbar <?= empty($darkMode) ? 'bg-dark navbar-dark' : 'bg-light navbar-light' ?>">
<?= $this->element('layouts/header') ?>
</header>
<div class="sidebar <?= empty($darkMode) ? 'bg-light' : 'bg-dark' ?>">

76
webroot/css/layout.css
View File

@ -16,6 +16,7 @@ body {
}
.top-navbar {
min-height: var(--navbar-height);
position: fixed;
top: 0;
left: 0;
@ -50,18 +51,19 @@ body {
}
.left-navbar {
min-width: 70px;
}
.center-navbar {
display: flex;
flex: 1 1 auto;
line-height: var(--navbar-height);
padding: 0 20px;
}
.right-navbar {
display: flex;
flex: 0 0 auto;
justify-content: end;
flex: 1 0 auto;
padding-right: 20px;
}
@ -240,4 +242,74 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
margin: 0;
height: 1px;
flex: 1 0 auto;
}
/*
Header
*/
header.navbar-dark.top-navbar a:hover {
color: #d6d6d6 !important;
}
header.navbar-light.top-navbar a:hover {
color: #6c757d !important;
}
.center-navbar nav.header-breadcrumb {
color: white;
padding: 0.5rem 0.75rem;
}
.center-navbar nav.header-breadcrumb > ol {
display: flex;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.center-navbar nav.header-breadcrumb li {
line-height: 1.5;
}
.center-navbar nav.header-breadcrumb li.header-breadcrumb-item {
}
.center-navbar nav.header-breadcrumb li.header-breadcrumb-separator {
padding: 0 0.75rem;
}
.navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-separator {
/* color: black; */
}
.navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-separator {
/* color: white; */
}
.center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
text-decoration: none;
}
.navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a{
color: white;
}
.navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
color: black;
}
.header-breadcrumb-children {
background-color: #eeeeee;
border-radius: 0.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
}
.header-breadcrumb-children > a:not(:last-child) {
margin-right: 0.5rem;
}
.navbar-dark .right-navbar .header-menu a {
color: white;
}
.navbar-light .right-navbar .header-menu a {
color: black;
}