From 0150244c9f250c1c16007e11ba5f29fde348c667 Mon Sep 17 00:00:00 2001
From: VijaySamant4368 <vijaysamant4368@gmail.com>
Date: Tue, 16 Jul 2024 13:55:06 +0530
Subject: [PATCH] Improved navLinks for mobile

---
 index.html |  6 ++--
 styles.css | 96 +++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index aa2de84f..c48332d3 100644
--- a/index.html
+++ b/index.html
@@ -308,6 +308,8 @@ <h1>TourGuide . . .</h1>
 
         <ul class="navLinks">
 
+          <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
+          <li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
           <li class="link" data-aos=""><a href="#Home">Home</a></li>
           <li class="link" data-aos=""><a href="#AboutUs">About</a></li>
           <li class="link" data-aos=""><a href="#Destinations">Destination</a></li>
@@ -320,9 +322,9 @@ <h1>TourGuide . . .</h1>
         </ul>
 
 
-        <a href="newLogin.html" class="contact-btn"><button class="btn login" id="btn-style"
+        <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login" id="btn-style"
             data-aos="fade-down">Login/SignUp</button></a>
-        <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+        <a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn" id="btn-style" style="margin: 0;"
             data-aos="fade-down">view <map name=""></map></button></a>
 
         <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn"
diff --git a/styles.css b/styles.css
index 9dbae098..de526085 100644
--- a/styles.css
+++ b/styles.css
@@ -2098,6 +2098,10 @@ body {
   box-sizing: border-box;
 }
 
+#themeToggle {
+  width: inherit;
+}
+
 .hamburger {
   height: 2rem;
   width: 1.7rem;
@@ -2188,6 +2192,11 @@ body {
 .navLinks.activeHamburger {
   width: 100%;
 }
+
+/* Initially the Login Button and View button are not in Hamburger Menu */
+.navLinks #LogIn-link, .navLinks #View-link {
+  display: none;
+}
 /* @media screen and (max-width: 1146px) {
   .toggle-container {
     position: relative;
@@ -2221,6 +2230,64 @@ body {
     top: 1px;
   }
 } */
+
+/* Move Login from newNav to Hamburger */
+@media screen and (max-width: 690px) {
+  .navLinks #LogIn-link {
+    display: inline;
+  }
+  .newNav #nav-login-btn {
+    display: none;
+  }
+}
+
+/* Move Login from Hamburger to newNav */
+@media screen and (min-width: 690px) {
+  .navLinks #LogIn-link {
+    display: none;
+  }
+  .newNav #nav-login-btn {
+    display: inline;
+  }
+}
+
+/* Move View from newNav to Hamburger */
+@media screen and (max-width: 510px) {
+  .navLinks #View-link {
+    display: inline;
+  }
+  .newNav #nav-view-btn {
+    display: none;
+  }
+  .newNav img{
+    position: relative;
+  }
+}
+
+/* Move View from Hamburger to newNav */
+@media screen and (min-width: 510px) {
+  .navLinks #View-link {
+    display: none;
+  }
+  .newNav #nav-view-btn {
+    display: inline;
+  }
+}
+
+/* TO prevent unnecessary wrapping */
+@media screen and (max-width: 400px) {
+  .newNav {
+    gap: 0;
+  }
+}
+
+/* Hide the logo name */
+@media screen and (max-width: 350px) {
+  .newNav .nav__logo {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 652px) {
   .toggle {
     width: 5vw;
@@ -2228,21 +2295,7 @@ body {
   .line {
     width: 5vw;
   }
-  .newNav img {
-    position: relative;
-    bottom: 23px;
-    left: 109px;
-  }
-  .nav__logo {
-    position: relative;
-    left: 85px;
-    bottom: 20px;
-  }
-  .btn {
-    position: relative;
-    top: 30px;
-    left: -147px;
-  }
+
 }
 @media only screen and (max-width:577px){
   .but{
@@ -2252,14 +2305,7 @@ body {
   }
 }
 @media only screen and (max-width: 465.5px){
-  .newNav img{
-    position: relative;
-    left: -58px;
-  }
-  .nav__logo{
-    position: relative;
-    left: -82px;
-  }
+
   .but{
     position: relative;
     left:17px;
@@ -2778,10 +2824,6 @@ button:hover {
     max-width: 40%; /* Limit width to prevent overflow */
   }
 
-  .newNav {
-    justify-content: right;
-    gap: 27px;
-  }
   .nav-container {
     width: 100%;
     justify-content: center;