Repository: cse110-sp25-group25/cse110-sp25-group25
Pull request #12: Finish Responsive Navbar
Author: login: kalkin04
Created: 2025-05-11T18:43:43Z | Merged: 2025-05-12T21:31:39Z

This is a follow up to PR cse110-sp25-group25/restaurant-crisis#11 

I made the navbar responsive on mobile using js, finishing up my work on it. The video below demonstrates both views of the navbar:

[Screencast from 05-10-2025 02:48:18 PM.webm](https://github.com/user-attachments/assets/7fd7d944-4d59-49d9-917d-d7e5791917e2)

I used a placeholder app icon for now, this should be replaced once the design team has the app icon ready.

I'm now done with my portion of the work on issue #27. 



Diff:
diff --git a/assets/app-icon.png b/assets/app-icon.png
new file mode 100644
index 0000000..054e94c
Binary files /dev/null and b/assets/app-icon.png differ
diff --git a/assets/burger-menu.png b/assets/burger-menu.png
new file mode 100644
index 0000000..2778e99
Binary files /dev/null and b/assets/burger-menu.png differ
diff --git a/collection.html b/collection.html
index 935f16b..df9d1c7 100644
--- a/collection.html
+++ b/collection.html
@@ -4,11 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/style.css">
+    <script src="js/scripts.js"></script>
     <title>Restaurant Crisis</title>
 </head>
 <body>
     <header>
-        <img src="assets/app_icon.svg" alt="app_icon"> <!--insert app icon here!-->
+        <img src="assets/app-icon.png" alt="app_icon" class="app-icon"> <!--insert app icon here!-->
         <!-- nav bar -->
         <nav>
             <ul>
@@ -17,6 +18,7 @@
                 <li><a href="filters.html">Filters</a></li>
             </ul>
         </nav>
+        <img src="assets/burger-menu.png" alt="dropdown_icon" class="burger-icon"> <!-- insert burger icon here!-->
     </header>
 
     <main>
diff --git a/css/style.css b/css/style.css
index 05e50a7..48d2d0d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,28 +4,92 @@ body {
 
 /* Nav bar styles */
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     padding: 10px 20px;
-    background-color: #9e9e9e;
+    background-color: #b4d2ba;
+    margin: 0;
+}
+
+nav a {
+    text-decoration: none;
+    color: #ffffff;
+    font-weight: bold;
 }
 
 nav ul {
     list-style: none;
-    display: flex;
     margin: 0;
     padding: 0;
-    gap: 20px;
 }
 
-nav a {
-    text-decoration: none;
-    color: #333;
-    font-weight: bold;
-    transition: color 0.2s;
+/* desktop navbar */
+@media (min-width:500px) {
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    nav a {
+        transition: color 0.2s;
+    }
+
+    nav ul {
+        display: flex;
+        gap: 20px;
+    }
+
+    nav a:hover {
+        color: #f3f4e4;
+    }
+
+    .app-icon {
+        height: 40px;
+    }
+
+    .burger-icon {
+        display:none;
+    }
 }
 
-nav a:hover {
-    color: #c1c1c1;
+/* mobile navbar */
+@media (max-width:499px) {
+    header {
+        overflow: hidden;
+        padding: 0;
+    }
+
+    nav ul {
+        background-color: #b4d2ba;
+        display:block;
+    }
+
+    nav a {
+        display: none;
+        padding: 5px 15px;
+    }
+
+    nav a:hover {
+        background-color: #97bb9e;
+        color: #f3f4e4;
+    }
+
+    .burger-icon {
+        /* background: white; */
+        transition: color 0.2s;
+        display: block;
+        right: 0;
+        top: 0;
+        position: absolute;
+        height: 36px;
+        padding: 4px 4px;
+    }
+
+    .burger-icon:hover {
+        background-color: #97bb9e;
+    }
+
+    .app-icon {
+        height: 40px;
+        padding-left: 10px;
+    }
 }
diff --git a/filters.html b/filters.html
index 935f16b..df9d1c7 100644
--- a/filters.html
+++ b/filters.html
@@ -4,11 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/style.css">
+    <script src="js/scripts.js"></script>
     <title>Restaurant Crisis</title>
 </head>
 <body>
     <header>
-        <img src="assets/app_icon.svg" alt="app_icon"> <!--insert app icon here!-->
+        <img src="assets/app-icon.png" alt="app_icon" class="app-icon"> <!--insert app icon here!-->
         <!-- nav bar -->
         <nav>
             <ul>
@@ -17,6 +18,7 @@
                 <li><a href="filters.html">Filters</a></li>
             </ul>
         </nav>
+        <img src="assets/burger-menu.png" alt="dropdown_icon" class="burger-icon"> <!-- insert burger icon here!-->
     </header>
 
     <main>
diff --git a/index.html b/index.html
index 935f16b..df9d1c7 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/style.css">
+    <script src="js/scripts.js"></script>
     <title>Restaurant Crisis</title>
 </head>
 <body>
     <header>
-        <img src="assets/app_icon.svg" alt="app_icon"> <!--insert app icon here!-->
+        <img src="assets/app-icon.png" alt="app_icon" class="app-icon"> <!--insert app icon here!-->
         <!-- nav bar -->
         <nav>
             <ul>
@@ -17,6 +18,7 @@
                 <li><a href="filters.html">Filters</a></li>
             </ul>
         </nav>
+        <img src="assets/burger-menu.png" alt="dropdown_icon" class="burger-icon"> <!-- insert burger icon here!-->
     </header>
 
     <main>
diff --git a/js/scripts.js b/js/scripts.js
new file mode 100644
index 0000000..ed24897
--- /dev/null
+++ b/js/scripts.js
@@ -0,0 +1,21 @@
+window.addEventListener('DOMContentLoaded', init);
+
+function init() {
+    // responsive navbar on mobile
+    setupDropDown();
+}
+
+function setupDropDown() {
+    const dropDown = document.querySelector(".burger-icon");
+    const navLinks = document.querySelectorAll("nav a")
+    dropDown.addEventListener("click", function () {
+        navLinks.forEach(function (link) {
+            if (link.style.display != "block") {
+                link.style.display = "block";
+            }
+            else {
+                link.style.display = "none";
+            }
+        });
+    })
+}
\ No newline at end of file


Reviews:
user: login: cadefuin
body: Looks great! Could you also color the navbar according to the Miro design?
![image](https://github.com/user-attachments/assets/214547ab-b157-40f6-a11b-4d020fa65b9b)

state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T02:09:07Z
user: login: evanedreo
body: small change
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T19:17:16Z
user: login: kalkin04
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T19:54:36Z
user: login: cadefuin
body: Perfect, thank you!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T20:14:35Z
user: login: evanedreo
body: lgtm! great job, thanks for the clear PR desc
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T21:26:36Z
user: login: evanedreo
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T21:26:58Z

Review comments:
path: assets/burger-menu.svg
user: login: evanedreo
body: can we change it to a white colored hamburger icon? 
created_at: 2025-05-12T19:17:06Z
author_association: CONTRIBUTOR
path: assets/burger-menu.svg
user: login: kalkin04
body: ![image](https://github.com/user-attachments/assets/72383b8a-0bac-458b-86f3-c039a79c35c1)
done!
created_at: 2025-05-12T19:54:35Z
author_association: CONTRIBUTOR

PR comments:
user: login: kalkin04
created_at: 2025-05-12T16:24:18Z
body: > Looks great! Could you also color the navbar according to the Miro design? ![image](https://private-user-images.githubusercontent.com/156235788/442544044-214547ab-b157-40f6-a11b-4d020fa65b9b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDcwNjY3NDUsIm5iZiI6MTc0NzA2NjQ0NSwicGF0aCI6Ii8xNTYyMzU3ODgvNDQyNTQ0MDQ0LTIxNDU0N2FiLWIxNTctNDBmNi1hMTFiLTRkMDIwZmE2NWI5Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwNTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDUxMlQxNjE0MDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00NGY4YTU3ZmYyZDAzNjk3NTJhNmIzMzc5ZTdlMjYwMjRmMGM0NWUzYzkxYTM4Mzk5ZGYzMDdhOGNlYzZlYTA4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.egmc08jw0f912u_p0IETRgqbxERme3iTfmQxL5hACIw)

Hi Cass, I made the requested changes.

You can see the updated screenshots below:
![image](https://github.com/user-attachments/assets/a31b9ece-8700-499e-8a2f-285f67c1d04b)

![image](https://github.com/user-attachments/assets/93bbe557-1674-49b7-a03e-84eb162e3a58)

![image](https://github.com/user-attachments/assets/ff7bbfae-71ab-4046-bed9-b987aea3461b)

![image](https://github.com/user-attachments/assets/7f9d5690-5423-42a2-927b-6eb322bff2ac)

author_association: CONTRIBUTOR
user: login: kalkin04
created_at: 2025-05-31T20:03:10Z
body: Fixes #27 
author_association: CONTRIBUTOR