From ec37680f0411be5ab0eeb38aa76ccdad9d11f7c2 Mon Sep 17 00:00:00 2001
From: Franciszek Stachura <fbstachura@gmail.com>
Date: Mon, 9 Sep 2024 22:44:35 +0200
Subject: [PATCH] web: Add ability to hide sidebar on desktop layout

The sidebar is hidden by default
---
 static/script.js       |  5 +++--
 static/style.css       | 48 ++++++++++++++++++++++++------------------
 templates/sidebar.html |  2 +-
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/static/script.js b/static/script.js
index 5298c15..fa27b8b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -77,11 +77,12 @@ var openMenu = document.querySelector('.open-menu')
 var wrapper = document.querySelector('.wrapper')
 openMenu.onclick = tag.onclick = function (e) {
   e.preventDefault()
-  wrapper.classList.toggle('show-menu')
+  document.documentElement.classList.toggle('show-menu');
 }
 sidebar.onclick = function (e) {
   if (e.target === this || e.target.classList.contains('close-menu')) {
-    wrapper.classList.remove('show-menu')
+    document.documentElement.classList.remove('show-menu');
+    window.localStorage.setItem('show-sidebar', false);
   }
 }
 
diff --git a/static/style.css b/static/style.css
index c284ca3..d28aaad 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1035,22 +1035,14 @@ main {
   width: 100%;
   height: auto;
   background: rgba(3, 8, 35, 0);
-  -webkit-transition: left 0.2s ease 0.2s, background 0.2s ease;
-  transition: left 0.2s ease 0.2s, background 0.2s ease;
 }
 .sidebar .filter,
 .sidebar nav {
   width: 60%;
   max-width: 330px;
 }
-.show-menu .sidebar {
-  background: rgba(3, 8, 35, 0.5);
-  left: 0;
-  -webkit-transition: left 0.2s ease, background 0.2s ease 0.2s;
-  transition: left 0.2s ease, background 0.2s ease 0.2s;
-}
 
-/* tablet */
+/* tablet and above */
 @media screen and (min-width: 600px) {
   .filter input,
   .search input {
@@ -1085,9 +1077,21 @@ main {
   }
 }
 
+/* tablet only */
+@media screen and (max-width: 1000px) {
+  .sidebar {
+    -webkit-transition: left 0.2s ease 0.2s, background 0.2s ease;
+    transition: left 0.2s ease 0.2s, background 0.2s ease;
+  }
+  .show-menu .sidebar {
+    position: fixed;
+    left: 0;
+    background: rgba(3, 8, 35, 0.5);
+  }
+}
+
 /* desktop */
 @media screen and (min-width: 1000px) {
-  .open-menu,
   .close-menu {
     display: none;
   }
@@ -1095,7 +1099,6 @@ main {
     position: absolute;
     top: -45px;
     bottom: -25px;
-    left: 0;
     -webkit-box-ordinal-group: 1;
         -ms-flex-order: 0;
             order: 0;
@@ -1107,29 +1110,35 @@ main {
   .sidebar .filter, .sidebar nav {
     width: 100%;
   }
+  .sidebar nav {
+    height: 100%;
+  }
   .workspace {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
     padding-left: 235px;
   }
-  .topbar {
+  .show-menu .topbar, .no-js .topbar {
     padding-left: 235px;
   }
-  .footer {
+  .show-menu .footer, .no-js .footer {
     padding-left: calc(2.5rem + 235px);
   }
+  .show-menu .sidebar {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+  }
   .linenos {
     left: 235px;
   }
   .no-js .sidebar {
-    left: auto;
-    height: auto;
-    overflow: visible;
+    left: 0;
+    height: 100%;
   }
 }
 
-
 /* if browser support position: sticky */
 @supports ((position: -webkit-sticky) or (position: sticky)) {
   .js .header {
@@ -1166,17 +1175,14 @@ main {
 
   /* desktop */
   @media screen and (min-width: 1000px) {
-    .js .linenos {
+    .show-menu .js .linenos {
       left: 235px;
     }
     .js .workspace {
       padding-left: unset;
     }
     .js .sidebar {
-      position: -webkit-sticky;
-      position: sticky;
       top: 0;
-      left: 0;
       height: 100vh;
       margin-top: -45px;
       margin-bottom: -25px;
diff --git a/templates/sidebar.html b/templates/sidebar.html
index dc1c5ac..dc9eebc 100644
--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@@ -6,8 +6,8 @@
         {%- endfor %}
         </select>
         <input class="filter-input" placeholder="Filter tags">
-        <button class="icon-filter" tabindex="-1"><span class="screenreader">Filter tags</span></button>
         <a title="Close Menu" class="close-menu icon-cross"></a>
+        <button class="icon-filter" tabindex="-1"><span class="screenreader">Filter tags</span></button>
     </div>
     <nav>
         <h3 class="screenreader">Projects</h3>