Skip to content

Navigation menu templates #328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arhimede merged 2 commits into from
Jan 30, 2025
Merged

Navigation menu templates #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1007e13
navigation menu templates
MarioRadu Jan 29, 2025
17db92c
navigation menu templates
MarioRadu Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 15 additions & 54 deletions config/autoload/navigation.global.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,79 +14,49 @@
[
'options' => [
'label' => 'Dashboard',
'uri' => '/',
'route' => [
'route_name' => 'dashboard',
],
'icon' => 'fas fa-tachometer-alt',
'icon' => 'c-blue-500 ti-home',
],
],
[
'options' => [
'label' => 'Manage admins',
'route' => '',
'icon' => 'fas fa-user-circle',
'route' => [],
'icon' => 'c-teal-500 ti-view-list-alt ',
],
'pages' => [
[
'options' => [
'label' => 'Admins',
'uri' => '/admin/manage',
'icon' => 'fas fa-user-circle',
],
],
[
'options' => [
'label' => 'Logins',
'uri' => '/admin/logins',
'icon' => 'fas fa-sign-in-alt',
],
],
],
],
[
'options' => [
'label' => 'Submenu 1',
'route' => '',
'icon' => 'fas fa-cog',
],
'pages' => [
[
'options' => [
'label' => 'Submenu link 1',
'uri' => '#',
'icon' => 'fas fa-square',
],
],
[
'options' => [
'label' => 'Submenu link 2',
'uri' => '#',
'icon' => 'fas fa-square',
'label' => 'View logins v2',
'uri' => '/admin/simple-logins',
'icon' => 'c-pink-500 ti-palette',
],
],
],
],
[
'options' => [
'label' => 'Submenu 2',
'route' => '',
'icon' => 'fas fa-cog',
],
'pages' => [
[
'options' => [
'label' => 'Submenu link 1',
'uri' => '#',
'icon' => 'fa fa-square',
],
],
[
'options' => [
'label' => 'Submenu link 2',
'uri' => '#',
'icon' => 'fa fa-square',
],
'label' => 'Components',
'uri' => '/page/components',
'route' => [
'route_name' => 'page',
],
'icon' => 'c-pink-500 ti-palette',
],
],
],
Expand All @@ -105,28 +75,19 @@
'action' => 'account',
],
],
'icon' => 'fas fa-user',
],
],
[
'options' => [
'label' => 'Settings',
'route' => [
'route_name' => 'dashboard',
],
'icon' => 'fas fa-cog',
'icon' => 'ti-user',
],
],
[
'options' => [
'label' => 'Sign Out',
'label' => 'Logout',
'route' => [
'route_name' => 'admin',
'route_params' => [
'action' => 'logout',
],
],
'icon' => 'fas fa-sign-out-alt',
'icon' => 'ti-power-off',
],
],
],
Expand Down
15 changes: 15 additions & 0 deletions src/App/src/Twig/Extension/RouteExtension.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,26 @@ public function getFunctions(): array
{
return [
new TwigFunction('getCurrentRoute', [$this, 'getCurrentRoute']),
new TwigFunction('isRoute', [$this, 'isRoute']),
];
}

public function getCurrentRoute(): ?string
{
return $this->urlHelper->getRequest()?->getUri()?->getPath();
}

public function isRoute(?string $route): bool
{
if (null === $route) {
return false;
}

$currentRoute = $this->getCurrentRoute();
if (null === $currentRoute) {
return false;
}

return $currentRoute === $route;
}
}
14 changes: 14 additions & 0 deletions src/App/templates/partial/account-menu.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{% set lastKey = container|keys|last %}
{% for page in container %}
{% if navigation.isAllowed(page) %}
<li>
<a href="{{ navigation.getHref(page) }}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="{{ page.getOption('icon') }} mR-10"></i>
<span>{{ page.getOption('label') }}</span>
</a>
</li>
{% if loop.index0 < lastKey %}
<li role="separator" class="divider"></li>
{% endif %}
{% endif %}
{% endfor %}
47 changes: 2 additions & 45 deletions src/App/templates/partial/left-menu.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
{% set currentRoute = getCurrentRoute() %}
<div class="sidebar">
<div class="sidebar-inner">
<div class="sidebar-logo">
Expand Down Expand Up @@ -27,51 +26,9 @@
</div>
</div>
</div>

<ul class="sidebar-menu scrollable pos-r">
<li class="nav-item mT-30">
<a class="sidebar-link{{ currentRoute == path('dashboard') ? ' text-primary fw-medium current-route' }}" href="{{ path('dashboard') }}">
<span class="icon-holder">
<i class="c-blue-500 ti-home"></i>
</span>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item dropdown nav-group">
<a class="dropdown-toggle cur-p">
<span class="icon-holder">
<i class="c-teal-500 ti-view-list-alt"></i>
</span>
<span class="title">Manage Admins</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a href="{{ path('admin', {action: 'manage'}) }}" class="{{ currentRoute == path('admin', {action: 'manage'}) ? 'text-primary fw-medium current-route' }}">
<span>List</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="{{ path('admin', {action: 'logins'}) }}" class="{{ currentRoute == path('admin', {action: 'logins'}) ? 'text-primary fw-medium current-route' }}">
<span>View logins</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="{{ path('admin', {action: 'simple-logins'}) }}" class="{{ currentRoute == path('admin', {action: 'simple-logins'}) ? 'text-primary fw-medium current-route' }}">
<span>View logins v2</span>
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="sidebar-link{{ currentRoute == path('page', {action: 'components'}) ? ' text-primary fw-medium current-route' }}" href="{{ path('page', {action: 'components'}) }}">
<span class="icon-holder">
<i class="c-pink-500 ti-palette"></i>
</span>
<span class="title">Components</span>
</a>
</li>
{{ navigationPartial('main_menu', 'partial::menu') }}
</ul>
</div>
</div>
90 changes: 36 additions & 54 deletions src/App/templates/partial/menu.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,45 @@
<ul class="{{ ulClass }}" id="{{ ulId }}">
{% set extraAttributes = '' %}
{% if page is defined %}
<ul class="sidebar-menu scrollable pos-r">
{% endif %}
{% for page in container %}

