From: Chris Fulljames <christianfulljames@gmail.com>
Date: Sat, 21 Jun 2025 16:52:54 +0000 (-0400)
Subject: Move mobile nav work
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=24d3fb0196093310af0edb4adfd074c1adde9238;p=littlesongplace.git

Move mobile nav work
---

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index de81bfe..ed13756 100644
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -58,6 +58,7 @@ h1, h2, h3, h4 {
 h1 {
     font-size: 40px;
     text-align: center;
+    margin-top: 10px;
 }
 
 h2 {
@@ -252,28 +253,38 @@ input[type=range]::-moz-range-thumb {
 /* Desktop Navbar */
 #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;
     padding: 5px;
-}
-@media screen and (min-width: 480px) {
-    #page-header {
-        display: block;
-    }
+    width: calc(100% - 30px);
 }
 
 #navbar {
     display: flex;
     flex-wrap: wrap;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;
     padding-bottom: 10px;
 }
 
+@media screen and (min-width: 480px) {
+    #page-header {
+        width: auto;
+        display: block;
+        position: static;
+    }
+    #navbar {
+        flex-direction: row;
+    }
+}
+
+
 #activity-indicator {
     width: 8px;
     height: 8px;
@@ -284,12 +295,8 @@ input[type=range]::-moz-range-thumb {
 
 /* Mobile Navbar */
 #mobile-navbar {
-    position: fixed;
-    width: calc(100% - 20px);
-    left: 10px;
-    bottom: 5px;
-    margin-left: auto;
-    margin-right: auto;
+    /* position: fixed; */
+    margin: 10px;
     padding: 5px 0px;
     display: flex;
     justify-content: space-evenly;
@@ -298,10 +305,17 @@ input[type=range]::-moz-range-thumb {
     border-radius: var(--radius);
     box-shadow: 3px 3px 0px 0px;
 }
+
 @media screen and (min-width: 480px) {
     #mobile-navbar {
         display: none;
     }
+    #mobile-menu-btn {
+        display: none;
+    }
+    #mobile-hide-header-btn {
+        display: none;
+    }
 }
 
 #mobile-navbar a {
@@ -319,6 +333,28 @@ input[type=range]::-moz-range-thumb {
     border-radius: var(--radius);
 }
 
