From 69ec8e127b8b9861f160cfb269dd8b6a81361594 Mon Sep 17 00:00:00 2001
From: shivam8112005 <shivamshukla8112005@gmail.com>
Date: Sat, 26 Oct 2024 15:36:38 +0530
Subject: [PATCH] created navbar responsive across all screen sizes

---
 blog.html          |  22 +++--
 category.html      |  14 ++--
 contact_us.html    |   6 +-
 give_feedback.html |   6 +-
 index.html         |  39 +++++----
 script.js          |  39 +++++++++
 start_writing.html |   6 +-
 style.css          | 195 ++++++++++++++++++++++++++++++++++++++++++++-
 8 files changed, 283 insertions(+), 44 deletions(-)

diff --git a/blog.html b/blog.html
index 5756b98d..6cc6c2c3 100644
--- a/blog.html
+++ b/blog.html
@@ -42,12 +42,12 @@ <h2>WordWise</h2>
         </a>
       </div>
 
-      <div class="hamburger" id="hamburger">
+      <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
         <span></span>
         <span></span>
         <span></span>
       </div>
-      <div class="nav-links1">
+      <div class="nav-links1" id="navLinks">
         <a href= "index.html">Home</a>
         <a href= "blog.html">Leading Blog</a>
         <a href= "start_writing.html">Start Writing</a>
@@ -368,6 +368,17 @@ <h2>Forgot Password</h2>
   </div>
 </nav>
  
+
+
+<!-- <style>
+  @media(max-width: 376px){
+    .layout-container{
+      padding-right: 2.3rem;
+    }
+  }
+</style> -->
+
+
   <!--header-->
     <!--mainn-->
     <main id="site-main" style="margin-top: 8rem;">
@@ -1365,10 +1376,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
   </footer>
   <!-- Script for Navbar Toggle -->
   <script>
-    function toggleMenu() {
-      const menu = document.getElementById('nav-menu');
-      menu.classList.toggle('active');
-    }
+    
   </script>
   <!-- .footer -->
   <!-- this script is for twitter icon  starts -->
@@ -1483,7 +1491,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 </html>
diff --git a/category.html b/category.html
index 1b1c7990..5bf32b1e 100644
--- a/category.html
+++ b/category.html
@@ -56,12 +56,12 @@ <h2>WordWise</h2>
                 </a>
             </div>
 
-            <div class="hamburger" id="hamburger">
+            <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
                 <span></span>
                 <span></span>
                 <span></span>
             </div>
-        <div class="nav-links1">
+        <div class="nav-links1" id="navLinks">
             <a href="index.html">Home</a>
             <a href="blog.html">Leading Blog</a>
             <a href="start_writing.html">Start Writing</a>
@@ -808,20 +808,20 @@ <h3>Can I contribute to multiple categories?</h3>
             if (savedMode === 'dark') {
                 document.body.classList.add('dark-mode');
                 checkbox.checked = true;
-                modeLabel.textContent = 'Dark Mode';
+                modeLabel.textContent = '';
             } else {
-                modeLabel.textContent = 'Light Mode';
+                modeLabel.textContent = '';
             }
 
             checkbox.addEventListener('change', function() {
                 if (this.checked) {
                     document.body.classList.add('dark-mode');
                     localStorage.setItem('darkMode', 'dark');
-                    modeLabel.textContent = 'Dark Mode';
+                    modeLabel.textContent = '';
                 } else {
                     document.body.classList.remove('dark-mode');
                     localStorage.setItem('darkMode', 'light');
-                    modeLabel.textContent = 'Light Mode';
+                    modeLabel.textContent = '';
                 }
             });
 
@@ -886,7 +886,7 @@ <h3>Can I contribute to multiple categories?</h3>
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 
diff --git a/contact_us.html b/contact_us.html
index 5cd9044c..68867ef2 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -99,12 +99,12 @@
           <h2>WordWise</h2>
         </a>
       </div>
-      <div class="hamburger" id="hamburger">
+      <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
         <span></span>
         <span></span>
         <span></span>
       </div>
-      <div class= "nav-links1">
+      <div class= "nav-links1" id="navLinks">
         <a href= "index.html">Home</a>
         <a href= "blog.html">Leading Blog</a>
         <a href= "start_writing.html">Start Writing</a>
@@ -697,7 +697,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
   <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 
diff --git a/give_feedback.html b/give_feedback.html
index 5d50ebf3..c1837657 100644
--- a/give_feedback.html
+++ b/give_feedback.html
@@ -99,12 +99,12 @@
           <h2>WordWise</h2>
         </a>
       </div>
