Skip to content

Commit

Permalink
feat: add sidebar and header elements, update menu helper to BsUtils
Browse files Browse the repository at this point in the history
  • Loading branch information
arodu committed Dec 27, 2024
1 parent a0c9b4e commit ebce3c1
Show file tree
Hide file tree
Showing 16 changed files with 763 additions and 371 deletions.
2 changes: 2 additions & 0 deletions src/CakeLtePlugin.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ class CakeLtePlugin extends BasePlugin
public function bootstrap(PluginApplicationInterface $app): void
{
$app->addPlugin('BootstrapUI');
$app->addPlugin('BsUtils');

Configure::write('CakeLte.plugin-path', $this->getPath());
}
Expand All @@ -51,6 +52,7 @@ public function routes(RouteBuilder $routes): void
function (RouteBuilder $builder): void {
// Add custom routes here
$builder->connect('/debug', ['controller' => 'Pages', 'action' => 'debug']);
$builder->connect('/sample', ['controller' => 'Pages', 'action' => 'sample']);
}
);
parent::routes($routes);
Expand Down
20 changes: 20 additions & 0 deletions src/Controller/PagesController.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,32 @@

namespace CakeLte\Controller;

use Cake\Core\Configure;
use Cake\Http\Exception\NotFoundException;

class PagesController extends AppController
{
/**
* @return void
*/
public function debug(): void
{
if (!Configure::read('debug')) {
throw new NotFoundException();
}

$this->Flash->warning('You are running this application in debug mode. Do not use debug mode in production environment.');
}

/**
* @return void
*/
public function sample(): void
{
if (!Configure::read('debug')) {
throw new NotFoundException();
}

$this->Flash->warning('You are running this application in debug mode. Do not use debug mode in production environment.');
}
}
33 changes: 31 additions & 2 deletions src/View/CakeLteTrait.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@

