Skip to content
Snippets Groups Projects
Commit 5206210a authored by pfleu's avatar pfleu
Browse files

Fix toggle navbar : les icônes à droite ne doivent pas s'empiler

parent d5ba9405
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/assets/css/app.css
+ 13
− 0
View file @ 5206210a
......@@ -95,6 +95,13 @@
color: #aaa;
font-size: 12px
}
@media only screen and (max-width: 1200px) {
.notifications {
right: 5px;
width: 300px;
}
}
/** END Notifications **/
/****** The switch - the box around the slider *******/
......@@ -633,4 +640,10 @@ audio::-webkit-media-controls-mute-button {
.icon-nav {
height: 26px;
}
.show #searchHeadwordsForm {
margin-top: 10px;
}
ul.navbar-nav.flex-row > .nav-item {
padding-left: 12px;
}
\ No newline at end of file
templates/nav.html.twig
+ 99
− 107
View file @ 5206210a
<nav class="navbar fixed-top navbar-expand-xl navbar-dark bg-dark py-3">
<div class="container-fluid">
<a title="{{ "Accueil"|trans }}" class="navbar-brand" href="{{ path('app_login') }}">
<i class="fa fa-home"></i> BALEX
</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>
{% if not is_granted('ROLE_SUPER_ADMIN') %}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a title="{{ "Accueil"|trans }}" class="navbar-brand" href="{{ path('app_login') }}">
<i class="fa fa-home"></i> BALEX
</a>
{% if app.user %}
<form id="searchHeadwordsForm" class="d-flex" role="search" action="{{ path('app_headword_search') }}">
......@@ -15,127 +19,115 @@
<button id="searchHeadwordButton" class="btn btn-light me-3"><i class="fa fa-nav fa-search"></i></button>
</form>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link {{ 'app_label' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_label_index') }}">
<i class="bi bi-nav bi-tags"></i> {{ "Labels"|trans }}</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {{ 'app_lexicon' in app.request.attributes.get('_route') ? 'active' }}" data-bs-toggle="dropdown" href="#">
<img src="{{ asset('assets/images/Icon/notebook-white.png') }}" class="icon-nav"> {{ "Lexiques"|trans }}</a>
<ul class="dropdown-menu">
{% for lexicon in lexicon_manager.myLexicons(app.user) %}
<li><a class="dropdown-item {{ lexicon.user ? 'fw-bold' }}" href="{{ path('app_lexicon_show', {id: lexicon.id}) }}">{{ lexicon }}</a></li>
{% endfor %}
<li><a class="dropdown-item" href="{{ path('app_group_new') }}"><i class="fa fa-plus-circle"></i> {{ "Créer un lexique de groupe"|trans }}</a></li>
</ul>
</li>
{# <li class="nav-item">#}
{# <a class="nav-link {{ 'app_group' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_group_index') }}">#}
{# <i class="fa fa-nav fa-users"></i> {{ "Groupes"|trans }}</a>#}
{# </li>#}
{# <li class="nav-item">
<a class="nav-link {{ 'app_friend' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_friend_index') }}">
<i class="bi bi-nav bi-person-heart"></i> {{ "Amis"|trans }}</a>
</li>#}
<li class="nav-item">
<a class="nav-link {{ 'app_dashboard' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_dashboard_index') }}">
<img src="{{ asset('assets/images/Icon/dashboard-white.png') }}" class="icon-nav"> {{ "Tableau de bord"|trans }}</a>
</li>
{% if is_granted('ROLE_ADMIN') %}
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link {{ 'app_label' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_label_index') }}">
<i class="bi bi-nav bi-tags"></i> {{ "Labels"|trans }}</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {{ 'app_lexicon' in app.request.attributes.get('_route') ? 'active' }}" data-bs-toggle="dropdown" href="#">
<i class="fa fa-nav fa-cog"></i></a>
<img src="{{ asset('assets/images/Icon/notebook-white.png') }}" class="icon-nav"> {{ "Lexiques"|trans }}</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="{{ path('app_user_index') }}">
<i class="bi bi-nav bi-person"></i> {{ "Utilisateurs"|trans }}</a>
</li>
{# <li>#}
{# <a class="dropdown-item" href="{{ path('app_lexicon_index') }}"><i class="bi bi-nav bi-card-list"></i> Lexiques</a>#}
{# </li>#}
<li>
<a class="dropdown-item" href="{{ path('app_client_index') }}">
<i class="bi bi-nav bi-window"></i> {{ "Applis clientes"|trans }}</a>
</li>
<li>
<a class="dropdown-item" href="{{ path('app.swagger_ui') }}"><i class="bi bi-nav bi-terminal"></i> Swagger</a>
</li>
{% if app.environment|upper == 'DEV' %}
<li>
<a class="dropdown-item" href="{{ path('app_wiktionnary_search') }}"><i class="bi bi-nav bi-book"></i> {{ "Wiktionnaire"|trans }}</a>
</li>
{% endif %}
{% for lexicon in lexicon_manager.myLexicons(app.user) %}
<li><a class="dropdown-item {{ lexicon.user ? 'fw-bold' }}" href="{{ path('app_lexicon_show', {id: lexicon.id}) }}">{{ lexicon }}</a></li>
{% endfor %}
<li><a class="dropdown-item" href="{{ path('app_group_new') }}"><i class="fa fa-plus-circle"></i> {{ "Créer un lexique de groupe"|trans }}</a></li>
</ul>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
<div class="container-fluid">
<!-- ... Your other navigation elements ... -->
{# <li class="nav-item">#}
{# <a class="nav-link {{ 'app_group' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_group_index') }}">#}
{# <i class="fa fa-nav fa-users"></i> {{ "Groupes"|trans }}</a>#}
{# </li>#}
{# <li class="nav-item">
<a class="nav-link {{ 'app_friend' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_friend_index') }}">
<i class="bi bi-nav bi-person-heart"></i> {{ "Amis"|trans }}</a>
</li>#}
<li class="nav-item">
<a class="nav-link {{ 'app_dashboard' in app.request.attributes.get('_route') ? 'active' }}" href="{{ path('app_dashboard_index') }}">
<img src="{{ asset('assets/images/Icon/dashboard-white.png') }}" class="icon-nav"> {{ "Tableau de bord"|trans }}</a>
</li>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<span class="nav-link">
{% include "_workingLanguageSwitcher.html.twig" %}
</span>
</li>
{% if is_granted('ROLE_ADMIN') %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {{ 'app_lexicon' in app.request.attributes.get('_route') ? 'active' }}" data-bs-toggle="dropdown" href="#">
<i class="fa fa-nav fa-cog"></i></a>
<ul class="dropdown-menu">
<li class="nav-item">
<span class="nav-link">
{{ success_manager.getUserPoints(app.user) }}
</span>
</li>
<li class="nav-item">
<span class="nav-link" style="margin-left: -10px; margin-right: 15px;">
<img src="{{ asset('assets/images/Icon/trophy-solid.svg')}}" alt="oups">
</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_user_profile') }}">
{{ app.user }}
<i class="bi bi-nav bi-person-circle"></i>
</a>
</li>
<li class="nav-item nav-link">
{% if app.user %}
{% include "notifications.html.twig" %}
<li>
<a class="dropdown-item" href="{{ path('app_user_index') }}">
<i class="bi bi-nav bi-person"></i> {{ "Utilisateurs"|trans }}</a>
</li>
{# <li>#}
{# <a class="dropdown-item" href="{{ path('app_lexicon_index') }}"><i class="bi bi-nav bi-card-list"></i> Lexiques</a>#}
{# </li>#}
<li>
<a class="dropdown-item" href="{{ path('app_client_index') }}">
<i class="bi bi-nav bi-window"></i> {{ "Applis clientes"|trans }}</a>
</li>
<li>
<a class="dropdown-item" href="{{ path('app.swagger_ui') }}"><i class="bi bi-nav bi-terminal"></i> Swagger</a>
</li>
{% if app.environment|upper == 'DEV' %}
<li>
<a class="dropdown-item" href="{{ path('app_wiktionnary_search') }}"><i class="bi bi-nav bi-book"></i> {{ "Wiktionnaire"|trans }}</a>
</li>
{% endif %}
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_logout') }}" title="{{ "Déconnexion"|trans }}">
<img src="{{ asset('assets/images/Icon/arrow-right-from-bracket-solid.svg')}}" alt="oups">
<span class="d-xl-none">{{ "Déconnexion"|trans }}</span>
</a>
</li>
<li class="nav-item">
</ul>
</li>
{% endif %}
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<a class="nav-link" style="color: red;" href="{{ path('switch', {'_usurper': '_exit'}) }}"
title="Terminer l'usurpation">
<i class="fa fa-user-secret"></i>
</a>
{% endif %}
</li>
</ul>
</ul>
{% endif %}
</div>
{# Icônes à droite : ajout de flex-row sur ul et de padding-left sur .nav-item pour que ça ne s'empile pas #}
<ul class="navbar-nav mb-2 mb-lg-0 me-2 flex-row">
<li class="nav-item">
<span class="nav-link">
{% include "_workingLanguageSwitcher.html.twig" %}
</span>
</li>
<li class="nav-item">
<span class="nav-link">
{{ success_manager.getUserPoints(app.user) }}
</span>
</li>
<li class="nav-item">
<span class="nav-link" style="margin-left: -10px; margin-right: 15px;">
<img src="{{ asset('assets/images/Icon/trophy-solid.svg')}}" alt="oups">
</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_user_profile') }}">
{{ app.user }}
<i class="bi bi-nav bi-person-circle"></i>
</a>
</li>
<li class="nav-item nav-link">
{% if app.user %}
{% include "notifications.html.twig" %}
{% endif %}
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_logout') }}" title="{{ "Déconnexion"|trans }}">
<img src="{{ asset('assets/images/Icon/arrow-right-from-bracket-solid.svg')}}" alt="oups">
</a>
</li>
<li class="nav-item">
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<a class="nav-link" style="color: red;" href="{{ path('switch', {'_usurper': '_exit'}) }}"
title="Terminer l'usurpation">
<i class="fa fa-user-secret"></i>
</a>
{% endif %}
</li>
</ul>
{% endif %}
<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>
</nav>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment