From dba8a665753e97dc12b7f9d7d6d5b375178ab116 Mon Sep 17 00:00:00 2001
From: Mathieu <m@unseult.net>
Date: Fri, 17 Sep 2021 19:42:34 +0200
Subject: [PATCH 1/2] Fix #108

Change line 991 is a no-brainer, no side effect.

About removing .profile rule line 51 : I can't see the use of fixing the width for .profile to 230px. It seems to be ok to remove this rule.
---
 static/galene.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/static/galene.css b/static/galene.css
index 0cd23550..6dbb79a5 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -48,10 +48,6 @@
     background-color: #eee;
 }
 
-.profile {
-    width: 230px;
-}
-
 .profile-logo {
     float: left;
     width: 50px;
@@ -992,7 +988,7 @@ h1 {
     padding: 10px;
     background: #fff;
     height: calc(100% - 56px);
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
 }
 

From 9aff6019078967d1b23470756c496fe7ce6f7f3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathieu=20Carrandi=C3=A9?= <m@unseult.net>
Date: Sun, 19 Sep 2021 14:31:58 +0200
Subject: [PATCH 2/2] Change behavior for settings panel, it slides instead of
 grows. That fix the weird render during transition.

---
 static/galene.css  |  7 ++++++-
 static/galene.html |  2 +-
 static/galene.js   | 18 +++---------------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/static/galene.css b/static/galene.css
index 6dbb79a5..efafb44a 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -926,7 +926,8 @@ h1 {
     position: fixed;
     -webkit-transition: all .2s ease-out;
     transition: all .2s ease-out;
-    width: 0px;
+    width: 250px;
+    transform: translateX(100%);
     /* on top of everything */
     z-index: 2999;
     top: 0;
@@ -936,6 +937,10 @@ h1 {
     overflow-y: hidden;
 }
 
+.sidenav.opened {
+    transform: translateX(0);
+}
+
 .sidenav a {
     padding: 10px 20px;
     text-decoration: none;
diff --git a/static/galene.html b/static/galene.html
index 07cd2830..c380353a 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -142,7 +142,7 @@ <h1 id="title" class="header-title">Galène</h1>
     <div id="sidebarnav" class="sidenav">
       <div class="sidenav-header">
         <h2>Settings</h2>
-        <a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
+        <a class="closebtn" id="closeside"><i class="fas fa-times" aria-hidden="true"></i></a>
       </div>
       <div class="sidenav-content" id="optionsdiv">
         <div id="profile" class="profile invisible">
diff --git a/static/galene.js b/static/galene.js
index c75ecdfc..026502b4 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -3009,12 +3009,8 @@ document.getElementById('disconnectbutton').onclick = function(e) {
     closeNav();
 };
 
-function openNav() {
-    document.getElementById("sidebarnav").style.width = "250px";
-}
-
 function closeNav() {
-    document.getElementById("sidebarnav").style.width = "0";
+    document.getElementById("sidebarnav").classList.remove("opened");
 }
 
 document.getElementById('sidebarCollapse').onclick = function(e) {
@@ -3023,18 +3019,10 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
 };
 
 document.getElementById('openside').onclick = function(e) {
-      e.preventDefault();
-      let sidewidth = document.getElementById("sidebarnav").style.width;
-      if (sidewidth !== "0px" && sidewidth !== "") {
-          closeNav();
-          return;
-      } else {
-          openNav();
-      }
+    document.getElementById("sidebarnav").classList.add("opened");
 };
 
-
-document.getElementById('clodeside').onclick = function(e) {
+document.getElementById('closeside').onclick = function(e) {
     e.preventDefault();
     closeNav();
 };