login + logout +header

templates/header.html.twig

@@ -1,5 +1,7 @@
 <header>
 <nav>
+  <ul>
+  </ul>
   <ul>
     <li><img src="/static/img/logo.svg" alt="DrWhy" height="24" width="24"></li>
   </ul>
@@ -12,59 +14,54 @@
     <li><a href="#">K-9 and Company</a></li>
     <li><a href="#">Class</a></li>
   </ul>
+  <ul>
+    {% if user is defined %}
+    <details role="list">
+      <summary aria-haspopup="listbox" role="button">
+        <img src="{{user.image}}" alt="avatar" class="rounded" width="50" height="50">
+      </summary>
+      <ul role="listbox">
+        <li><a class="dropdown-item" href="/profile/{{user.id}}">Profil</a></li>
+        <li><a class="dropdown-item text-danger" href="/logout">Deconnexion</a></li>
+      </ul>
+    </details>
+    {% else %}
+      <button class="contrast" data-target="modal-signin" onClick="toggleModal(event)">Inscription</button>
+      <button class="contrast" data-target="modal-login" onClick="toggleModal(event)">Connexion</button>
+      {# <button type="button" class="btn btn-primary text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalSignUp">Inscription</button>
+      <button type="button" class="btn btn-black text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalLogIn">Connexion</button> #}
+    {% endif %}
+  </ul>
+  <ul>
+  </ul>
 </nav>
+<dialog id="modal-login">
+  <article>
+    <a href="#close"
+      aria-label="Close"
+      class="close"
+      data-target="modal-login"
+      onClick="toggleModal(event)">
+    </a>
+    {% include 'forms/user/login.html.twig' %}
+  </article>
+</dialog>
+<dialog id="modal-signin">
+  <article>
+    <a href="#close"
+      aria-label="Close"
+      class="close"
+      data-target="modal-signin"
+      onClick="toggleModal(event)">
+    </a>
+    {% include 'forms/user/register.html.twig' %}
+  </article>
+</dialog>
 
 
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark" id="navbar" style="background-color: hsl(210deg 11% 20%) !important;">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="/">
-        <img src="/static/img/logo.svg" alt="DrWhy" height="24">
-      </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarCollapse">
-        <ul class="navbar-nav me-auto mb-2 mb-md-0">
-          <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="/#anchorStart">COMMENCER</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/#features">FONCTIONNALITES</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/#example">EXEMPLES</a>
-          </li>
-        </ul>
-         {# <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
-          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
-        </form>  #}
-
-        {% if user is defined %}
-          <a href="/dashboard" class="btn btn-primary">Tableaux de bord</a>
-          <div class="dropdown text-end ms-2">
-            <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
-              <img src="{{user.image}}" alt="avatar" class="rounded" width="38" height="38">
-            </a>
-            <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="left:-6.5rem">
-              <li><a class="dropdown-item" href="/profile/{{user.id}}">Profil</a></li>
-              <li><hr class="dropdown-divider"></li>
-              <li><a class="dropdown-item text-danger" href="/logout">Deconnexion</a></li>
-            </ul>
-          </div>
-        {% else %}
-          <button type="button" class="btn btn-primary text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalSignUp">Inscription</button>
-          <button type="button" class="btn btn-black text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalLogIn">Connexion</button>
-        {% endif %}
-      </div>
-    </div>
-  </nav>
-</header>
-
- {# <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">  #}
-
 {% if user is not defined %}
 {# Modal pour LogIn #}
-<div class="modal fade" role="dialog" id="modalLogIn">
+{# <div class="modal fade" role="dialog" id="modalLogIn">
   <div class="modal-dialog" role="document">
     <div class="modal-content rounded-5 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
@@ -77,10 +74,10 @@
       </div>
     </div>
   </div>
-</div>
+</div> #}
 
 {# Modal pour SignUp #}
-<div class="modal fade" role="dialog" id="modalSignUp">
+{# <div class="modal fade" role="dialog" id="modalSignUp">
   <div class="modal-dialog" role="document">
     <div class="modal-content rounded-5 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
@@ -93,5 +90,5 @@
       </div>
     </div>
   </div>
-</div>
+</div> #}
 {% endif %}