Merge pull request #867 from sayanp607/about

Toggle button in About Page
ankit071105 · Nov 3, 2024 · 7098031 · 7098031
2 parents cfefd62 + b1343a3
commit 7098031
Showing 1 changed file with 39 additions and 5 deletions.
diff --git a/about.html b/about.html
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="faq.css">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="navbar.css">
     <link rel="stylesheet" href="why-us.css">
     <script src="chatbot.js"></script>
     <style>
@@ -211,6 +212,14 @@
   <!-- cursor ends -->
 
   <nav class="navbar">
+    <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
+    <div class="logo" style="font-size: 20px;">Ticket Marketplace</div>
+
+    <!-- Toggle Button (Visible on Small Screens) -->
+    <button id="navToggle">☰</button>
+
+    <!-- Navbar Links -->
+    <div id="navLinks">
     <a href="index.html" style="display: flex; align-items: center; text-decoration: none; white-space: nowrap; margin-right: -250px;">
       <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
       <div class="logo" style="font-size: 20px; margin-left: 8px;">Ticket Marketplace</div>
@@ -221,12 +230,12 @@
         <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
         <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
         <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
-        <a href="register.html"><i class="fas fa-sign-in-alt"></i> Login</a>
-
-      </div>
-      <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+        <a href="client/login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
+    </div>
 
-  </nav>
+    <!-- Dark Mode Button -->
+    <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+</nav>
     <script>
 
     // cursor 
@@ -339,6 +348,31 @@
             }
         });
     </script>
+     <script>
+      // Toggle Navbar Links
+      const navToggle = document.getElementById('navToggle');
+      const navlinks = document.getElementById('navLinks');
+
+      navToggle.addEventListener('click', () => {
+          navlinks.style.display = navlinks.style.display === 'flex' ? 'none' : 'flex';
+      });
+
+      // Ensure navbar links are visible on large screens
+      window.addEventListener('resize', () => {
+          if (window.innerWidth > 768) {
+              navlinks.style.display = 'flex'; // Show links on large screens
+          } else {
+              navlinks.style.display = 'none'; // Hide links on small screens
+          }
+      });
+
+      // Set initial state based on the current window size
+      if (window.innerWidth > 768) {
+          navlinks.style.display = 'flex'; // Show links if starting on a large screen
+      } else {
+          navlinks.style.display = 'none'; // Hide links if starting on a small screen
+      }
+  </script>
     <section id="about-us">
       <div class="about-container">
           <h1>About Us 🚀</h1>