From b453e53d2fe94ec1d7dfed34c1371688e3166f4a Mon Sep 17 00:00:00 2001
From: TheUltimateKeval <theultimatekeval@gmail.com>
Date: Sat, 24 Feb 2024 06:47:55 +0530
Subject: [PATCH] Added responsive nav-bar

---
 css/common.css        | 71 ++++++++++++++++++++++++++++++++++++++-----
 scripts/activepage.js |  1 +
 scripts/header.js     | 25 ++++++++++++---
 3 files changed, 86 insertions(+), 11 deletions(-)

diff --git a/css/common.css b/css/common.css
index 8bfc43e..eebed67 100644
--- a/css/common.css
+++ b/css/common.css
@@ -14,6 +14,10 @@ body {
     margin: 0;
 }
 
+.no-display {
+    display: none !important;
+}
+
 /* Header */
 .header-container {
     position: absolute;
@@ -23,7 +27,7 @@ body {
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 12vh;
+    height: 94px;
     background-color: #fff;
     border-bottom: 3px solid rgb(61, 77, 173);
 }
@@ -57,6 +61,65 @@ body {
     color: rgb(61, 77, 173);
 }
 
+.header-mob-nav-btn {
+    display: none;
+    width: 35px;
+    height: calc(60px - 12.5px);
+    padding-top: 10px;
+    cursor: pointer;
+    margin-right: 20px;
+}
+
+.header-mob-nav-btn span {
+    display: block;
+    width: 100%;
+    height: 5px;
+    background-color: black;
+    margin: 5px 0;
+}
+
+.header-mob-nav {
+    position: fixed;
+    top: 94px;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    padding: 50px;
+    box-sizing: border-box;
+
+    background-color: #000000b0;
+    font-size: 32px;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    
+    display: flex;
+    flex-direction: column;
+}
+
+.header-mob-nav a {
+    margin: 15px 0;
+    text-shadow: 5px 5px 10px black;
+}
+
+.header-mob-nav a.active {
+    color: rgb(61, 77, 173);
+}
+
+@media screen and (max-width: 850px) {
+    .header-nav {
+        display: none;
+    }
+    
+    .header-container {
+        position: fixed;
+    }
+
+    .header-mob-nav-btn {
+        display: inline-block;
+    }
+}
+
 .main {
     margin-top: 94px;
 }
@@ -98,12 +161,6 @@ body {
     color: rgb(61, 77, 173);
 }
 
-@media screen and (max-width: 800px) {
-    .header-nav {
-        display: none;
-    }
-}
-
 @keyframes fadeIn {
     from {
         opacity: 0;
diff --git a/scripts/activepage.js b/scripts/activepage.js
index 126a407..e1808a2 100644
--- a/scripts/activepage.js
+++ b/scripts/activepage.js
@@ -1,4 +1,5 @@
 console.log(window.location.pathname);
 document.addEventListener("DOMContentLoaded", () => {
   document.querySelector(`a.header-nav-item[href="${window.location.pathname}"`).classList.add("active");
+  document.querySelector(`header-mob-nav a[href="${window.location.pathname}"`).classList.add("active");
 });
diff --git a/scripts/header.js b/scripts/header.js
index 7741199..678a985 100644
--- a/scripts/header.js
+++ b/scripts/header.js
@@ -12,10 +12,23 @@ const headerContent= `
         <a class="header-nav-item" href="${origin}/activities/">Activities</a>
         <a class="header-nav-item" href="${origin}/contact/">Contact</a>
     </div>
-</div>
-`;
 
+    <div class="header-mob-nav-btn">
+        <span></span>
+        <span></span>
+        <span></span>
+        <p style="display: none">x</p>
+    </div>
 
+    <div class="header-mob-nav no-display">
+        <a class="header-mob-nav-item" href="${origin}/">Home</a>
+        <a class="header-mob-nav-item" href="${origin}/gallery/">Gallery</a>
+        <a class="header-mob-nav-item" href="${origin}/the-team/">The Team</a>
+        <a class="header-mob-nav-item" href="${origin}/activities/">Activities</a>
+        <a class="header-mob-nav-item" href="${origin}/contact/">Contact</a>
+    </div>
+</div>
+`;
 
 const footerContent = `
 <div class="Main_text"><b>Join our mailing list for updates on events and for receiving our newsletter!</b></div>
@@ -30,6 +43,10 @@ const footerContent = `
 // });
 
 headerComponents.forEach(element=>{
-
     element.innerHTML=headerContent;
-})
\ No newline at end of file
+});
+
+// Attach toggle function for header-mob-nav
+document.querySelector(".header-mob-nav-btn").addEventListener("click", () => {
+    document.querySelector(".header-mob-nav").classList.toggle("no-display");
+});
\ No newline at end of file