feat: modif app pour sidedrawer

src/app/app.html

@@ -1,5 +1,20 @@
 <app-header [userEmail]="connectedUserEmail()" />
-<app-sidebar [userEmail]="connectedUserEmail()"/>
+<div class="drawer lg:drawer-open">
-<main>
+  <!-- Input pour le toggle de la drawer -->
-<router-outlet />
+  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
-</main>
+
+  <!-- Contenu principal de la page (router-outlet) -->
+  <div class="drawer-content flex flex-col">
+    <main class="flex-grow p-4">
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+
+  <!-- Sidebar -->
+  <div class="drawer-side is-drawer-close:overflow-visible">
+    <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
+    <div class="flex min-h-full flex-col items-start bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
+      <app-sidebar [userEmail]="connectedUserEmail()" />
+    </div>
+  </div>
+</div>

src/app/shared/header/header.html

@@ -1,3 +1,8 @@
-<div id="header" class="flex justify-center items-center w-full py-2">
+<div id="header" class="flex justify-between items-center w-full py-2 px-4">
+    <label for="my-drawer-4" aria-label="open sidebar" class="btn btn-square btn-ghost">
+        <!-- Sidebar toggle icon -->
+        <svg fill="#FFFFFF" class="h-full" viewBox="-1 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><path d="M16.417 9.583A7.917 7.917 0 1 1 8.5 1.666a7.917 7.917 0 0 1 7.917 7.917zm-2.967-3.47a.792.792 0 0 0-.792-.792H4.342a.792.792 0 1 0 0 1.583h8.316a.792.792 0 0 0 .792-.791zm0 3.487a.792.792 0 0 0-.792-.791H4.342a.792.792 0 1 0 0 1.583h8.316a.792.792 0 0 0 .792-.792zm0 3.487a.792.792 0 0 0-.792-.791H4.342a.792.792 0 1 0 0 1.583h8.316a.792.792 0 0 0 .792-.792z"/></svg>
+    </label>
     <app-searchform/>
+    <div ><a class="btn btn-ghost text-xl" routerLink="/login">Login</a></div> 
 </div>

src/app/shared/sidebar/sidebar.html

@@ -1,4 +1,5 @@
-<div class="menu bg-base-100 shadow-sm" >              
+<!-- 
+ <div class="menu bg-base-100 shadow-sm" >              
         <div><a class="btn btn-ghost text-xl" routerLink="/home">Home</a></div>   
         <div><a class="btn btn-ghost text-xl" routerLink="/potd">Picture of the day</a></div>      
         <div><a class="btn btn-ghost text-xl" routerLink="/search">Search</a></div>      
@@ -10,3 +11,26 @@
             <div ><a class="btn btn-ghost text-xl" routerLink="/register">Register</a></div>        
         }
 </div>
+-->
+<ul class="menu w-full grow">
+  <li>
+    <a routerLink="/" class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block size-4">
+        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
+        <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+      </svg>
+      <span class="is-drawer-close:hidden">Homepage</span>
+    </a>
+  </li>
+  <li>
+    <a routerLink="/settings" class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Settings">
+      <svg xmlns="http://www://w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block size-4">
+        <path d="M20 7h-9"></path>
+        <path d="M14 17H5"></path>
+        <circle cx="17" cy="17" r="3"></circle>
+        <circle cx="7" cy="7" r="3"></circle>
+      </svg>
+      <span class="is-drawer-close:hidden">Settings</span>
+    </a>
+  </li>
+</ul>