-      <div class="hamburger" id="hamburger">
+      <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
         <span></span>
         <span></span>
         <span></span>
       </div>
-      <div class= "nav-links1">
+      <div class= "nav-links1" id="navLinks">
         <a href= "index.html">Home</a>
         <a href= "blog.html">Leading Blog</a>
         <a href= "start_writing.html">Start Writing</a>
@@ -745,7 +745,7 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
   <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
 </body>
 
diff --git a/index.html b/index.html
index d7ae3923..0743d1ce 100644
--- a/index.html
+++ b/index.html
@@ -201,12 +201,7 @@
 
 
 <!-- Script for Navbar Toggle -->
- <script>
-    function toggleMenu() {
-    const menu = document.getElementById('nav-menu');
-    menu.classList.toggle('active');
-}
- </script>
+
     <script src="https://accounts.google.com/gsi/client" async defer></script>
 
 </head>
@@ -231,12 +226,12 @@
     
     }
     
-    .nav-links1 {
+    /* .nav-links1 {
     display: flex;
     gap: 30px;
-    }
+    } */
     
-    .hamburger {
+    /* .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
@@ -252,7 +247,7 @@
     }
 
     @media (max-width: 1024px) {
-        .logo h1 a{
+        .logo a h2{
         font-size: 30px;   
     }
     .nav-links1 {
@@ -267,7 +262,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        /* Add styling for visibility, like color, size, etc. */
+        Add styling for visibility, like color, size, etc.
     }
 
     .nav-links1 {
@@ -293,12 +288,12 @@
     }
 }
 
