Skip to content

Commit 1007e13

Browse files
committed
navigation menu templates
Signed-off-by: MarioRadu <[email protected]>
1 parent d63d50f commit 1007e13

File tree

7 files changed

+97
-167
lines changed

7 files changed

+97
-167
lines changed

config/autoload/navigation.global.php

Lines changed: 15 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -14,79 +14,49 @@
1414
[
1515
'options' => [
1616
'label' => 'Dashboard',
17+
'uri' => '/',
1718
'route' => [
1819
'route_name' => 'dashboard',
1920
],
20-
'icon' => 'fas fa-tachometer-alt',
21+
'icon' => 'c-blue-500 ti-home',
2122
],
2223
],
2324
[
2425
'options' => [
2526
'label' => 'Manage admins',
26-
'route' => '',
27-
'icon' => 'fas fa-user-circle',
27+
'route' => [],
28+
'icon' => 'c-teal-500 ti-view-list-alt ',
2829
],
2930
'pages' => [
3031
[
3132
'options' => [
3233
'label' => 'Admins',
3334
'uri' => '/admin/manage',
34-
'icon' => 'fas fa-user-circle',
3535
],
3636
],
3737
[
3838
'options' => [
3939
'label' => 'Logins',
4040
'uri' => '/admin/logins',
41-
'icon' => 'fas fa-sign-in-alt',
42-
],
43-
],
44-
],
45-
],
46-
[
47-
'options' => [
48-
'label' => 'Submenu 1',
49-
'route' => '',
50-
'icon' => 'fas fa-cog',
51-
],
52-
'pages' => [
53-
[
54-
'options' => [
55-
'label' => 'Submenu link 1',
56-
'uri' => '#',
57-
'icon' => 'fas fa-square',
5841
],
5942
],
6043
[
6144
'options' => [
62-
'label' => 'Submenu link 2',
63-
'uri' => '#',
64-
'icon' => 'fas fa-square',
45+
'label' => 'View logins v2',
46+
'uri' => '/admin/simple-logins',
47+
'icon' => 'c-pink-500 ti-palette',
6548
],
6649
],
6750
],
6851
],
6952
[
7053
'options' => [
71-
'label' => 'Submenu 2',
72-
'route' => '',
73-
'icon' => 'fas fa-cog',
74-
],
75-
'pages' => [
76-
[
77-
'options' => [
78-
'label' => 'Submenu link 1',
79-
'uri' => '#',
80-
'icon' => 'fa fa-square',
81-
],
82-
],
83-
[
84-
'options' => [
85-
'label' => 'Submenu link 2',
86-
'uri' => '#',
87-
'icon' => 'fa fa-square',
88-
],
54+
'label' => 'Components',
55+
'uri' => '/page/components',
56+
'route' => [
57+
'route_name' => 'page',
8958
],
59+
'icon' => 'c-pink-500 ti-palette',
9060
],
9161
],
9262
],
@@ -105,28 +75,19 @@
10575
'action' => 'account',
10676
],
10777
],
108-
'icon' => 'fas fa-user',
109-
],
110-
],
111-
[
112-
'options' => [
113-
'label' => 'Settings',
114-
'route' => [
115-
'route_name' => 'dashboard',
116-
],
117-
'icon' => 'fas fa-cog',
78+
'icon' => 'ti-user',
11879
],
11980
],
12081
[
12182
'options' => [
122-
'label' => 'Sign Out',
83+
'label' => 'Logout',
12384
'route' => [
12485
'route_name' => 'admin',
12586
'route_params' => [
12687
'action' => 'logout',
12788
],
12889
],
129-
'icon' => 'fas fa-sign-out-alt',
90+
'icon' => 'ti-power-off',
13091
],
13192
],
13293
],

src/App/src/Twig/Extension/RouteExtension.php

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,26 @@ public function getFunctions(): array
2121
{
2222
return [
2323
new TwigFunction('getCurrentRoute', [$this, 'getCurrentRoute']),
24+
new TwigFunction('isRoute', [$this, 'isRoute']),
2425
];
2526
}
2627

