Skip to content

Commit 54c4a94

Browse files
author
Thomas Jarrand
committed
Split layout in blocks
1 parent 7b74041 commit 54c4a94

8 files changed

Lines changed: 138 additions & 125 deletions

File tree

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
55
## Installation
66

7-
composer config repositories.elao/admin-theme-bundle vcs https://github.com/Elao/ElaoAdminThemeBundle.git
87
composer require elao/admin-theme-bundle
98

109
## Usage

‎Resources/views/base.html.twig‎

Lines changed: 15 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -5,150 +5,41 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>{% block title '' %}</title>
77
{% block stylesheets %}{% endblock %}
8+
{% block javascripts %}{% endblock %}
89
</head>
910
<body>
1011
{% block body %}
1112
{% block header %}
1213
<header class="header">
1314
{% block logo_link %}
14-
<a href="/" class="logo">{% block logo 'LOGO' %}</a>
15-
{% endblock %}
16-
{% block nav_primary %}
17-
<nav class="primary-nav">
18-
<ul>
19-
{% set item_class = 'primary-nav__item' %}
20-
{% set item_active_class = 'primary-nav__item--active' %}
21-
{% for item in menu_primary|default([])|filter(item => item is accessible) %}
22-
{% block menu_item %}
23-
<li class="{{ item_class|default('') }} {{ item is active ? item_active_class|default('') : '' }}">
24-
{% block menu_item_link %}
25-
<a href="{{ menu_path(item) }}" class="{{ link_class|default('') }}">
26-
{% if item.icon|default(false) %}
27-
<i class="icon icon--{{ item.icon }}" aria-hidden="true"></i>
28-
{% endif %}
29-
{{ item.label }}
30-
</a>
31-
{% endblock %}
32-
</li>
33-
{% endblock %}
34-
{% endfor %}
35-
</ul>
36-
</nav>
37-
{% endblock %}
38-
{% block nav_user %}
39-
{% if app.user %}
40-
{% block nav_user_authenticated %}
41-
<div class="user-menu drop drop--down">
42-
<button class="user-menu__button drop__button">
43-
{% block user_menu_label app.user|default('Jane doe') %}
44-
</button>
45-
<ul class="user-menu__content drop__menu">
46-
{% for item in menu_user|default([]) %}
47-
{{ block('menu_item') }}
48-
{% endfor %}
49-
</ul>
50-
</div>
51-
{% endblock %}
52-
{% else %}
53-
{% block nav_user_anonymous %}
54-
<ul class="user-menu">
55-
{% set item_class = 'user-menu__button' %}
56-
{% set item_active_class = 'user-menu__button--active' %}
57-
{% for item in menu_anonymous|default([]) %}
58-
{{ block('menu_item') }}
59-
{% endfor %}
60-
</ul>
61-
{% endblock %}
62-
{% endif %}
15+
<a href="/" class="logo">
16+
{% block logo 'LOGO' %}
17+
</a>
6318
{% endblock %}
19+
{% include '@ElaoAdminTheme/layout/nav_primary.html.twig' with { menu: menu_primary|default([]) } %}
20+
{% include '@ElaoAdminTheme/layout/nav_user.html.twig' with { user: app.user } %}
6421
<button class="menu-button"></button>
6522
</header>
6623
{% endblock %}
67-
{% block nav_mobile %}
68-
<div class="mobile-nav">
69-
<ul class="tree">
70-
{% for item in menu_mobile|default([])|filter(item => item is accessible) %}
71-
<li class="mobile-nav__item mobile-nav__item--primary tree-item {{ item is active ? 'mobile-nav__item--active' : '' }}">
72-
<a class="{{ item.children|default(false) ? 'tree-item__trigger' : '' }}" href="{{ menu_path(item) }}">
73-
{% if item.icon|default(false) %}
74-
<i class="icon icon--{{ item.icon }}" aria-hidden="true"></i>
75-
{% endif %}
76-
{{ item.label }}
77-
</a>
78-
{% if item.children|default(false) %}
79-
<ul class="tree-item__content tree">
80-
{% for secondary_item in item.children|filter(item => item is accessible) %}
81-
<li class="mobile-nav__item tree-item mobile-nav__item--secondary {{ secondary_item is active ? 'mobile-nav__item--active' : '' }}">
82-
<a href="{{ menu_path(secondary_item) }}" class="{{ secondary_item.children|default(false) ? 'tree-item__trigger' : '' }}">
83-
{% if secondary_item.icon|default(false) %}
84-
<i class="icon icon--{{ secondary_item.icon }}" aria-hidden="true"></i>
85-
{% endif %}
86-
{{ secondary_item.label }}
87-
</a>
88-
{% if secondary_item.children|default(false) %}
89-
<ul class="tree-item__content">
90-
{% for tertiary_item in secondary_item.children|filter(item => item is accessible) %}
91-
<li class="mobile-nav__item mobile-nav__item--tertiary {{ tertiary_item is active ? 'mobile-nav__item--active' : '' }}">
92-
<a href="{{ menu_path(tertiary_item) }}">
93-
{% if tertiary_item.icon|default(false) %}
94-
<i class="icon icon--{{ tertiary_item.icon }}" aria-hidden="true"></i>
95-
{% endif %}
96-
{{ tertiary_item.label }}
97-
</a>
98-
</li>
99-
{% endfor %}
100-
</ul>
101-
{% endif %}
102-
</li>
103-
{% endfor %}
104-
</ul>
105-
{% endif %}
106-
</li>
107-
{% endfor %}
108-
</ul>
109-
</div>
110-
{% endblock %}
24+
{% include '@ElaoAdminTheme/layout/nav_mobile.html.twig' with { menu: menu_mobile|default([]) } %}
11125
{% block main %}
11226
<main>
113-
{% block nav_secondary %}
114-
{% if menu_secondary is defined %}
115-
<nav class="secondary-nav">
116-
<ul>
117-
{% set item_class = 'secondary-nav__item' %}
118-
{% set item_active_class = 'secondary-nav__item--active' %}
119-
{% for item in menu_secondary|filter(item => item is accessible) %}
120-
{{ block('menu_item') }}
121-
{% endfor %}
122-
</ul>
123-
</nav>
124-
{% endif %}
125-
{% endblock %}
27+
{% if menu_secondary is defined %}
28+
{% include '@ElaoAdminTheme/layout/nav_secondary.html.twig' with { menu: menu_secondary } %}
29+
{% endif %}
12630
{% block content %}
12731
<div class="content">
128-
{% block flash include('@ElaoAdminTheme/components/flash.html.twig') %}
129-
{% block nav_tertiary %}
130-
{% if menu_tertiary is defined %}
131-
<nav class="tertiary-nav">
132-
<ul>
133-
{% set item_class = 'tertiary-nav__item' %}
134-
{% set item_active_class = 'tertiary-nav__item--active' %}
135-
{% for item in menu_tertiary|filter(item => item is accessible) %}
136-
{{ block('menu_item') }}
137-
{% endfor %}
138-
</ul>
139-
</nav>
140-
{% endif %}
141-
{% endblock %}
32+
{% include '@ElaoAdminTheme/components/flash.html.twig' %}
33+
{% if menu_tertiary is defined %}
34+
{% include '@ElaoAdminTheme/layout/nav_secondary.html.twig' with { menu: menu_tertiary } %}
35+
{% endif %}
14236
{% block page_content %}
143-
<div class="container">
144-
145-
</div>
37+
<div class="container"></div>
14638
{% endblock %}
14739
</div>
14840
{% endblock %}
14941
</main>
15042
{% endblock %}
15143
{% endblock %}
152-
{% block javascripts %}{% endblock %}
15344
</body>
15445
</html>

