chg: [layout:navbar] Breadcrumb and navbar menu - WiP
mokaddem
parent
f0d8338de4
commit
da32b8dfab
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<i class="<?= $this->FontAwesome->getClass('id-card') ?> fa-lg"></i>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' ?>">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -241,3 +243,73 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
|
|||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue