Repository: uchicago-capp-30320/BILLinois
Pull request #117: 96 reconfigure navigation for all pages
Author: login: lmucciolo
Created: 2025-05-11T03:41:26Z | Merged: 2025-05-13T02:53:25Z

Please test the dropdown options on the server to ensure that they take you to the correct pages. 
There is logic for whether a user is signed in or not.

Also, if you can figure out a way to move the menu to the right-hand side of the page that would be so appreciated. I was having a hard time finding a solution. (This applies to the favorites page too.)


Diff:
diff --git a/static/css/custom.css b/static/css/custom.css
index fba200d..90ecfa8 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,4 +1,4 @@
-/* status column in the table returned by search results */
+/* Status column in the table returned by search results */
 th.status-column, td.status-column {
     width: 290px; 
     white-space: wrap; /* text wrapping */
@@ -11,12 +11,21 @@ body {
 html, body {
     height: 100%; /* Make the html and body elements fill the viewport height */
 }
-/* color palette */
-/* background color for webpages */
+/* Set the navbar background color */
+.navbar {
+    background-color: #F5F5F5; /* Match the page background color */
+    border: none; 
+}
+/* Change the color of the dropdown arrow */
+.navbar-link::after {
+    border-color: #4269D0;
+}
+/* Color palette */
+/* Background color for webpages */
 .bg-light {
     background-color: #F5F5F5;
 }
-/* text colors*/
+/* Text colors*/
 .custom-text-dark {
     color: #3D474A;
 }
@@ -38,7 +47,7 @@ html, body {
 .custom-purple {
     color: #A12FA7;
 }
-/* button colors */
+/* Button colors */
 .button-green {
     background-color: #4BAB68;
     color: #F5F5F5;
diff --git a/static/js/burger.js b/static/js/burger.js
new file mode 100644
index 0000000..fdf1d3f
--- /dev/null
+++ b/static/js/burger.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  
+    // Add a click event on each of them
+    $navbarBurgers.forEach(el => {
+      el.addEventListener('click', () => {
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+  
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
+    });
+  });
\ No newline at end of file
diff --git a/templates/bill_page.html b/templates/bill_page.html
index 80430c5..27c51d9 100644
--- a/templates/bill_page.html
+++ b/templates/bill_page.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css">
     <!-- Link to custom CSS -->
-    <link rel="stylesheet" href="../static/css/custom.css">
+    <link rel="stylesheet" href="./static/css/custom.css">
   </head>
   <body class="bg-light">
     <section class="section">
@@ -15,7 +15,8 @@
         <div class="columns is-vcentered is-mobile" style="margin: 0;">
           <!-- Title Column -->
           <div class="column is-narrow" style="padding-left: 0; flex-grow: 0;">
-              <h1 class="title is-1 custom-text-dark">BILLinois</h1>
+            <a href="/"> <h1 class="title is-1 custom-text-dark">BILLinois</h1>
+            </a>
           </div>
           <!-- Search Column -->
           <div class="column" style="flex-grow: 1;">
@@ -29,25 +30,32 @@ <h1 class="title is-1 custom-text-dark">BILLinois</h1>
               </p>
             </div>
           </div>
-          <!-- Menu Column -->
-          <div class="column is-narrow has-text-right" style="flex-grow:0;">
-            <!-- Home Link -->
-            <a href="/" class="icon-text ml-4 is-clickable hover-link no-bg">
-              <span class="icon">
-                <i class="fas fa-home custom-blue"></i>
-              </span>
-              <span class="custom-blue">Home</span>
-            </a>
-            <!-- Separator -->
-            <span class="mx-1">|</span>
-            <!-- Sign In Link -->
-            <a href="/signin" class="icon-text is-clickable">
-              <span class="icon">
-                <i class="fa-solid fa-circle-user custom-blue"></i>
-              </span>
-              <span class="custom-blue">Sign in</span>
+          <!-- Dropdown Menu -->
+          <nav class="navbar" role="navigation" aria-label="dropdown navigation">
+            <div id="navbarMenu" class="navbar-menu">
+              <div class="navbar-item has-dropdown is-hoverable navbar-end">
+                <a class="navbar-link">
+                  Menu
+                </a>
+                <div class="navbar-dropdown is-right is-boxed">
+                  <a href="/" class="navbar-item">Home</a>
+                  {% if user.is_authenticated %}
+                  <a href="" class="navbar-item">My Account</a>
+                  <a href="/accounts/logout" class="navbar-item">Sign Out</a>
+                  {% else %}
+                  <a href="/accounts/login" class="navbar-item">Log In</a>
+                  <a href="/accounts/signup/" class="navbar-item">Sign Up</a> 
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
             </a>
-          </div>
+          </nav> 
         </div>
       </div>
     </section>
@@ -143,6 +151,8 @@ <h2 class="title is-4 mt-5 custom-text-dark">Topic(s)</h2>
         <p><i>Page last updated 5/07/25</i></p>
         </div>
       </div>
-      <section class="section">
+    </section>
+    <!-- JS for burger menu -->
+    <script src="../static/js/burger.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/templates/favorites.html b/templates/favorites.html
index 08bef08..0d2caa9 100644
--- a/templates/favorites.html
+++ b/templates/favorites.html
@@ -14,7 +14,8 @@
             <div class="columns is-vcentered is-mobile" style="margin: 0;">
               <!-- Title Column -->
               <div class="column is-narrow" style="padding-left: 0; flex-grow: 0;">
-                  <h1 class="title is-1">BILLinois</h1>
+                <a href="/"> <h1 class="title is-1 custom-text-dark">BILLinois</h1>
+                </a>
               </div>
               <!-- Search Column -->
               <div class="column" style="flex-grow: 1;">
@@ -28,26 +29,32 @@ <h1 class="title is-1">BILLinois</h1>
                   </p>
                 </div>
               </div> -->
-              <!-- Menu Column -->
-                <!-- Menu Column -->
-                <div class="column is-narrow has-text-right" style="flex-grow:0;">
-                  <!-- Home Link -->
-                  <a href="/home" class="icon-text has-text-link ml-4 is-clickable hover-link">
-                    <span class="icon">
-                      <i class="fas fa-home"></i>
-                    </span>
-                    <span>Home</span>
-                  </a>
-                  <!-- Separator -->
-                  <span class="mx-1">|</span>
-                  <!-- Sign In Link -->
-                  <a href="/signin" class=" icon-text has-text-link is-clickable hover-link">
-                    <span class="icon">
-                      <i class="fa-solid fa-circle-user"></i>
-                    </span>
-                    <span>Sign in</span>
-                  </a>
+          <!-- Dropdown Menu -->
+          <nav class="navbar" role="navigation" aria-label="dropdown navigation">
+            <div id="navbarMenu" class="navbar-menu">
+              <div class="navbar-item has-dropdown is-hoverable navbar-end">
+                <a class="navbar-link">
+                  Menu
+                </a>
+                <div class="navbar-dropdown is-right is-boxed">
+                  <a href="/" class="navbar-item">Home</a>
+                  {% if user.is_authenticated %}
+                  <a href="" class="navbar-item">My Account</a>
+                  <a href="/accounts/logout" class="navbar-item">Sign Out</a>
+                  {% else %}
+                  <a href="/accounts/login" class="navbar-item">Log In</a>
+                  <a href="/accounts/signup/" class="navbar-item">Sign Up</a> 
+                  {% endif %}
                 </div>
+              </div>
+            </div>
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+            </a>
+          </nav> 
             </div>
           </div>
         <section>
@@ -158,5 +165,7 @@ <h3 class = "title is-size-6 has-text-link"> Accidentally Favorited Act </h1>
         </section>
     </div>
   </section>
+  <!-- JS for burger menu -->
+  <script src="../static/js/burger.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 4200077..9a7bb4a 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -11,30 +11,33 @@
   </head>
   <body>
     <section class = "section">
-        <div class = "container">
-            {% if user.is_authenticated %}
-            <a href = "/accounts/logout" class="icon-text is-pulled-right has-text-link">
-                <span class="icon">
-                    <i class="fa-solid fa-circle-user"></i>
-                </span>
-                <span>Sign Out</span>
-              </a>
-            {% else %}
-            <a href = "/accounts/login" class="icon-text is-pulled-right has-text-link">
-                <span class="icon">
-                    <i class="fa-solid fa-circle-user"></i>
-                </span>
-                <span>Sign In</span>
+          <!-- Dropdown Menu -->
+          <nav class="navbar is-right is-flex is-justify-content-flex-end" role="navigation" aria-label="dropdown navigation">
+            <div class = "navbar-end">
+              <div id="navbarMenu" class="navbar-menu is-right">
+                <div class="navbar-item has-dropdown is-hoverable">
+                  <a class="navbar-link">
+                    Menu
+                  </a>
+                  <div class="navbar-dropdown is-boxed">
+                    {% if user.is_authenticated %}
+                    <a href="" class="navbar-item">My Account</a>
+                    <a href="/accounts/logout" class="navbar-item">Sign Out</a>
+                    {% else %}
+                    <a href="/accounts/login" class="navbar-item">Log In</a>
+                    <a href="/accounts/signup/" class="navbar-item">Sign Up</a> 
+                    {% endif %}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
             </a>
-            {% endif %}
-          <span class = "is-pulled-right mx-2" > | </span>
-          <a href = "/" class="icon-text is-pulled-right has-text-link">
-              <span class="icon">
-                <i class="fas fa-home"></i>
-              </span>
-              <span>Home</span>
-          </a>
-        </div>
+          </nav> 
     </section>
   <section class="section">
     <div class="container">
@@ -80,7 +83,8 @@ <h1 class="title is-1 has-text-centered custom-text-dark">
             <a href = "./search/?query=LGBTQIA" class="cell button is-medium button-yellow is-row-start-3">LGBTQIA</a>
         </div>
     </div>
-
-</section>
+  </section>
+  <!-- JS for burger menu -->
+  <script src="../static/js/burger.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/templates/search.html b/templates/search.html
index c3d60f0..eed71ab 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Billinois</title>
+    <title>Search Results</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css">
      <!-- Link to custom CSS -->
@@ -15,7 +15,8 @@
         <div class="columns is-vcentered is-mobile" style="margin: 0;">
           <!-- Title Column -->
           <div class="column is-narrow" style="padding-left: 0; flex-grow: 0;">
-              <h1 class="title is-1 custom-text-dark">BILLinois</h1>
+            <a href="/"><h1 class="title is-1 custom-text-dark">BILLinois</h1>
+            </a>
           </div>
           <!-- Search Column -->
           <div class="column" style="flex-grow: 1;">
@@ -34,37 +35,32 @@ <h1 class="title is-1 custom-text-dark">BILLinois</h1>
               </div>
             </div>
           </div>
-                <!-- Menu Column -->
-                <div class="column is-narrow has-text-right" style="flex-grow:0;">
-                  <!-- Home Link -->
-                  <a href="/" class="icon-text has-text-link ml-4 is-clickable hover-link">
-                    <span class="icon">
-                      <i class="fas fa-home"></i>
-                    </span>
-                    <span>Home</span>
-                  </a>
-                  <!-- Separator -->
-                  <span class="mx-1">|</span>
-                  <!-- Sign In Link -->
+          <!-- Dropdown Menu -->
+          <nav class="navbar" role="navigation" aria-label="dropdown navigation">
+            <div id="navbarMenu" class="navbar-menu">
+              <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link">
+                  Menu
+                </a>
+                <div class="navbar-dropdown is-right is-boxed">
+                  <a href="/" class="navbar-item">Home</a>
                   {% if user.is_authenticated %}
-                  <a href = "/accounts/logout" class="icon-text is-pulled-right has-text-link">
-                      <span class="icon">
-                          <i class="fa-solid fa-circle-user"></i>
-                      </span>
-                      <span>Sign Out</span>
-                    </a>
+                  <a href="" class="navbar-item">My Account</a>
+                  <a href="/accounts/logout" class="navbar-item">Sign Out</a>
                   {% else %}
-                  <a href = "/accounts/login" class="icon-text is-pulled-right has-text-link">
-                      <span class="icon">
-                          <i class="fa-solid fa-circle-user"></i>
-                      </span>
-                      <span>Sign In</span>
-                  </a>
+                  <a href="/accounts/login" class="navbar-item">Log In</a>
+                  <a href="/accounts/signup/" class="navbar-item">Sign Up</a> 
                   {% endif %}
                 </div>
               </div>
             </div>
-          </div>
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+            </a>
+          </nav>    
         </div>
       </div>
     </section>
@@ -108,5 +104,7 @@ <h1 class="title is-1 custom-text-dark">BILLinois</h1>
             <p class="has-text-centered custom-text-dark">Please enter a search term.</p>
         {% endif %}
       </section>
+    <!-- JS for burger menu -->
+    <script src="../static/js/burger.js"></script>
     </body>
-  </html>
+  </html>
\ No newline at end of file


Reviews:
user: login: Suchitailor
body: Great job with the javascript!! Navbar menu items redirect me appropriately.

I made updates to ensure the navbar is on the right hand side. 

Before approving, wanted to confirm that the navbar doesn't currently link to favorites page because we don't have that view yet?

And then made one final comment about the searchbar location - but that may be outside the scope of this issue!
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T23:15:04Z
user: login: lmucciolo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T00:19:53Z
user: login: lmucciolo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T00:20:02Z
user: login: lmucciolo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T00:23:25Z
user: login: lmucciolo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T00:26:05Z
user: login: notkarenyi
body: looks great! I am wondering if we should separate out the burger code into a separate `burger.js` or similar file and then source the js script from each page? this way if we have to make future changes there is only one place to update the code?
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T01:37:28Z
user: login: Suchitailor
body: Appreciate the language change to "My Account"

Looks great!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T02:35:19Z
user: login: notkarenyi
body: yay love it
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-13T02:53:18Z

Review comments:
path: templates/home.html
user: login: Suchitailor
body: Liv - I pushed a change here that adds a class "navbar end", which successfully moved the dropdown menu to the right hand side. 
created_at: 2025-05-12T23:07:08Z
author_association: CONTRIBUTOR
path: templates/favorites.html
user: login: Suchitailor
body: I also pushed the navbar-end change here, so the drop down is on the right hand side
created_at: 2025-05-12T23:10:29Z
author_association: CONTRIBUTOR
path: templates/search.html
user: login: Suchitailor
body: just confirming that favorites doesn't exist in the dropdown yet because we don't have the view yet?
created_at: 2025-05-12T23:11:10Z
author_association: CONTRIBUTOR
path: templates/search.html
user: login: Suchitailor
body: Also - this may be for a seperate issue, but I am thinking that the search bar may look better below the logo and nav bar instead of in-between. Let me know what you think. 
created_at: 2025-05-12T23:14:26Z
author_association: CONTRIBUTOR
path: templates/home.html
user: login: lmucciolo
body: Oh awesome, thank you!
created_at: 2025-05-13T00:19:53Z
author_association: CONTRIBUTOR
path: templates/home.html
user: login: lmucciolo
body: Just checked on my end and it works.
created_at: 2025-05-13T00:20:02Z
author_association: CONTRIBUTOR
path: templates/search.html
user: login: lmucciolo
body: Yes! I was not sure of the endpoint so I did not add it. Also unsure if it should be called "My Account" or "Favorites". I'm going to go ahead and add it to the dropdown but without a functioning link.
created_at: 2025-05-13T00:23:25Z
author_association: CONTRIBUTOR
path: templates/search.html
user: login: lmucciolo
body: As for the search bar, I prefer it above, but am open to changing it. It should go in as a separate issue.
created_at: 2025-05-13T00:26:05Z
author_association: CONTRIBUTOR

PR comments:
user: login: lmucciolo
created_at: 2025-05-13T02:11:36Z
body: @notkarenyi where should the burger.js script go? should it have its own folder in static? or in templates?
author_association: CONTRIBUTOR
user: login: notkarenyi
created_at: 2025-05-13T02:17:25Z
body: I think static since it has no templating/variables! it can go in a subfolder called `js/` or just directly in static whichever u prefer
author_association: CONTRIBUTOR
user: login: lmucciolo
created_at: 2025-05-13T02:30:45Z
body: @notkarenyi @Suchitailor I've implemented the requested changes in the last two commits.
author_association: CONTRIBUTOR