2728
public function getCurrentRoute(): ?string
2829
{
2930
return $this->urlHelper->getRequest()?->getUri()?->getPath();
3031
}
32+
33+
public function isRoute(?string $route): bool
34+
{
35+
if (null === $route) {
36+
return false;
37+
}
38+
39+
$currentRoute = $this->getCurrentRoute();
40+
if (null === $currentRoute) {
41+
return false;
42+
}
43+
44+
return $currentRoute === $route;
45+
}
3146
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% set lastKey = container|keys|last %}
2+
{% for page in container %}
3+
{% if navigation.isAllowed(page) %}
4+
<li>
5+
<a href="{{ navigation.getHref(page) }}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
6+
<i class="{{ page.getOption('icon') }} mR-10"></i>
7+
<span>{{ page.getOption('label') }}</span>
8+
</a>
9+
</li>
10+
{% if loop.index0 < lastKey %}
11+
<li role="separator" class="divider"></li>
12+
{% endif %}
13+
{% endif %}
14+
{% endfor %}
Lines changed: 2 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{% set currentRoute = getCurrentRoute() %}
21
<div class="sidebar">
32
<div class="sidebar-inner">
43
<div class="sidebar-logo">
@@ -27,51 +26,9 @@
2726
</div>
2827
</div>
2928
</div>
29+
3030
<ul class="sidebar-menu scrollable pos-r">
31-
<li class="nav-item mT-30">
32-
<a class="sidebar-link{{ currentRoute == path('dashboard') ? ' text-primary fw-medium current-route' }}" href="{{ path('dashboard') }}">
33-
<span class="icon-holder">
34-
<i class="c-blue-500 ti-home"></i>
35-
</span>
36-
<span class="title">Dashboard</span>
37-
</a>
38-
</li>
39-
<li class="nav-item dropdown nav-group">
40-
<a class="dropdown-toggle cur-p">
41-
<span class="icon-holder">
42-
<i class="c-teal-500 ti-view-list-alt"></i>
43-
</span>
44-
<span class="title">Manage Admins</span>
45-
<span class="arrow">
46-
<i class="ti-angle-right"></i>
47-
</span>
48-
</a>
49-
<ul class="dropdown-menu">
50-
<li class="nav-item dropdown">
51-
<a href="{{ path('admin', {action: 'manage'}) }}" class="{{ currentRoute == path('admin', {action: 'manage'}) ? 'text-primary fw-medium current-route' }}">
52-
<span>List</span>
53-
</a>
54-
</li>
55-
<li class="nav-item dropdown">
56-
<a href="{{ path('admin', {action: 'logins'}) }}" class="{{ currentRoute == path('admin', {action: 'logins'}) ? 'text-primary fw-medium current-route' }}">
57-
<span>View logins</span>
58-
</a>
59-
</li>
60-
<li class="nav-item dropdown">
61-
<a href="{{ path('admin', {action: 'simple-logins'}) }}" class="{{ currentRoute == path('admin', {action: 'simple-logins'}) ? 'text-primary fw-medium current-route' }}">
62-
<span>View logins v2</span>
63-
</a>
64-
</li>
65-
</ul>
66-
</li>
67-
<li class="nav-item dropdown">
68-
<a class="sidebar-link{{ currentRoute == path('page', {action: 'components'}) ? ' text-primary fw-medium current-route' }}" href="{{ path('page', {action: 'components'}) }}">
69-
<span class="icon-holder">
70-
<i class="c-pink-500 ti-palette"></i>
71-
</span>
72-
<span class="title">Components</span>
73-
</a>
74-
</li>
31+
{{ navigationPartial('main_menu', 'partial::menu') }}
7532
</ul>
7633
</div>
7734
</div>
Lines changed: 36 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,45 @@
1-
<ul class="{{ ulClass }}" id="{{ ulId }}">
1+
{% set extraAttributes = '' %}
2+
{% if page is defined %}
3+
<ul class="sidebar-menu scrollable pos-r">
4+
{% endif %}
25
{% for page in container %}
3-
46
{% if navigation.isAllowed(page) %}
5-
6-
{% set liClass = '' %}
7-
{% set extraAttributes = '' %}
8-
{% if navigation.isActive(page) %}
9-
{% set liClass = 'active' %}
10-
{% endif %}
11-
127
{% if page.hasChildren() %}
13-
{% set liClass = liClass ~ ' parent' %}
14-
{% endif %}
15-
16-
{% if page.getOption('type') and page.getOption('type') == 'separator' %}
17-
<li role="presentation" class="divider"></li>
8+
<li class="nav-item dropdown nav-group {% if loop.first %} mT-30 {% endif %} {% if isRoute(page.getOption('uri')) %} open {% endif %}">
9+
<a class="dropdown-toggle cur-p" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %}>
10+
<span class="icon-holder">
11+
<i class="{{ page.getOption('icon') }}"></i>
12+
</span>
13+
<span class="title">{{ page.getOption('label') }}</span>
14+
<span class="arrow">
15+
<i class="ti-angle-right"></i>
16+
</span>
17+
</a>
18+
19+
<ul class="dropdown-menu">
20+
{{ navigationPartial(page, 'partial::menu') }}
21+
</ul>
22+
</li>
1823
{% else %}
19-
<li class="{{ liClass }}">
20-
21-
{% if page.hasChildren() %}
22-
{% if depth == 0 %}
23-
<div class="submenu master-tooltip clearfix" data-bs-toggle="collapse" href="#sub-item-{{ loop.index }}" title="{{ page.getOption('label') }}">
24-
<i class="{{ page.getOption('icon') }} master-tooltip" title="{{ page.getOption('label') }}"></i>
25-
<div class="item-label master-tooltip" title="{{ page.getOption('label') }}">{{ page.getOption('label') }}</div>
26-
<i class="fa fa-chevron-circle-down pull-right"></i>
27-
</div>
28-
{% else %}
29-
<i class="{{ page.getOption('icon') }} master-tooltip" title="{{ page.getOption('label') }}"></i>
30-
{{ page.getOption('label') }}
31-
{% endif %}
32-
{% else %}
33-
{% if depth == 0 %}
34-
<a class="master-tooltip clearfix" href="{{ navigation.getHref(page) }}" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %} title="{{ page.getOption('label') }}">
35-
<i class="{{ page.getOption('icon') }} master-tooltip" title="{{ page.getOption('label') }}"></i>
36-
<div class="item-label">{{ page.getOption('label') }}</div>
37-
</a>
38-
{% else %}
39-
<a class="clearfix" href="{{ navigation.getHref(page) }}" {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %} >
24+
{% if page.hasParent() %}
25+
<li class="nav-item dropdown">
26+
<a href="{{ navigation.getHref(page) }}" class="{% if isRoute(page.getOption('uri')) %} text-primary fw-medium current-route {% endif %} {% autoescape false %}{{ pageAttributes(page) ~ extraAttributes }}{% endautoescape %}">
27+
<span>{{ page.getOption('label') }}</span>
28+
</a>
29+
</li>
30+
{% else %}
31+
<li class="nav-item {% if loop.first %} mT-30 {% endif %}">
32+
<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 %}>
33+
<span class="icon-holder">
4034
<i class="{{ page.getOption('icon') }}"></i>
41-
{{ page.getOption('label') }}
42-
</a>
43-
{% endif %}
44-
{% endif %}
45-
46-
{% if page.hasChildren() %}
47-
{% set subitemUlClass = 'children collapse' %}
48-
{% if navigation.isActive(page) %}
49-
{% set subitemUlClass = subitemUlClass ~ ' in' %}
50-
{% endif %}
51-
52-
{% set ulId = 'sub-item-' ~ loop.index %}
53-
{{ navigationPartial(page, 'partial::menu', {ulClass: subitemUlClass, ulId: ulId, depth: depth + 1}) }}
54-
55-
{% endif %}
56-
57-
</li>
35+
</span>
36+
<span class="title">{{ page.getOption('label') }}</span>
37+
</a>
38+
</li>
39+
{% endif %}
5840
{% endif %}
59-
6041
{% endif %}
61-
6242
{% endfor %}
43+
{% if page is defined %}
6344
</ul>
45+
{% endif %}