+#mobile-menu-btn {
+    color: var(--black);
+    /* position: absolute; */
+    background: none;
+    border: none;
+    padding: 10px;
+    /* margin-left: 10px; */
+    /* margin-top: 10px; */
+    /* left: 10px; */
+    /* top: 10px; */
+}
+
+#mobile-hide-header-btn {
+    color: var(--black);
+    /* position: absolute; */
+    background: none;
+    border: none;
+    padding: 10px;
+    /* left: 2px; */
+    /* top: 5px; */
+}
+
 /* Upload/Edit Form */
 
 div.upload-form {
@@ -335,11 +371,6 @@ input[type=file] {
 }
 
 /* Profile */
-.profile-name {
-    text-align: center;
-    font-size: 40px;
-}
-
 .big-pfp-container {
     margin: 0 auto;
     width: 200px;
@@ -555,7 +586,7 @@ div.player {
     margin: 10px;
     padding: 10px;
     padding-bottom: 0px;
-    box-shadow: 0px 0px 10px 0px;
+    box-shadow: 3px 3px 0px 0px;
     border: 2px solid;
     border-radius: var(--radius);
     background: var(--yellow);
@@ -564,7 +595,7 @@ div.player {
 .mini-player {
     margin: 10px;
     padding-left: 10px;
-    box-shadow: 0px 0px 10px 0px;
+    box-shadow: 3px 3px 0px 0px;
     border: 2px solid;
     border-radius: var(--radius);
     background: var(--yellow);
diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index 5ad4ff9..ae16c05 100644
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -21,14 +21,28 @@
         <!-- Embedded image data -->
         {{ gif_data|safe }}
 
+        <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()">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><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="m12 14.122l5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879L6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z"/></g></svg>
+            </button>
             <div style="text-align: center;">
                 <!--<img class="title-image littlesongplace02">-->
-                <h1>little song place</h1>
+                <a href="/" style="text-decoration: none;"><h1>little song place</h1></a>
             </div>
-            <!-- Navbar -->
+            <!-- Navbar/Menu -->
             <div id="navbar">
-                <a href="/">Home</a>
                 <a href="/jams/1">Jam</a>
                 <a href="/about">About</a>
                 <a href="/site-news">News</a>
@@ -66,38 +80,6 @@
         <!-- Padding to prevent player from obscuring content -->
         <div id="scroll-padding"></div>
 
-        <!-- Mobile navigation bar -->
-        <div id="mobile-navbar">
-            <a href="/songs">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><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="M18.671 3.208A2 2 0 0 1 21 5.18V17a4 4 0 1 1-2-3.465V9.18L9 10.847V18q0 .09-.015.174A3.5 3.5 0 1 1 7 15.337v-8.49a2 2 0 0 1 1.671-1.973zM9 8.82l10-1.667V5.18L9 6.847z"/></g></svg>
-                <div>tunes</div>
-            </a>
-            <a href="/folks">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m1.984 12.25c-.53.468-1.223.75-1.984.75a3 3 0 0 1-1.984-.75a1 1 0 1 0-1.324 1.5A5 5 0 0 0 12 17a4.98 4.98 0 0 0 3.308-1.25a1 1 0 0 0-1.324-1.5M8.5 8c-1.087 0-1.958.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 0 0 1.788-.896C10.457 8.68 9.587 8 8.5 8m7 0c-1.087 0-1.957.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 1 0 1.788-.896C17.458 8.68 16.587 8 15.5 8"/></g></svg>
-                <div>folks</div>
-            </a>
-            <a href="/jams">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.848 2.395a1 1 0 0 1 1.108-.227l.111.056l.866.5a1 1 0 0 1 .488 1.02l-.026.12l-.567 1.983a1 1 0 0 1-1.344.649l-.118-.058l-1.534 2.656c.92.721 1.369 1.493 1.674 2.213c.223.523.414 1.205.306 1.939c-.105.712-.477 1.362-1.14 1.888l-.189.14c-.432.304-.46.56-.358.983l.174.65c.173.69.339 1.7.033 2.857c-.276 1.043-.943 1.865-1.7 2.411c-.745.538-1.666.871-2.538.826c-1.36-.07-2.749-.41-4.594-1.475s-2.834-2.098-3.574-3.24c-.475-.733-.647-1.698-.554-2.612c.094-.928.473-1.917 1.238-2.677c.784-.779 1.66-1.147 2.328-1.352l.315-.091l.272-.07c.524-.134.799-.233.88-.73l.017-.134c.085-.951.478-1.677 1.093-2.165c.58-.46 1.268-.635 1.832-.704c.712-.087 1.521-.092 2.486.243l.267.1l1.534-2.656a1 1 0 0 1-.303-1.462l.084-.1zm-6.78 13.685a1 1 0 0 0-1.099 1.668l.098.064l.866.5a1 1 0 0 0 1.098-1.668l-.098-.064l-.866-.5Zm.633-3.098a1.5 1.5 0 0 0 2.515 1.63l.083-.13a1.5 1.5 0 0 0-2.598-1.5"/></g></svg>
-                <div>jams</div>
-            </a>
-            <a href="/activity" class="nav-logged-in">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7v3.528a1 1 0 0 1-.105.447l-1.717 3.433A1.1 1.1 0 0 0 4.162 18h15.676a1.1 1.1 0 0 0 .984-1.592l-1.716-3.433a1 1 0 0 1-.106-.447V9a7 7 0 0 0-7-7m0 19a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21"/></g></svg>
-                <div>activity</div>
-            </a>
-            <a href="/users/{{ session['username'] }}" class="nav-logged-in">
-                <img id="mobile-nav-pfp" src="/static/lsp_notes.png" width="20" height="20"/>
-                <div>profile</div>
-            </a>
-            <a href="/signup" class="nav-logged-out">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-4H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h4z"/></g></svg>
-                <div>sign up</div>
-            </a>
-            <a href="/login" class="nav-logged-out">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M14.902 19.512C13.831 20.583 12 19.825 12 18.31V16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8V5.69c0-1.515 1.831-2.273 2.902-1.202l6.453 6.451a1.5 1.5 0 0 1 0 2.121z"/></g></svg>
-                <div>sign in</div>
-            </a>
-        </div>
-
         <div class="player-container" id="player-container">
             <!-- Message Box -->
             <div id="message-box" hidden></div>
@@ -157,6 +139,38 @@
                     </button>
                 </div>
             </div>
+
+            <!-- Mobile navigation bar -->
+            <div id="mobile-navbar">
+                <a href="/songs">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><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="M18.671 3.208A2 2 0 0 1 21 5.18V17a4 4 0 1 1-2-3.465V9.18L9 10.847V18q0 .09-.015.174A3.5 3.5 0 1 1 7 15.337v-8.49a2 2 0 0 1 1.671-1.973zM9 8.82l10-1.667V5.18L9 6.847z"/></g></svg>
+                    <div>tunes</div>
+                </a>
+                <a href="/folks">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m1.984 12.25c-.53.468-1.223.75-1.984.75a3 3 0 0 1-1.984-.75a1 1 0 1 0-1.324 1.5A5 5 0 0 0 12 17a4.98 4.98 0 0 0 3.308-1.25a1 1 0 0 0-1.324-1.5M8.5 8c-1.087 0-1.958.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 0 0 1.788-.896C10.457 8.68 9.587 8 8.5 8m7 0c-1.087 0-1.957.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 1 0 1.788-.896C17.458 8.68 16.587 8 15.5 8"/></g></svg>
+                    <div>folks</div>
+                </a>
+                <a href="/jams/1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.848 2.395a1 1 0 0 1 1.108-.227l.111.056l.866.5a1 1 0 0 1 .488 1.02l-.026.12l-.567 1.983a1 1 0 0 1-1.344.649l-.118-.058l-1.534 2.656c.92.721 1.369 1.493 1.674 2.213c.223.523.414 1.205.306 1.939c-.105.712-.477 1.362-1.14 1.888l-.189.14c-.432.304-.46.56-.358.983l.174.65c.173.69.339 1.7.033 2.857c-.276 1.043-.943 1.865-1.7 2.411c-.745.538-1.666.871-2.538.826c-1.36-.07-2.749-.41-4.594-1.475s-2.834-2.098-3.574-3.24c-.475-.733-.647-1.698-.554-2.612c.094-.928.473-1.917 1.238-2.677c.784-.779 1.66-1.147 2.328-1.352l.315-.091l.272-.07c.524-.134.799-.233.88-.73l.017-.134c.085-.951.478-1.677 1.093-2.165c.58-.46 1.268-.635 1.832-.704c.712-.087 1.521-.092 2.486.243l.267.1l1.534-2.656a1 1 0 0 1-.303-1.462l.084-.1zm-6.78 13.685a1 1 0 0 0-1.099 1.668l.098.064l.866.5a1 1 0 0 0 1.098-1.668l-.098-.064l-.866-.5Zm.633-3.098a1.5 1.5 0 0 0 2.515 1.63l.083-.13a1.5 1.5 0 0 0-2.598-1.5"/></g></svg>
+                    <div>jams</div>
+                </a>
+                <a href="/activity" class="nav-logged-in">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7v3.528a1 1 0 0 1-.105.447l-1.717 3.433A1.1 1.1 0 0 0 4.162 18h15.676a1.1 1.1 0 0 0 .984-1.592l-1.716-3.433a1 1 0 0 1-.106-.447V9a7 7 0 0 0-7-7m0 19a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21"/></g></svg>
+                    <div>activity</div>
+                </a>
+                <a href="/users/{{ session['username'] }}" class="nav-logged-in">
+                    <img id="mobile-nav-pfp" src="/static/lsp_notes.png" width="20" height="20"/>
+                    <div>profile</div>
+                </a>
+                <a href="/signup" class="nav-logged-out">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v4h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-4H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h4z"/></g></svg>
+                    <div>sign up</div>
+                </a>
+                <a href="/login" class="nav-logged-out">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.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.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M14.902 19.512C13.831 20.583 12 19.825 12 18.31V16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8V5.69c0-1.515 1.831-2.273 2.902-1.202l6.453 6.451a1.5 1.5 0 0 1 0 2.121z"/></g></svg>
+                    <div>sign in</div>
+                </a>
+            </div>
         </div>
     </body>
 </html>
diff --git a/src/littlesongplace/templates/songs-by-tag.html b/src/littlesongplace/templates/songs-by-tag.html
index 7a3e1c5..6c46158 100644
--- a/src/littlesongplace/templates/songs-by-tag.html
+++ b/src/littlesongplace/templates/songs-by-tag.html
@@ -4,7 +4,7 @@
 
 {% block body %}
 
-<h1>songs</h1>
+<h1>tunes</h1>
 
 {% if user %}
     <div class="filter">