/**
* @property \CakeLte\View\Helper\CakeLteHelper $CakeLte
* @property \CakeLte\View\Helper\MenuLteHelper $MenuLte
* @property \BsUtils\View\Helper\MenuHelper $MenuLte
* @property \BsUtils\View\Helper\MenuHelper $Menu
*/
trait CakeLteTrait
{
Expand All @@ -23,6 +24,34 @@ public function initializeCakeLte(array $options = []): void
{
$this->initializeUI();
$this->loadHelper('CakeLte.CakeLte', $options);
$this->loadHelper('CakeLte.MenuLte', $options['menu'] ?? []);
$this->loadHelper('BsUtils.Menu');
$this->loadHelper('MenuLte', [
'className' => 'BsUtils.Menu',
'nestClass' => null,
'activeClass' => 'active',
'defaultIcon' => [
0 => 'bi bi-circle-fill',
1 => 'bi bi-circle',
2 => 'bi bi-record-circle-fill',
'default' => 'bi bi-circle',
],
'templates' => [
'menuTitle' => '<li class="nav-header">{{text}}</li>',
'icon' => '<i class="nav-icon {{icon}}"></i>',
'divider' => '<li><hr class="dropdown-divider"></li>',

'menuContainer' => '<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">{{items}}</ul>',
'menuItem' => '<li class="nav-item {{class}}">{{text}}{{nest}}</li>',
'menuItemDisabled' => '<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">{{icon}}<p>{{text}}</p></a></li>',
'menuItemLink' => '<a href="{{url}}" class="nav-link {{class}}{{activeClass}}">{{icon}}<p>{{text}}{{arrow}}</p></a>',
'menuItemLinkNest' => '<a href="{{url}}" class="nav-link {{class}}{{activeClass}}">{{icon}}<p>{{text}}<i class="nav-arrow bi bi-chevron-right"></i></p></a>',

'dropdownContainer' => '<ul class="nav nav-treeview">{{items}}</ul>',
'dropdownItem' => '<li class="nav-item">{{text}}{{nest}}</li>',
'dropdownItemDisabled' => '<li class="nav-item">{{text}}{{nest}}</li>',
'dropdownItemLink' => '<a href="{{url}}" class="nav-link">{{icon}}<p>{{text}}</p></a>',
'dropdownItemLinkNest' => '<a href="{{url}}" class="nav-link">{{icon}}<p>{{text}}<i class="nav-arrow bi bi-chevron-right"></i></p></a>',
],
]);
}
}
2 changes: 2 additions & 0 deletions src/View/Helper/MenuLteHelper.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
*
* @property \Cake\View\Helper\HtmlHelper $Html
* @property \Cake\View\Helper\UrlHelper $Url
*
* @deprecated version 4.0.0 Use BsUtils.MenuHelper instead
*/
class MenuLteHelper extends Helper
{
Expand Down
215 changes: 215 additions & 0 deletions templates/Pages/sample.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
<?php

/**
* @var \App\View\AppView $this
*/

$navbar = [
'active' => [
'label' => __('Active'),
'url' => '#',
],
[
'label' => __('Dropdown'),
'url' => '#',
'children' => [
[
'label' => __('Action'),
'url' => '#',
],
[
'label' => __('Another action'),
'url' => '#',
],
[
'label' => __('Something else here'),
'url' => '#',
],
[
'type' => $this->Menu::ITEM_TYPE_DIVIDER,
],
[
'label' => __('Separated link'),
'url' => '#',
],
],
],
[
'label' => __('Link'),
'url' => '#',
],
[
'label' => __('Disabled'),
'url' => '#',
'type' => $this->Menu::ITEM_TYPE_DISABLED,
],
];

$this->Menu->activeItem('active');

?>

<div class="card">
<div class="card-body">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>

<div class="card-body">
<?= $this->Menu->render($navbar, ['menu.class' => 'nav']) ?>
</div>

<div class="card-body">
<?= $this->Menu->render($navbar, ['menu.class' => 'nav nav-pills']) ?>
</div>
<div class="card-body">
<?= $this->Menu->render($navbar, ['menu.class' => 'nav nav-tabs']) ?>
</div>

</div>


<div class="card card-danger card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">MenuHelper</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?= $this->Menu->render($navbar, ['menu.class' => 'navbar-nav me-auto mb-2 mb-lg-0']) ?>

<?php

/*
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item "><a href="#" class="nav-link ">Home</a></li>
<li class="nav-item "><a href="#" class="nav-link ">Link</a></li>
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item ">Action</a></li>
<li><a href="#" class="dropdown-item ">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a href="#" class="dropdown-item ">Something else here</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
</ul>
*/


/*
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
*/ ?>

<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" data-sharkid="__6">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<!--end::Body-->
</div>



<div class="card card-danger card-outline mb-4">
<!--begin::Header-->
<div class="card-header">
<div class="card-title">Navbar</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" data-sharkid="__6">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<!--end::Body-->
</div>
14 changes: 7 additions & 7 deletions templates/element/content/header.php
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0"><?= $this->fetch('title') ?></h1>
</div><!-- /.col -->
<div class="col-sm-6">
<?= $this->Breadcrumbs->render(['class' => 'float-sm-right']) ?>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="col-sm-6">
<h1 class="m-0"><?= $this->fetch('title') ?></h1>
</div><!-- /.col -->
<div class="col-sm-6">
<?= $this->Breadcrumbs->render(['class' => 'float-sm-right']) ?>
</div><!-- /.col -->
</div><!-- /.row -->
7 changes: 7 additions & 0 deletions templates/element/header/fullscreen.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!--begin::Fullscreen Toggle-->
<li class="nav-item">
<a class="nav-link" href="#" data-lte-toggle="fullscreen">
<i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
<i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i>
</a>
</li> <!--end::Fullscreen Toggle-->
9 changes: 9 additions & 0 deletions templates/element/header/main.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?= $this->element('CakeLte.header/menu') ?>
<ul class="navbar-nav ms-auto"> <!--begin::Navbar Search-->
<li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="bi bi-search"></i> </a> </li> <!--end::Navbar Search-->
<?= $this->element('CakeLte.header/messages') ?>
<?= $this->element('CakeLte.header/notifications') ?>
<?= $this->element('CakeLte.header/fullscreen') ?>
<?= $this->element('CakeLte.header/user_menu') ?>
<?= $this->element('CakeLte.header/theme_mode') ?>
</ul> <!--end::End Navbar Links-->
5 changes: 5 additions & 0 deletions templates/element/header/menu.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i class="bi bi-list"></i> </a> </li>
<li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Home</a> </li>
<li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Contact</a> </li>
</ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
Loading

0 comments on commit ebce3c1

Please sign in to comment.