-/* Additional styling for smaller screens */
+Additional styling for smaller screens
 @media (max-width: 576px) {
     .logo {
         margin-left: -75px;
     }
-    .logo h1 a {
+    .logo a h2 {
         font-size: 30px;
     }
     .dropdown {
@@ -314,10 +309,10 @@
     .logo {
         margin-left: -65px;
     }
-    .logo h1 a {
+    .logo a h2 {
         font-size: 24px;
     }
-}
+} */
     
     
     .dropdown-menu {
@@ -347,7 +342,9 @@
             <header>
     
                 <div class="logo">
-                    <h1><a href="index.html">WordWise</a></h1>
+                    <a href="index.html">
+                        <h2>WordWise</h2>
+                      </a>
                 </div>
                 <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
                     <span></span>
@@ -472,6 +469,8 @@ <h2>Forgot Password</h2>
     }
 </script>
 
+
+
 <!-- Styles -->
 <style>
     .form-popup {
@@ -563,10 +562,7 @@ <h2>Forgot Password</h2>
 
 <!-- JavaScript for Hamburger Menu Toggle -->
 <script>
-function toggleHamburgerMenu() {
-const navLinks = document.getElementById('navLinks');
-navLinks.classList.toggle('active');
-}
+
 </script>
 
 
@@ -1529,5 +1525,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 
 
 
+
+
+
 </body>
 </html>
diff --git a/script.js b/script.js
index 3c31e9c5..6ec094cd 100644
--- a/script.js
+++ b/script.js
@@ -126,3 +126,42 @@ function updateWord(wordData) {
 
 // Call the function to load the word of the day
 loadWordOfTheDay();
+//hamburger (Responsive)
+
+// function toggleHamburgerMenu() {
+//   const navLinks = document.getElementById('navLinks');
+//   navLinks.classList.toggle('active');
+//   }
+
+function toggleHamburgerMenu() {
+
+  
+  const navLinks = document.getElementById('navLinks');
+  const isActive = navLinks.classList.toggle('active'); // Toggle 'active' class
+
+  if (isActive) {
+    console.log("active");
+    
+    // Close the menu when clicking outside
+    document.addEventListener('click', closeOnOutsideClick);
+  } else {
+    console.log("inactive");
+    
+    // Remove the event listener when menu is closed
+    document.removeEventListener('click', closeOnOutsideClick);
+  }
+}
+
+function closeOnOutsideClick(event) {
+  
+  
+  const navLinks = document.getElementById('navLinks');
+  const hamburger = document.getElementById('hamburger');
+  
+  if (!navLinks.contains(event.target) && !hamburger.contains(event.target)) {
+    console.log("menu close");
+    
+    navLinks.classList.remove('active'); // Close the menu
+    document.removeEventListener('click', closeOnOutsideClick); // Remove the listener
+  }
+}
diff --git a/start_writing.html b/start_writing.html
index d0c42b13..c8c423ca 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -76,12 +76,12 @@
             <h2>WordWise</h2>
           </a>
         </div>
-        <div class="hamburger" id="hamburger">
+        <div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
           <span></span>
           <span></span>
           <span></span>
         </div>
-        <div class="nav-links1">
+        <div class="nav-links1" id="navLinks">
             <a href="index.html">Home</a>
             <a href="blog.html">Leading Blog</a>
             <a href="start_writing.html">Start Writing</a>
@@ -816,7 +816,7 @@ <h3>Can I upload images with my blog post?</h3>
 <div class="gtranslate_wrapper"></div>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+<script src="script.js"></script>
 
   </body>
 </html>
diff --git a/style.css b/style.css
index efa59721..85061b79 100644
--- a/style.css
+++ b/style.css
@@ -3399,4 +3399,197 @@ nav1{
    margin-bottom: 4rem;
    z-index: 999;
    
- }
\ No newline at end of file
+ }
+ /* hamburger */
+
+
+ .hamburger {
+  display: none;
+  cursor: pointer;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 25px;
+  height: 22px;
+  }
+  
+  .hamburger span {
+  width: 100%;
+  height: 3px;
+  background-color: #333;
+  }
+
+  @media (max-width: 1024px) {
+    .layout-container{
+      padding: 0 0.5rem;
+    }
+      .logo a h2{
+      font-size: 30px;   
+  }
+  .nav-links1 {
+  gap: 10px;
+  }
+.nav-links1 a{
+  font-size: 16px;
+}
+  }
+
+  @media (max-width: 825px){
+    .layout-container{
+      padding: 0 0.5rem;
+    }
+    .logo a h2{
+      font-size: 20px;   
+  }
+  .nav-links1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  }
+.nav-links1 a{
+  font-size: 10px;
+}
+  }
+  @media (max-width: 768px) {
+  .hamburger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* Add styling for visibility, like color, size, etc. */
+  }
+
+  .nav-links1 {
+      display: none;
+      flex-direction: column;
+      gap: 10px;
+      position: absolute;
+      top: 70px;
+      left: 0;
+      width: 100%;
+      background-color: #fff;
+      padding: 20px;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .nav-links1.active {
+      display: flex;
+  }
+
+  .dropdown {
+      position: relative;
+     margin-left: 200px;
+  }
+  .hamburger{
+    left: 540px; 
+  } 
+  .profile-icon{
+    left: 80px;
+  }
+}
+
+
+
+/* Additional styling for smaller screens */
+@media (max-width: 576px) {
+  .logo {
+      margin-left: -75px;
+  }
+  .logo a h2 {
+      font-size: 30px;
+  }
+  .dropdown {
+      position: relative;
+     margin-left: 60px;
+  }
+  .theme-switch-wrapper {
+      margin-right: -80px;
+  }
+  /* header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  } */
+  .hamburger{
+    left: 220px;
+  }
+  .layout-container{
+    padding: 0 3.5rem;
+  }
+}
+@media (max-width: 560px){
+  .hamburger{
+    left: 360px;
+  }
+  .profile-icon{
+    left: 55px;
+  }
+}
+
+@media (max-width: 345px) {
+  .logo {
+      margin-left: -65px;
+  }
+  .logo a h2 {
+      font-size: 24px;
+  }
+  /* .hamburger{
+    left: 230px;
+  } */
+  .hamburger{
+    left: 220px;
+  }
+}
+
+@media (max-width: 435px) {
+  .hamburger{
+    left: 270px; 
+  } 
+  .profile-icon{
+    left: 20px;
+  }
+}
+@media (max-width: 415px){
+  .profile-icon{
+    left: 8px;
+  }
+  .hamburger {
+    left: 250px;
+  } 
+}
+
+@media (max-width: 400px) {
+  .hamburger {
+    left: 240px;
+  } 
+}
+@media (max-width: 376px){
+  .profile-icon{
+    left: 3px;
+  }
+  .hamburger {
+    left: 230px;
+  } 
+}
+@media (max-width: 361px){
+  .profile-icon{
+    left: -1px;
+  }
+  .hamburger {
+    left: 220px;
+  } 
+}
+@media (max-width: 345px){
+  .profile-icon{
+    left: 3px;
+  }
+  .hamburger {
+    left: 200px;
+  } 
+}
+@media (max-width: 320px){
+  .profile-icon{
+    left: -2px;
+  }
+  .hamburger {
+    left: 190px;
+  } 
+}
\ No newline at end of file