‎Resources/views/layout/menu_item.html.twig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{% block menu_item %}
2+
<li class="{{ item_class|default('') }} {{ item is active ? item_active_class|default('') : '' }}">
3+
{% block menu_item_link %}
4+
<a href="{{ menu_path(item) }}" class="{{ link_class|default('') }}">
5+
{% if item.icon|default(false) %}
6+
<i class="icon icon--{{ item.icon }}" aria-hidden="true"></i>
7+
{% endif %}
8+
{{ item.label }}
9+
</a>
10+
{% endblock %}
11+
</li>
12+
{% endblock %}

‎Resources/views/layout/nav_mobile.html.twig‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{% block nav_mobile %}
2+
<div class="mobile-nav">
3+
<ul class="tree">
4+
{% for item in menu|filter(item => item is accessible) %}
5+
<li class="mobile-nav__item mobile-nav__item--primary tree-item {{ item is active ? 'mobile-nav__item--active' : '' }}">
6+
<a class="{{ item.children|default(false) ? 'tree-item__trigger' : '' }}" href="{{ menu_path(item) }}">
7+
{% if item.icon|default(false) %}
8+
<i class="icon icon--{{ item.icon }}" aria-hidden="true"></i>
9+
{% endif %}
10+
{{ item.label }}
11+
</a>
12+
{% if item.children|default(false) %}
13+
<ul class="tree-item__content tree">
14+
{% for secondary_item in item.children|filter(item => item is accessible) %}
15+
<li class="mobile-nav__item tree-item mobile-nav__item--secondary {{ secondary_item is active ? 'mobile-nav__item--active' : '' }}">
16+
<a href="{{ menu_path(secondary_item) }}" class="{{ secondary_item.children|default(false) ? 'tree-item__trigger' : '' }}">
17+
{% if secondary_item.icon|default(false) %}
18+
<i class="icon icon--{{ secondary_item.icon }}" aria-hidden="true"></i>
19+
{% endif %}
20+
{{ secondary_item.label }}
21+
</a>
22+
{% if secondary_item.children|default(false) %}
23+
<ul class="tree-item__content">
24+
{% for tertiary_item in secondary_item.children|filter(item => item is accessible) %}
25+
<li class="mobile-nav__item mobile-nav__item--tertiary {{ tertiary_item is active ? 'mobile-nav__item--active' : '' }}">
26+
<a href="{{ menu_path(tertiary_item) }}">
27+
{% if tertiary_item.icon|default(false) %}
28+
<i class="icon icon--{{ tertiary_item.icon }}" aria-hidden="true"></i>
29+
{% endif %}
30+
{{ tertiary_item.label }}
31+
</a>
32+
</li>
33+
{% endfor %}
34+
</ul>
35+
{% endif %}
36+
</li>
37+
{% endfor %}
38+
</ul>
39+
{% endif %}
40+
</li>
41+
{% endfor %}
42+
</ul>
43+
</div>
44+
{% endblock %}