{% if navigation.isAllowed(page) %}

{% set liClass = '' %}
{% set extraAttributes = '' %}
{% if navigation.isActive(page) %}
{% set liClass = 'active' %}
{% endif %}

{% if page.hasChildren() %}
{% set liClass = liClass ~ ' parent' %}
{% endif %}

{% if page.getOption('type') and page.getOption('type') == 'separator' %}
<li role="presentation" class="divider"></li>
<li class="nav-item dropdown nav-group {% if loop.first %} mT-30 {% endif %} {% if isRoute(page.getOption('uri')) %} open {% endif %}">
<a class="dropdown-toggle cur-p" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %}>
<span class="icon-holder">
<i class="{{ page.getOption('icon') }}"></i>
</span>
<span class="title">{{ page.getOption('label') }}</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>

<ul class="dropdown-menu">
{{ navigationPartial(page, 'partial::menu') }}
</ul>
</li>
{% else %}
<li class="{{ liClass }}">

{% if page.hasChildren() %}
{% if depth == 0 %}
<div class="submenu master-tooltip clearfix" data-bs-toggle="collapse" href="#sub-item-{{ loop.index }}" title="{{ page.getOption('label') }}">
<i class="{{ page.getOption('icon') }} master-tooltip" title="{{ page.getOption('label') }}"></i>
<div class="item-label master-tooltip" title="{{ page.getOption('label') }}">{{ page.getOption('label') }}</div>
<i class="fa fa-chevron-circle-down pull-right"></i>
</div>
{% else %}
<i class="{{ page.getOption('icon') }} master-tooltip" title="{{ page.getOption('label') }}"></i>
{{ page.getOption('label') }}
{% endif %}
{% else %}
{% if depth == 0 %}
<a class="master-tooltip clearfix" href="{{ navigation.getHref(page) }}" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %} title="{{ page.getOption('label') }}">
<i class="{{ page.getOption('icon') }} master-tooltip" title="{{ page.getOption('label') }}"></i>
<div class="item-label">{{ page.getOption('label') }}</div>
</a>
{% else %}
<a class="clearfix" href="{{ navigation.getHref(page) }}" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %} >
{% if page.hasParent() %}
<li class="nav-item dropdown">
<a href="{{ navigation.getHref(page) }}" class="{% if isRoute(page.getOption('uri')) %} text-primary fw-medium current-route {% endif %} {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %}">
<span>{{ page.getOption('label') }}</span>
</a>
</li>
{% else %}
<li class="nav-item {% if loop.first %} mT-30 {% endif %}">
<a class="sidebar-link {% if isRoute(page.getOption('uri')) %} text-primary fw-medium current-route {% endif %}" href="{{ navigation.getHref(page) }}" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %}>
<span class="icon-holder">
<i class="{{ page.getOption('icon') }}"></i>
{{ page.getOption('label') }}
</a>
{% endif %}
{% endif %}

{% if page.hasChildren() %}
{% set subitemUlClass = 'children collapse' %}
{% if navigation.isActive(page) %}
{% set subitemUlClass = subitemUlClass ~ ' in' %}
{% endif %}

{% set ulId = 'sub-item-' ~ loop.index %}
{{ navigationPartial(page, 'partial::menu', {ulClass: subitemUlClass, ulId: ulId, depth: depth + 1}) }}

{% endif %}

</li>
</span>
<span class="title">{{ page.getOption('label') }}</span>
</a>
</li>
{% endif %}
{% endif %}

{% endif %}

{% endfor %}
{% if page is defined %}
</ul>
{% endif %}
14 changes: 1 addition & 13 deletions src/App/templates/partial/nav-bar.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,7 @@
</div>
</a>
<ul class="dropdown-menu fsz-sm">
<li>
<a href="{{ path('admin', {action: 'account'}) }}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-user mR-10"></i>
<span>Profile</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="{{ path('admin', {action: 'logout'}) }}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-power-off mR-10"></i>
<span>Logout</span>
</a>
</li>
{{ navigationPartial('account_menu', 'partial::account-menu') }}
</ul>
</li>
</ul>
Expand Down
15 changes: 14 additions & 1 deletion test/Unit/App/Twig/Extension/RouteExtensionTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ public function testWillAddExistingFunctions(): void
);

$functions = $routeExtension->getFunctions();
$this->assertCount(1, $functions);
$this->assertCount(2, $functions);

$twigFunction = $functions[0];
$this->assertInstanceOf(TwigFunction::class, $twigFunction);
Expand All @@ -62,4 +62,17 @@ public function testWillGetCurrentRoute(): void
$routeExtension = new RouteExtension($urlHelper);
$this->assertSame('/test', $routeExtension->getCurrentRoute());
}

/**
* @throws Exception
*/
public function testIsRoute(): void
{
$router = $this->createMock(RouterInterface::class);
$request = new ServerRequest(uri: new Uri('/test'));
$urlHelper = new UrlHelper($router);
$urlHelper->setRequest($request);
$routeExtension = new RouteExtension($urlHelper);
$this->assertSame(true, $routeExtension->isRoute('/test'));
}
}