src/App/templates/partial/nav-bar.html.twig

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,7 @@
2828
</div>
2929
</a>
3030
<ul class="dropdown-menu fsz-sm">
31-
<li>
32-
<a href="{{ path('admin', {action: 'account'}) }}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
33-
<i class="ti-user mR-10"></i>
34-
<span>Profile</span>
35-
</a>
36-
</li>
37-
<li role="separator" class="divider"></li>
38-
<li>
39-
<a href="{{ path('admin', {action: 'logout'}) }}" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
40-
<i class="ti-power-off mR-10"></i>
41-
<span>Logout</span>
42-
</a>
43-
</li>
31+
{{ navigationPartial('account_menu', 'partial::account-menu') }}
4432
</ul>
4533
</li>
4634
</ul>

test/Unit/App/Twig/Extension/RouteExtensionTest.php

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ public function testWillAddExistingFunctions(): void
3737
);
3838

3939
$functions = $routeExtension->getFunctions();
40-
$this->assertCount(1, $functions);
40+
$this->assertCount(2, $functions);
4141

4242
$twigFunction = $functions[0];
4343
$this->assertInstanceOf(TwigFunction::class, $twigFunction);
@@ -62,4 +62,17 @@ public function testWillGetCurrentRoute(): void
6262
$routeExtension = new RouteExtension($urlHelper);
6363
$this->assertSame('/test', $routeExtension->getCurrentRoute());
6464
}
65+
66+
/**
67+
* @throws Exception
68+
*/
69+
public function testIsRoute(): void
70+
{
71+
$router = $this->createMock(RouterInterface::class);
72+
$request = new ServerRequest(uri: new Uri('/test'));
73+
$urlHelper = new UrlHelper($router);
74+
$urlHelper->setRequest($request);
75+
$routeExtension = new RouteExtension($urlHelper);
76+
$this->assertSame(true, $routeExtension->isRoute('/test'));
77+
}
6578
}

0 commit comments

Comments
 (0)