From: Chris Fulljames <christianfulljames@gmail.com>
Date: Tue, 18 Feb 2025 23:27:15 +0000 (-0500)
Subject: Dynamically update navbar
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=39851c6fa1ddba0df4279966ce8f7cf69490411e;p=littlesongplace.git

Dynamically update navbar
---

diff --git a/main.py b/main.py
index 37baa57..abd6748 100644
--- a/main.py
+++ b/main.py
@@ -936,7 +936,12 @@ def auto_redirect(url):
 @app.context_processor
 def inject_global_vars():
     use_json = request.args.get("request-type", None) == "ajax"
-    return dict(gif_data=get_gif_data(), current_user_playlists=get_current_user_playlists(), use_json=use_json, dumps=json.dumps)
+    return dict(
+        gif_data=get_gif_data(),
+        current_user_playlists=get_current_user_playlists(),
+        use_json=use_json,
+        dumps=json.dumps,
+    )
 
 
 ################################################################################
diff --git a/templates/base.html b/templates/base.html
index 26390c1..0aa52b8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,8 +40,18 @@
                     // Trigger event to signal new page has loaded
                     var event = new Event("DOMContentLoaded");
                     document.dispatchEvent(event);
-                });
 
+                    // Refresh navbar in case logged-in status changed
+                    updateNavbar(data.username);
+                });
+            }
+            function updateNavbar(username) {
+                var loggedIn = username ? true : false;
+                document.querySelectorAll(".nav-logged-in").forEach((e) => {e.hidden = !loggedIn;});
+                document.querySelectorAll(".nav-logged-out").forEach((e) => {e.hidden = loggedIn;});
+                if (loggedIn) {
+                    document.getElementById("logged-in-status").innerText = `Signed in as ${username}`;
+                }
             }
         </script>
     </head>
@@ -107,24 +117,23 @@
             <div class="navbar">
                 <a href="/">Home</a>
                 <a href="/site-news">News</a>
-                {% if "username" in session %}
-                    <a href="/users/{{ session["username"] }}">My Profile</a>
-                    <a href="/activity"><span id="activity-indicator" hidden></span>Activity</a>
-                    <a href="/logout">Sign Out</a>
-                {% else %}
-                    <a href="/signup">Create Account</a>
-                    <a href="/login">Sign In</a>
-                {% endif %}
-
-                {% if "username" in session %}
-                    Signed in as {{ session["username"] }}
-                {% endif %}
+
+                <a href="/users/{{ session["username"] }}" class="nav-logged-in" hidden>My Profile</a>
+                <a href="/activity"><span id="activity-indicator" hidden></span>Activity</a>
+                <a href="/logout" class="nav-logged-in" hidden>Sign Out</a>
+
+                <a href="/signup" class="nav-logged-out">Create Account</a>
+                <a href="/login" class="nav-logged-out">Sign In</a>
+
+                <span class="nav-logged-in" id="logged-in-status" hidden></span>
             </div>
         </div>
 
         {% if "username" in session %}
         <!-- Periodically update activity status indicator -->
         <script>
+            updateNavbar("{{ session["username"] }}");
+
             async function checkForNewActivity() {
                 const indicator = document.getElementById("activity-indicator")
                 const response = await fetch("/new-activity");
diff --git a/templates/base.json b/templates/base.json
index 03cdf69..537819b 100644
--- a/templates/base.json
+++ b/templates/base.json
@@ -1,4 +1,5 @@
 {
+    "username": "{{ session['username'] | safe }}",
     "title": {{ dumps(self.title()) | safe }},
     "body": {{ dumps(self.body()) | safe }}
 }