From 1a9d95b701093538379526f58ad8d7c9487f24bf Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Tue, 18 Oct 2022 13:00:41 +0100
Subject: [PATCH] New JS for menu

---
 js/navbar.js       | 21 ++++++++++++---------
 new_index.html     |  6 ++++--
 style/new_menu.css | 15 ++++++++++++---
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/js/navbar.js b/js/navbar.js
index b29722d..8769381 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -6,13 +6,16 @@ function collapseSidebar() {
   document.getElementById("sidebar").style.width = "0px";
 }
 
-function sidebarToggle() {
-  var bar = document.getElementById("sidebar");
-  if (bar.style.height === "0px") {
-    bar.style.height = "100%";
-    bar.style.display = "block";
-  } else {
-    bar.style.height = "0px";
-    bar.style.display = "none";
-  }
+function openSidebar() {
+  document.getElementById("sidebar").style.height = "100%";
+  document.getElementById("sidebar").style.display = "block";
+  document.getElementById("sidebar_open_short").style.display = "none";
+  document.getElementById("sidebar_close_short").style.display = "block";
+}
+
+function closeSidebar() {
+  document.getElementById("sidebar").style.height = "0%";
+  document.getElementById("sidebar").style.display = "none";
+  document.getElementById("sidebar_open_short").style.display = "block";
+  document.getElementById("sidebar_close_short").style.display = "none";
 }
\ No newline at end of file
diff --git a/new_index.html b/new_index.html
index f8a040f..fb66e8d 100644
--- a/new_index.html
+++ b/new_index.html
@@ -25,8 +25,10 @@
         </picture>
       </div>
       <div class="menubar_hamburger">
-        <button class="sidebar_open_short" onclick="sidebarToggle()">&#9776;</button>
-        <button class="sidebar_open_long" onclick="sidebarToggle()">Menu &#9776;</button>
+        <button id="sidebar_open_short" class="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
+        <button class="sidebar_open_long" onclick="sidebarOpen()">Menu &#9776;</button>
+        <button id="sidebar_close_short" class="sidebar_close_short" onclick="sidebarClose()">&times;</button>
+        <button class="sidebar_close_long" onclick="sidebarClose()">Close &times;</button>
       </div>
     </div>
     <div id="sidebar" class="sidebar">
diff --git a/style/new_menu.css b/style/new_menu.css
index 6f2fb4e..98e5904 100644
--- a/style/new_menu.css
+++ b/style/new_menu.css
@@ -20,11 +20,20 @@
     padding: 5px;
 }
 
-.sidebar_open_long {
-    display: none;
-}
+.sidebar_open_long {display: none;}
+.sidebar_close_long {display: none;}
 
 .sidebar_open_short {
+    display: block;
+    font-size: larger;
+    background-color: slategrey;
+    color: azure;
+    border: none;
+    border-radius: 2px;
+}
+
+.sidebar_short_close {
+    display: none;
     font-size: larger;
     background-color: slategrey;
     color: azure;