From 3679b59a03fdc68a2709ae344d3ad26d3e47146d Mon Sep 17 00:00:00 2001
From: John Doe <kitoy@kitoy.me>
Date: Mon, 3 Nov 2025 06:12:44 +0100
Subject: [PATCH] add responsive design for phone

---
 static/pywallter.css          | 81 +++++++++++++++++++++++++++++++----
 templates/_header.html        | 22 ++++++++--
 templates/_nav_userlogin.html | 32 +++++++-------
 3 files changed, 107 insertions(+), 28 deletions(-)

diff --git a/static/pywallter.css b/static/pywallter.css
index b52d777..c9d9c0b 100644
--- a/static/pywallter.css
+++ b/static/pywallter.css
@@ -1,4 +1,5 @@
 
+
 body
 {
     display: grid; 
@@ -11,14 +12,12 @@ body
 	"Menu Menu footer footer footer footer footer"
 }
 
-
-header{
-    grid-area: header; 
-    width: 100%;
+.menu-button {
+    visibility: hidden;
 }
 
-body > main {
-    width: 100%;
+header {
+    grid-area: header; 
 }
 
 main
@@ -40,6 +39,74 @@ main > nav
 }
 
 
+
+@media only screen and (max-width: 600px) 
+{
+    body {
+	grid-template-areas:
+	    "header"
+	    "main "
+	    "footer";	
+    }
+
+    .menu-header {
+	font-size: 4vw;
+	width: 20vw;
+	height: 31vw;
+    }
+    
+    .menu-button {
+	visibility: visible;
+    }
+    
+    .hide-menu {
+	grid-template-areas:
+	    "header"
+	    "main "
+	    "footer";
+    }
+
+    .print-menu
+    {
+	grid-template-areas:
+	    "header"
+	    "Menu"
+	    "main"
+	    "main"
+	    "footer";
+    }
+    
+    .print-menu > aside {
+	max-width: unset;
+    }
+
+    aside > nav {
+	margin-left: 30px;
+    }
+    
+    nav ul {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: center;
+	text-align: center;
+	gap: 20px;
+    }
+
+    nav li {
+	word-break: keep-all;
+	width: 115px;
+	height: 100px;
+        
+    }
+    
+    nav .icons {
+	width: 80px;
+	height: 50px;
+    }
+     
+}
+
+
 aside
 {
     grid-area: Menu;
@@ -112,7 +179,6 @@ header > nav {
 }
 
 aside > nav {
-   
     padding-left: 1.5vw;
 }
 
@@ -152,4 +218,3 @@ nav > ul:first-of-type, ul
     color: var(--pico-color-grey-950);
 
 }
-
diff --git a/templates/_header.html b/templates/_header.html
index d2db473..d2f64a0 100644
--- a/templates/_header.html
+++ b/templates/_header.html
@@ -1,21 +1,26 @@
 <header>
   <nav>
+    <button class="menu-button menu-header" onclick="toggleMenu()">
+      Menu
+      <span class="menu-icon"></span>
+    </button>
+
     <a href="/logs/">
-      <button>
+      <button class="menu-header">
 	Mes logs <br/>
 	<span class="lists-rounded"></span>
       </button>
     </a>
     
     <a href="/logout/">
-      <button>
-	Se déconnecter <br/>
+      <button class="menu-header">
+	Deconnexion <br/>
 	<span class="logout"></span>
       </button>
     </a>
 
     <details class="dropdown">
-      <summary role="button" class="secondary">Theme</summary>
+      <summary role="button" class="secondary menu-header">Theme</summary>
       <ul>
         <li><a href="#" data-theme-switcher="auto">Auto</a></li>
         <li><a href="#" data-theme-switcher="light">Clair</a></li>
@@ -25,3 +30,12 @@
   </nav>
 
 </header>
+
+<script>
+  
+  function toggleMenu() {
+  document.body.classList.toggle('print-menu');
+  document.body.classList.add('hide-menu');
+  }
+  
+</script>
diff --git a/templates/_nav_userlogin.html b/templates/_nav_userlogin.html
index 3f8ed05..61a0173 100644
--- a/templates/_nav_userlogin.html
+++ b/templates/_nav_userlogin.html
@@ -8,43 +8,43 @@
       <span class="blog"></span>
       Mon blog
     </h4>
+   
     <ul>
       <li>
 	
-	<a href="/myblog/new-article/" {% if request.path == "/myblog/new-article/" %} class="invert" {% endif %} > <span class="new-article-blog"></span> 
+	<a href="/myblog/new-article/" {% if request.path == "/myblog/new-article/" %} class="invert" {% endif %} > <span class="icons new-article-blog"></span> 
 	  Ecrire un billet </a>
       </li>
       <li>
-	<a href="/myblog/list-articles/" {% if request.path == "/myblog/list-articles/" %} class="invert" {% endif %} ><span class="list-articles-blog"></span>
+	<a href="/myblog/list-articles/" {% if request.path == "/myblog/list-articles/" %} class="invert" {% endif %} ><span class="icons list-articles-blog"></span>
 	  Gérer mes billets
 	</a>
       </li>
       <li>
-	<a href="/myblog/personalize/" {% if request.path == "/myblog/personalize/" %} class="invert" {% endif %} ><span class="custom-blog"></span>
-	  Configurer mon site et mon blog
+	<a href="/myblog/personalize/" {% if request.path == "/myblog/personalize/" %} class="invert" {% endif %} ><span class="icons custom-blog"></span>
+	  Configurer mon site web
         </a>
       </li>
       <li>
-	<a href="/myblog/view/"  {% if request.path == "/myblog/view/" %} class="invert" {% endif %} ><span class="view-blog" aria-hidden="true"></span>         
+	<a href="/myblog/view/"  {% if request.path == "/myblog/view/" %} class="invert" {% endif %} ><span class="icons view-blog" aria-hidden="true"></span>         
 	  Voir mon blog
         </a>
       </li>
     </ul>
-    
-      
+          
     <h4>
       <span class="folder-home"></span> Mes fichiers
     </h4>
     
     <ul>
       <li>
-	<a href="/view/" {% if request.path == "/view/" %} class="invert" {% endif %}> <span class="myfiles"></span> Mes dossiers personels </a>
+	<a href="/view/" {% if request.path == "/view/" %} class="invert" {% endif %}> <span class="icons myfiles"></span> Mes dossiers personels </a>
       </li>
       <li>
-	<a href="/gallery/" {% if request.path == "/gallery/" %} class="invert" {% endif %} > <span class="mygallery"></span>  Ma gallerie d'images </a>
+	<a href="/gallery/" {% if request.path == "/gallery/" %} class="invert" {% endif %} > <span class="icons mygallery"></span>  Ma gallerie d'images </a>
       </li>
       <li>
-	<a href="/filesupload/" {% if request.path == "/filesupload/" %} class="invert" {% endif %}> <span class="send-files"></span> Envoyer des fichiers </a>
+	<a href="/filesupload/" {% if request.path == "/filesupload/" %} class="invert" {% endif %}> <span class="icons send-files"></span> Envoyer des fichiers </a>
       </li>
     </ul>
     
@@ -57,12 +57,12 @@
     
     <ul>
       <li>
-	<a href="/mymailbox/alias" {% if request.path == "/mymailbox/messagerie" %} class="invert" {% endif %}><span class="infos-messaging"></span>
+	<a href="/mymailbox/alias" {% if request.path == "/mymailbox/messagerie" %} class="invert" {% endif %}><span class="icons infos-messaging"></span>
           Ma messagerie 
 	</a>
       </li>
       <li>
-	<a href="/mymailbox/alias"  {% if request.path == "/mymailbox/alias" %} class="invert" {% endif %} ><span class="myalias"></span>
+	<a href="/mymailbox/alias"  {% if request.path == "/mymailbox/alias" %} class="invert" {% endif %} ><span class="icons myalias"></span>
           Gerer mes alias
 	</a>
       </li>
@@ -78,11 +78,11 @@
       <span class="caret"></span>
     </h4>
     <ul>
-      <li ><a href="/profil/"  {% if request.path == "/profil/" %} class="invert" {% endif %} ><span class="configure-profile"></span> Personnaliser  mon profil</a></li>
-      <li><a href="/profil/change-password/"  {% if request.path == "/profil/change-password/" %} class="invert" {% endif %} > <span class="mypassword" aria-hidden="true"></span>
+      <li ><a href="/profil/"  {% if request.path == "/profil/" %} class="invert" {% endif %} ><span class="icons configure-profile"></span> Personnaliser  mon profil</a></li>
+      <li><a href="/profil/change-password/"  {% if request.path == "/profil/change-password/" %} class="invert" {% endif %} > <span class="icons mypassword" aria-hidden="true"></span>
 	  Changer mon mot de passe </a></li>
-      <li><a href="/delete_me/"  {% if request.path == "/delete_me/" %} class="invert" {% endif %} ><span class="user-delete"></span> Supprimer mon compte </a></li>
-      <li><a href="/invitation/"  {% if request.path == "invitation/" %} class="invert" {% endif %} ><span class="invite"></span> Inviter une personne</a></li>
+      <li><a href="/delete_me/"  {% if request.path == "/delete_me/" %} class="invert" {% endif %} ><span class="icons user-delete"></span> Supprimer mon compte </a></li>
+      <li><a href="/invitation/"  {% if request.path == "invitation/" %} class="invert" {% endif %} ><span class="icons invite"></span> Inviter une personne</a></li>
     </ul>
   
   </nav>