Skip to content

Commit 2584dc1

Browse files
cavasinfcavasinf
authored
added "vertical layout" template (#3)
1 parent 0f7ca9e commit 2584dc1

File tree

11 files changed

+445
-186
lines changed

11 files changed

+445
-186
lines changed

‎config/packages/tabler.yaml

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ tabler:
1010
dark_mode: true
1111
# condensed = one nav-bar, false = two nav-bars
1212
navbar_condensed: true
13+
# true = dark mode, false = light mode (on header)
14+
header_dark: false
15+
# true = dark mode, false = light mode (on menu)
16+
navbar_dark: false
1317
# overlap = https://preview.tabler.io/layout-navbar-overlap.html
1418
navbar_overlap: false
1519
# true = boxed layout, false = full-screen

‎docs/layout.md

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
# Using the layout
22

3-
In order to use the layout, your views should extend from the provided `layout`
3+
In order to use the layout, your views should extend from the provided `layouts`
4+
5+
```twig
6+
{% extends '@Tabler/layout-horizontal.html.twig' %}
7+
```
8+
9+
OR
10+
411
```twig
5-
{% extends '@Tabler/layout.html.twig' %}
12+
{% extends '@Tabler/layout-vertical.html.twig' %}
613
```
714

815
## Layout files
@@ -11,9 +18,9 @@ This bundle ships with two main template files which you can extend in your them
1118

1219
**For all your admin pages**
1320

14-
The default `layout.html.twig` file can be used with:
21+
The default `layout-horizontal.html.twig` can be used with:
1522
```
16-
{% extends '@Tabler/layout.html.twig' %}
23+
{% extends '@Tabler/layout-horizontal.html.twig' %}
1724
```
1825

1926
**For your security screens**

‎docs/migration_guide.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Search and replace
2929
```
3030
with
3131
```
32-
{% extends '@Tabler/layout.html.twig' %}
32+
{% extends '@Tabler/layout-horizontal.html.twig' %}
3333
```
3434

3535
Search and replace:
@@ -86,7 +86,7 @@ Replace
8686
```
8787
with
8888
```
89-
{% extends '@Tabler/layout.html.twig' %}
89+
{% extends '@Tabler/layout-horizontal.html.twig' %}
9090
```
9191

9292
The file:

‎src/DependencyInjection/Configuration.php

+6
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,12 @@ private function getOptionsConfig(): NodeDefinition
128128
->booleanNode('dark_mode')
129129
->defaultFalse()
130130
->end()
131+
->booleanNode('header_dark')
132+
->defaultFalse()
133+
->end()
134+
->booleanNode('navbar_dark')
135+
->defaultFalse()
136+
->end()
131137
->booleanNode('navbar_condensed')
132138
->defaultTrue()
133139
->end()

‎src/Helper/ContextHelper.php

+20
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,26 @@ public function setIsDarkMode(bool $isDarkMode): void
7171
$this->setOption('dark_mode', $isDarkMode);
7272
}
7373

74+
public function isHeaderDark(): bool
75+
{
76+
return (bool) $this->getOption('header_dark');
77+
}
78+
79+
public function setIsHeaderDark(bool $isHeaderDark): void
80+
{
81+
$this->setOption('header_dark', $isHeaderDark);
82+
}
83+
84+
public function isNavbarDark(): bool
85+
{
86+
return (bool) $this->getOption('navbar_dark');
87+
}
88+
89+
public function setIsNavbarDark(bool $isNavbarDark): void
90+
{
91+
$this->setOption('navbar_dark', $isNavbarDark);
92+
}
93+
7494
public function isBoxedLayout(): bool
7595
{
7696
return (bool) $this->getOption('boxed_layout');

‎src/Model/MenuItemModel.php

+5
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,11 @@ public function getActiveChild(): ?MenuItemInterface
189189
return null;
190190
}
191191