‎Resources/views/layout/nav_primary.html.twig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% use "@ElaoAdminTheme/layout/menu_item.html.twig" %}
2+
3+
{% block nav_primary %}
4+
<nav class="primary-nav">
5+
<ul>
6+
{% set item_class = 'primary-nav__item' %}
7+
{% set item_active_class = 'primary-nav__item--active' %}
8+
{% for item in menu|filter(item => item is accessible) %}
9+
{{ block('menu_item') }}
10+
{% endfor %}
11+
</ul>
12+
</nav>
13+
{% endblock %}

‎Resources/views/layout/nav_secondary.html.twig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% use "@ElaoAdminTheme/layout/menu_item.html.twig" %}
2+
3+
{% block nav_secondary %}
4+
<nav class="secondary-nav">
5+
<ul>
6+
{% set item_class = 'secondary-nav__item' %}
7+
{% set item_active_class = 'secondary-nav__item--active' %}
8+
{% for item in menu|filter(item => item is accessible) %}
9+
{{ block('menu_item') }}
10+
{% endfor %}
11+
</ul>
12+
</nav>
13+
{% endblock %}

‎Resources/views/layout/nav_tertiary.html.twig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% use "@ElaoAdminTheme/layout/menu_item.html.twig" %}
2+
3+
{% block nav_tertiary %}
4+
<nav class="tertiary-nav">
5+
<ul>
6+
{% set item_class = 'tertiary-nav__item' %}
7+
{% set item_active_class = 'tertiary-nav__item--active' %}
8+
{% for item in menu|filter(item => item is accessible) %}
9+
{{ block('menu_item') }}
10+
{% endfor %}
11+
</ul>
12+
</nav>
13+
{% endblock %}

‎Resources/views/layout/nav_user.html.twig‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{% use "@ElaoAdminTheme/layout/menu_item.html.twig" %}
2+
3+
{% block nav_user %}
4+
{% if user is defined and user %}
5+
{% block nav_user_authenticated %}
6+
<div class="user-menu drop drop--down">
7+
<button class="user-menu__button drop__button">
8+
{% block user_menu_label user|default('') %}
9+
</button>
10+
<ul class="user-menu__content drop__menu">
11+
{% for item in menu_user|default(menu)|default([]) %}
12+
{{ block('menu_item') }}
13+
{% endfor %}
14+
</ul>
15+
</div>
16+
{% endblock %}
17+
{% else %}
18+
{% block nav_user_anonymous %}
19+
<ul class="user-menu">
20+
{% set item_class = 'user-menu__button' %}
21+
{% set item_active_class = 'user-menu__button--active' %}
22+
{% for item in menu_anonymous|default(menu)|default([]) %}
23+
{{ block('menu_item') }}
24+
{% endfor %}
25+
</ul>
26+
{% endblock %}
27+
{% endif %}
28+
{% endblock %}

0 commit comments

Comments
 (0)