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

public/assets/css/app.css

@@ -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 *******/
@@ -634,3 +641,9 @@ 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

 <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') }}">
@@ -75,18 +79,17 @@
 
                     </ul>
 
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
-                        <div class="container-fluid">
-                            <!-- ... Your other navigation elements ... -->
+                {% endif %}
 
-                            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            </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) }}
@@ -111,7 +114,6 @@
                 <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">
@@ -128,14 +130,4 @@
         {% endif %}
 
     </div>
-
-
-
-        {% 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