192+
public function hasActiveChild(): bool
193+
{
194+
return null !== $this->getActiveChild();
195+
}
196+
192197
public function isActive(): bool
193198
{
194199
return $this->isActive;

‎templates/includes/menu.html.twig

+72-36
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,83 @@
11
{% if menu is not defined %}
22
{% set menu = tabler_menu(app.request) %}
33
{% endif %}
4+
45
{% if menu is defined and menu is not null %}
5-
<ul class="navbar-nav">
6-
{% for item in menu %}
7-
<li id="{{ item.identifier }}" class="nav-item {{ item.isActive ? 'active' : '' }} {{ item.hasChildren? 'dropdown' : '' }}">
8-
<a {% if item.hasChildren -%}
9-
class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false"
10-
{%- else -%}
11-
class="nav-link" href="{{ '/' in item.route ? item.route : path(item.route|tabler_route, item.routeArgs) }}"
12-
{%- endif -%}>
13-
{% if item.icon %}
14-
<span class="nav-link-icon d-md-none d-lg-inline-block text-center">
15-
{{ tabler_icon(item.icon, false, item.icon) }}
16-
</span>
6+
{% if layout_type is not defined %}
7+
{% set layout_type = 'horizontal' %}
8+
{% endif %}
9+
<ul class="navbar-nav {{ navbar_class | default('') }}">
10+
{% for item in menu %}
11+
<li id="{{ item.identifier }}" class="nav-item {{ item.isActive ? 'active' : '' }} {{ item.hasChildren? 'dropdown' : '' }}">
12+
<a {% if item.hasChildren %}
13+
class="nav-link dropdown-toggle" role="button"
14+
data-bs-toggle="dropdown" data-bs-auto-close="{{ layout_type is same as "vertical" ? 'false' : 'outside' }}"
15+
aria-expanded="{{ layout_type is same as "vertical" }}"
16+
{% else %}
17+
class="nav-link" href="{{ '/' in item.route ? item.route : path(item.route|tabler_route, item.routeArgs) }}"
18+
{% endif %}>
19+
{{ _self.item_icon(item) }}
20+
<span class="nav-link-title">{{ item.label|trans }}</span>
21+
{% if layout_type is same as 'horizontal' %}
22+
{{ _self.item_badge(item) }}
1723
{% endif %}
18-
<span class="nav-link-title">{{ item.label|trans }}</span>
19-
{% if item.badge is not null or item.badgeColor is not null %}
20-
<span class="badge bg-{{ item.badgeColor|default('blue') }}">{{ item.badge }}</span>
21-
{% endif %}
22-
</a>
24+
</a>
25+
{{ _self.item_childs(item, layout_type) }}
26+
</li>
27+
{% endfor %}
28+
</ul>
29+
{% endif %}
2330

24-
{% if item.hasChildren %}
25-
<div class="dropdown-menu">
31+
{% macro item_childs(item, layout_type) %}
32+
{% if item.hasChildren %}
33+
<div class="dropdown-menu {{ layout_type is same as "vertical" and item.isActive ? 'show':'' }}" data-bs-popper="none">
34+
<div class="dropdown-menu-columns">
35+
<div class="dropdown-menu-column">
2636
{% for child in item.children %}
27-
{% if child.divider %}
28-
{% if not loop.last -%}
29-
<hr class="dropdown-divider">
30-
{%- endif %}
37+
{% if child.hasChildren %}
38+
<div class="dropend">
39+
<a class="dropdown-item dropdown-toggle" role="button"
40+
data-bs-toggle="dropdown" data-bs-auto-close="{{ layout_type is same as "vertical" ? 'false' : 'outside' }}"
41+
aria-expanded="{{ layout_type is same as "vertical" }}">
42+
{{ _self.item_icon(child) }}
43+
{{ child.label|trans }}
44+
{{ _self.item_badge(child) }}
45+
</a>
46+
{{ _self.item_childs(child, layout_type) }}
47+
</div>
3148
{% else %}
32-
<a class="dropdown-item {{ child.isActive ? 'active':'' }}" href="{{ '/' in child.route ? child.route : path(child.route|tabler_route, child.routeArgs) }}">
33-
{% if child.icon %}
34-
<span class="nav-link-icon d-md-none d-lg-inline-block text-center">
35-
{{ tabler_icon(child.icon, false, child.icon) }}
36-
</span>
37-
{% endif %}
38-
{{ child.label|trans }}
39-
</a>
49+
{{ _self.child_item(child) }}
4050
{% endif %}
4151
{% endfor %}
4252
</div>
43-
{% endif %}
44-
</li>
45-
{% endfor %}
46-
</ul>
47-
{% endif %}
53+
</div>
54+
</div>
55+
{% endif %}
56+
{% endmacro %}
57+
58+
{% macro child_item(child) %}
59+
{% if child.divider %}
60+
{% if not loop.last -%}
61+
<hr class="dropdown-divider">
62+
{%- endif %}
63+
{% else %}
64+
<a class="dropdown-item {{ child.isActive ? 'active':'' }}"
65+
{%- if not child.hasChildren %} href="{{ '/' in child.route ? child.route : path(child.route|tabler_route, child.routeArgs) }}"{% endif %}>
66+
{{ _self.item_icon(child) }}
67+
{{ child.label|trans }}
68+
{{ _self.item_badge(child) }}
69+
</a>
70+
{% endif %}
71+
{% endmacro %}
72+
73+
{% macro item_icon(item) %}
74+
{% if item.icon %}
75+
<span class="nav-link-icon d-md-none d-lg-inline-block text-center">{{ tabler_icon(item.icon, false, item.icon) }}</span>
76+
{% endif %}
77+
{% endmacro %}
78+
79+
{% macro item_badge(item) %}
80+
{% if item.badge is not null or item.badgeColor is not null %}
81+
<span class="badge badge-sm bg-{{ item.badgeColor|default('blue') }} text-uppercase ms-2">{{ item.badge }}</span>
82+
{% endif %}
83+
{% endmacro %}

‎templates/layout-horizontal.html.twig

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
{#
2+
Use this as your new starter template page, use it to start your new project,
3+
by adding this code to your own base template:
4+
5+
{% extends '@Tabler/layout-horizontal.html.twig' %}
6+
7+
Enjoy your theme!
8+
#}
9+
<!doctype html{% block html_start %}{% endblock %}>
10+
<html lang="{{ app.request.locale }}"{% if tabler_bundle.isRightToLeft() %} dir="rtl"{% endif %}>
11+
<head>
12+
{% block head %}
13+
<meta charset="utf-8"/>
14+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
15+
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
16+
{% endblock %}
17+
<title>{% block title %}{{ block('page_title') }}{% endblock %}</title>
18+
{% block stylesheets %}
19+
<link rel="stylesheet" href="{{ asset('bundles/tabler/tabler.css') }}">
20+
{% endblock %}
21+
</head>
22+
<body{% block body_start %}{% endblock %} class="{{ 'antialiased'|tabler_body }}" {% block body_class %}{% endblock %}>
23+
{% block after_body_start %}{% endblock %}
24+
<div class="page">
25+
26+
{# *** Layout type changes *** #}
27+
{% block header %}
28+
<header id="{% block header_id %}{% endblock %}" class="navbar navbar-expand-md{% block header_class %} {% if tabler_bundle.isNavbarOverlapping() %}navbar-dark navbar-overlap{% else %}{{ tabler_bundle.isHeaderDark() ? 'navbar-dark' : 'navbar-light' }}{% endif %}{% endblock %} d-print-none">
29+
<div class="{{ ''|tabler_container }}">
30+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
31+
<span class="navbar-toggler-icon"></span>
32+
</button>
33+
{% block app_logo %}
34+
<h1 class="navbar-brand {# navbar-brand-autodark #} d-none-navbar-horizontal pe-0 pe-md-3">
35+
<a href="{{ path('tabler_welcome'|tabler_route) }}">
36+
{% if tabler_bundle.getLogoUrl() is not empty %}
37+
<img src="{% if '://' in tabler_bundle.getLogoUrl() %}{{ tabler_bundle.getLogoUrl() }}{% else %}{{ asset(tabler_bundle.getLogoUrl()) }}{% endif %}" width="110" height="32" alt="Logo" class="navbar-brand-image">
38+
{% else %}
39+
<i class="far fa-smile" style="font-size: 32px"></i>
40+
{% endif %}
41+
</a>
42+
</h1>
43+
{% endblock %}
44+
<div class="navbar-nav flex-row order-md-last">
45+
{% block navbar_start %}{% endblock %}
46+
{% block navbar_notifications %}
47+
{% include '@Tabler/includes/navbar_notifications.html.twig' %}
48+
{% endblock %}
49+
{% block navbar_user %}
50+
{% include '@Tabler/includes/navbar_user.html.twig' %}
51+
{% endblock %}
52+
{% block navbar_end %}{% endblock %}
53+
</div>
54+
{% if tabler_bundle.isCondensedNavbar() %}
55+
<div class="collapse navbar-collapse" id="navbar-menu">
56+
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
57+
{% block navbar_menu_condensed %}
58+
{% include '@Tabler/includes/menu.html.twig' %}
59+
{% endblock %}
60+
</div>
61+
</div>
62+
{% endif %}
63+
</div>
64+
</header>
65+
{% endblock %}
66+
67+
{% block navbar %}
68+
{% if not tabler_bundle.isCondensedNavbar() %}
69+
<div id="{% block navbar_id %}{% endblock %}" class="navbar-expand-md">
70+
<div class="collapse navbar-collapse" id="navbar-menu">
71+
<div class="navbar {{ tabler_bundle.isNavbarDark() ? 'navbar-dark' : 'navbar-light' }}">
72+
<div class="{{ ''|tabler_container }}">
73+
{% block navbar_menu %}
74+
{% include '@Tabler/includes/menu.html.twig' %}
75+
{% endblock %}
76+
{% block navbar_search %}
77+
{% include '@Tabler/includes/navbar_search.html.twig' %}
78+
{% endblock %}
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
{% endif %}
84+
{% endblock %}
85+
{# *************************** #}
86+
87+
<div id="{% block page_wrapper_id %}{% endblock %}" class="page-wrapper">
88+
{% block page_header %}
89+
<div class="{{ ''|tabler_container }}">
90+
<!-- Page title -->
91+
<div id="{% block page_header_id %}{% endblock %}" class="page-header d-print-none">
92+
<div class="row align-items-center">
93+
<div class="col">
94+
{% block breadcrumb %}
95+
<div class="page-pretitle">
96+
{% block page_pretitle %}Overview{% endblock %}
97+
</div>
98+
{% endblock %}
99+
<h2 class="page-title{% if tabler_bundle.isNavbarOverlapping() %} text-white{% endif %}">
100+
{% block page_title %}Dashboard{% endblock %}
101+
</h2>
102+
{% block page_subtitle %}
103+
<div class="text-muted mt-1">
104+
1-10 of 100
105+
</div>
106+
{% endblock %}
107+
</div>
108+
<div class="col-12 col-md-auto ms-auto d-print-none">
109+
{% block page_actions %}
110+
<div class="btn-list">
111+
<a href="#" class="btn btn-white">
112+
New view
113+
</a>
114+
<a href="#" class="btn btn-primary d-none d-sm-inline-block">
115+
Create new report
116+
</a>
117+
</div>
118+
{% endblock %}
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
{% endblock %}
124+
125+
<div class="page-body">
126+
<div class="{{ ''|tabler_container }}">
127+
<div class="row row-cards">
128+
{% block page_content_before %}{% endblock %}
129+
130+
<section id="{% block page_content_id %}{% endblock %}" class="{% block page_content_class %}content{% endblock %}">
131+
{% block page_content_start %}{{ include('@Tabler/includes/flash_messages.html.twig') }}{% endblock %}
132+
{% block page_content %}{% endblock %}
133+
{% block page_content_end %}{% endblock %}
134+
</section>
135+
136+
{% block page_content_after %}{% endblock %}
137+
</div>
138+
</div>
139+
</div>
140+
141+
{% block footer %}
142+
<footer id="{% block footer_id %}{% endblock %}" class="footer footer-transparent d-print-none">
143+
<div class="container">
144+
{% include '@Tabler/includes/footer.html.twig' %}
145+
</div>
146+
</footer>
147+
{% endblock %}
148+
</div>
149+
</div>
150+
151+
{% block javascripts %}
152+
<script src="{{ asset('bundles/tabler/tabler.js') }}"></script>
153+
{% endblock %}
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)