From b5a2cb95366554c0f71ef720e14bb2314fb929ba Mon Sep 17 00:00:00 2001
From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 21 Jun 2025 14:59:41 -0400
Subject: [PATCH] Fix back bug and more work on navigation

---
 src/littlesongplace/static/nav.js       | 32 +++++++++++++++++++++++++
 src/littlesongplace/static/player.js    |  6 ++---
 src/littlesongplace/static/styles.css   | 16 +++++++++----
 src/littlesongplace/templates/base.html |  8 -------
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/littlesongplace/static/nav.js b/src/littlesongplace/static/nav.js
index aa8c2b5..51421d3 100644
--- a/src/littlesongplace/static/nav.js
+++ b/src/littlesongplace/static/nav.js
@@ -1,4 +1,9 @@
+var m_firstLoadNav = true;
 document.addEventListener("DOMContentLoaded", async (e) => {
+    if (m_firstLoadNav) {
+        m_firstLoadNav = false;
+        window.history.replaceState(document.documentElement.outerHTML, "");
+    }
 
     // Handle link clicks with AJAX
     document.querySelectorAll("a").forEach((anchor) => {
@@ -31,6 +36,11 @@ document.addEventListener("DOMContentLoaded", async (e) => {
         document.getElementById("my-profile").href = `/users/${username}`;
     }
 
+    // Add event handler to navbar links to hide menu on mobile
+    document.querySelectorAll("#navbar a, #page-header div a").forEach((link) => {
+        link.addEventListener("click", (e) => {hideNavMenu(e)});
+    });
+
     // Update activity indicator status
     checkForNewActivity();
 
@@ -135,6 +145,7 @@ async function handleAjaxResponse(response) {
 
         // Get page content from response
         var text = await response.text();
+        console.log("PUSH", url);
         window.history.pushState(text, "", url);
 
         updatePageState(text);
@@ -251,3 +262,24 @@ function updateImageColors() {
     });
 }
 
+// Navigation menu visibility
+const sizeQuery = window.matchMedia('(min-width: 480px)');
+function showNavMenu() {
+    document.getElementById('page-header').style['display'] = 'block';
+}
+
+function hideNavMenu() {
+    if (!sizeQuery.matches) {
+        document.getElementById('page-header').style['display'] = 'none';
+    }
+}
+
+sizeQuery.addListener((e) => {
+    if (e.matches) { // Switch from small to big, show menu
+        showNavMenu();
+    }
+    else {
+        hideNavMenu();
+    }
+});
+
diff --git a/src/littlesongplace/static/player.js b/src/littlesongplace/static/player.js
index e48fe81..9338e3e 100644
--- a/src/littlesongplace/static/player.js
+++ b/src/littlesongplace/static/player.js
@@ -177,14 +177,14 @@ function songUpdate() {
 }
 
 // Add event listeners
-var m_firstLoad = true;
+var m_firstLoadPlayer = true;
 document.addEventListener("DOMContentLoaded", (event) => {
 
     // The player never gets rebuilt, so we only need to set it up the first time
-    if (!m_firstLoad) {
+    if (!m_firstLoadPlayer) {
         return;
     }
-    m_firstLoad = false;
+    m_firstLoadPlayer = false;
 
     // Audio playback position while playing
     var audio = document.getElementById("player-audio");
diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index ed13756..930362d 100644
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -254,13 +254,14 @@ input[type=range]::-moz-range-thumb {
 #page-header {
     display: none;
     position: fixed;
-    box-shadow: 5px 5px 0px 0px var(--black);
-    border: 1px solid var(--black);
-    border-radius: var(--radius);
     background-color: var(--yellow);
-    margin: 10px;
+    margin: 0px;
     padding: 5px;
-    width: calc(100% - 30px);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
 }
 
 #navbar {
@@ -278,6 +279,10 @@ input[type=range]::-moz-range-thumb {
         width: auto;
         display: block;
         position: static;
+        margin: 10px;
+        box-shadow: 5px 5px 0px 0px var(--black);
+        border: 1px solid var(--black);
+        border-radius: var(--radius);
     }
     #navbar {
         flex-direction: row;
@@ -339,6 +344,7 @@ input[type=range]::-moz-range-thumb {
     background: none;
     border: none;
     padding: 10px;
+    padding-bottom: 0px;
     /* margin-left: 10px; */
     /* margin-top: 10px; */
     /* left: 10px; */
diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index ae16c05..5436c23 100644
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -24,14 +24,6 @@
         <button id="mobile-menu-btn" onclick="showNavMenu()">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M20 17.5a1.5 1.5 0 0 1 .144 2.993L20 20.5H4a1.5 1.5 0 0 1-.144-2.993L4 17.5zm0-7a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 0 1 0-3zm0-7a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 1 1 0-3z"/></g></svg>
         </button>
-        <script>
-            function showNavMenu() {
-                document.getElementById('page-header').style['display'] = 'block';
-            }
-            function hideNavMenu() {
-                document.getElementById('page-header').style['display'] = 'none';
-            }
-        </script>
 
         <div id="page-header">
             <button id="mobile-hide-header-btn" onclick="hideNavMenu()">
-- 
2.39.5