From ce476bd6d8b19c2ff1e23d4d01e4c90a7352e443 Mon Sep 17 00:00:00 2001
From: Atharvverma1234 <atharvverma2905@gmail.com>
Date: Mon, 23 Dec 2024 17:25:19 +0530
Subject: [PATCH] added side bar

---
 index.html | 429 ++++++++++++++++++-----------------------------------
 1 file changed, 143 insertions(+), 286 deletions(-)

diff --git a/index.html b/index.html
index b0361a3c..1bfd2cf3 100644
--- a/index.html
+++ b/index.html
@@ -541,303 +541,160 @@ <h1>TourGuide . . .</h1>
       <canvas></canvas>
       <canvas></canvas>
     </div>
-    <nav class="newNav">
-      <div style="display: flex; align-items: center;">
-        <img src="favicon.ico" class="sitelogo">
-        <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span style="margin-right: 0.5vw;">.</span></a>
-    </div>
-
-      <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="./about.html">About</a></li>
-        <li class="link dropdown" data-aos="">
-          <a href="#Services" class="dropdown">Services</a>
-          <ul class="dropdown-menu">
-                  <li><a href="#Destinations">Destination</a></li>
-                  <li><a href="#trip">Prices</a></li>
-                  <li><a href="#ReviewGallery">Trip Gallery</a></li>
-                  <li><a href="#tourist">Tourist Guide</a></li>
-                  <li><a href="#hotel">Hotel & Resort</a></li>
-          </ul>
-        </li>
-        <li class="link" data-aos=""><a href="./topdeals/topdeals.html">Top Deals</a></li>
-        <li class="link" data-aos=""><a href="./packages.html">Packages</a></li>
-        <li class="link" data-aos=""><a href="#testimo">Testimonial</a></li>
-        <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
-        <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
+    <nav class="sidebar">
+  <div class="sidebar-header">
+    <img src="favicon.ico" class="sitelogo">
+    <a href="#" class="nav__logo">Tourguide<span>.</span></a>
+  </div>
+
+  <ul class="sidebar-links">
+    <li class="link" id="View-link"><a href="mapa.html">View</a></li>
+    <li class="link"><a href="#Home">Home</a></li>
+    <li class="link"><a href="./about.html">About</a></li>
+    <li class="link dropdown">
+      <a href="#Services" class="dropdown">Services</a>
+      <ul class="dropdown-menu">
+        <li><a href="#Destinations">Destination</a></li>
+        <li><a href="#trip">Prices</a></li>
+        <li><a href="#ReviewGallery">Trip Gallery</a></li>
+        <li><a href="#tourist">Tourist Guide</a></li>
+        <li><a href="#hotel">Hotel & Resort</a></li>
       </ul>
-
-      <div class="contact-btns">
-        <a href="newLogin.html" class="contact-btn" id="nav-login-btn">
-          <button class="btn login" id="btn-style" data-aos="fade-down">Login/<br>SignUp</button>
-        </a>
-        <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" style="margin: 0; display: none;" data-aos="fade-down" disabled>Log
-            Out</button>
-        </a>
-      </div>
-
-      <div class="toggle-container" data-aos="fade-down" style="margin-right: 28px;">
-        <input id="themeToggle" class="toggle" type="checkbox">
-      </div>
-
-      <div class="hamburger" id="hamburger" data-aos="fade-down">
-        <div class="line" style="margin-bottom: 5px;"></div>
-        <div class="line" style="margin-bottom: 5px;"></div>
-        <div class="line" style="margin-bottom: 5px;"></div>
-        <div class="line" style="margin-bottom: 5px;"></div>
-      </div>
-    </nav>
+    </li>
+    <li class="link"><a href="./topdeals/topdeals.html">Top Deals</a></li>
+    <li class="link"><a href="./packages.html">Packages</a></li>
+    <li class="link"><a href="#testimo">Testimonial</a></li>
+    <li class="link"><a href="feedback.html">Rate Us?</a></li>
+    <li class="link"><a href="#cnt-form">Contact Us</a></li>
+  </ul>
+
+  <div class="contact-btns">
+    <a href="newLogin.html" class="contact-btn" id="nav-login-btn">
+      <button class="btn login" id="btn-style" style="padding-left: 10px;">Login / SignUp</button>
+    </a>
+    <a href="mapa.html" class="contact-btn" id="nav-view-btn">
+      <button class="btn" id="btn-style">View</button>
+    </a>
+    <a href="loginPage.html" class="contact-btn">
+      <button class="btn" id="logout-btn" style="display: none;" disabled>Log Out</button>
+    </a>
+  </div>
+
+  <div class="toggle-container">
+    <input id="themeToggle" class="toggle" type="checkbox">
+  </div>
+</nav>
 
     <style>
       /* General Styles for the Navigation */
-      .nav-container {
-        background-color: #ffffff;
-        /* Background color */
-        padding: 5px 20px;
-        /* Reduced padding for smaller height */
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .newNav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-      }
-
-      .sitelogo {
-        height: 35px;
-        /* Slightly smaller logo */
-        width: 35px;
-        margin-right: 10px;
-        /* Reduced space between logo and title */
-      }
-
-      .nav__logo {
-        font-size: 28px;
-        /* Adjust font size */
-        color: #ece6e6;
-        /* Logo color */
-        text-decoration: none;
-        /* Remove underline */
-      }
-
-      .navLinks {
-        list-style: none;
-        /* Remove bullet points */
-        display: flex;
-        /* Display items in a row */
-        margin: 0;
-        /* Remove default margin */
-        padding: 0;
-        /* Remove default padding */
-      }
-
-      .navLinks.active {
-        display: flex;
-        /* Show links when the 'active' class is applied */
-      }
-
-
-      .link {
-        margin: 0 10px;
-        /* Reduced space between links */
-      }
-
-      .link a {
-        font-size: 18px;
-        /* Increased font size */
-        text-decoration: none;
-        /* Remove underline */
-        color: #d8d4d4;
-        /* Link color */
-        transition: color 0.3s ease;
-        /* Smooth color transition */
-      }
-
-      .link a:hover {
-        color: #007BFF;
-        /* Change color on hover */
-      }
-
-      .dropdown-menu {
-        display: none;
-        /* Hide dropdown initially */
-        position: absolute;
-        /* Position dropdown below the parent */
-        background-color: #fff;
-        /* Dropdown background */
-        border: 1px solid #ccc;
-        /* Border for dropdown */
-        z-index: 1000;
-        /* Ensure dropdown appears above other content */
-      }
-      .dropdown-menu a{
-        color: black;
-      }
-
-      .dropdown:hover .dropdown-menu {
-        display: block;
-        /* Show dropdown on hover */
-      }
-
-      .contact-btns {
-        display: flex;
-        /* Align buttons side by side */
-        align-items: center;
-        gap: 10px;
-        /* Small gap between the buttons */
-      }
-
-      .contact-btn {
-        margin: 0;
-        /* Remove extra space between buttons */
-      }
-
-      .btn {
-        padding: 8px 12px;
-        /* Adjusted padding for smaller height */
-        border: none;
-        /* Remove border */
-        border-radius: 5px;
-        /* Rounded corners */
-        cursor: pointer;
-        /* Pointer cursor on hover */
-      }
-
-      /* Hamburger Menu Styles */
-      .hamburger {
-        display: none;
-        /* Hide on larger screens */
-      }
-
-      /* Toggle Theme Container */
-      .toggle-container {
-        display: flex;
-        align-items: center;
-        /* Center vertically */
-      }
-
-      /* Responsive Styles */
-      @media (max-width: 1168px) {
-        .hamburger {
-          display: block;
-          /* Show hamburger on small screens */
-        }
-
-        .navLinks {
-          display: none;
-          /* Hide nav links on small screens */
-          flex-direction: column;
-          /* Stack links vertically */
-          position: absolute;
-          /* Position over content */
-          top: 60px;
-          /* Adjusted position below navbar */
-          left: 0;
-          background-color: #ffffff;
-          /* Background color */
-          width: 100%;
-          /* Full width */
-          z-index: 1000;
-          /* Stack above other content */
-          padding: 10px 0;
-          /* Padding for spacing */
-        }
-
-        .navLinks.active {
-          display: flex;
-          /* Show links when active */
-          padding: 10px;
-          /* Padding around links */
-        }
-
-        .link {
-          margin: 10px 0;
-          /* Space between links */
-          text-align: center;
-          /* Center align links */
-        }
-
-        .dropdown-menu {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          position: static;
-          /* Keeps it positioned in-line with other elements */
-          background-color: #000;
-          /* Dark background for better contrast */
-          color: #ffffff;
-          /* White text color */
-          padding: 10px 0;
-          width: 100%;
-          /* Full width to match the navbar on small screens */
-        }
-
-        .dropdown-menu a {
-          color: #ffffff;
-          /* Ensure text color is white */
-          padding: 8px 0;
-          /* Padding for each dropdown item */
-          text-align: center;
-          width: 100%;
-          transition: color 0.3s ease;
-        }
-
-        .dropdown-menu a:hover {
-          color: #007BFF;
-          /* Highlight color on hover */
-        }
-
-        /* Initially hide the dropdown menu */
-        .dropdown-menu {
-          display: none;
-        }
-
-        /* Show the dropdown menu when 'active' class is applied */
-        .dropdown-menu.active {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          background-color: white;
-          /* Dark background for contrast */
-          padding: 10px 0;
-          width: 100%;
-        }
-
-        .dropdown-menu a {
-
-          color: #ffffff;
-          /* White text color */
-          padding: 8px 0;
-          text-align: center;
-          width: 100%;
-          transition: color 0.3s ease;
-        }
-
-        .dropdown-menu a:hover {
-          color: #007BFF;
-          /* Hover color */
-        }
-
-      }
+      .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow-y: auto;
+    z-index: 1000;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .sitelogo {
+    height: 35px;
+    width: 35px;
+    margin-right: 10px;
+  }
+
+  .nav__logo {
+    font-size: 24px;
+    text-decoration: none;
+    color: #ecf0f1;
+  }
+
+  .sidebar-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  .link {
+    margin: 10px 0;
+  }
+
+  .link a {
+    color: #bdc3c7;
+    text-decoration: none;
+    font-size: 18px;
+    display: block;
+    padding: 10px;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+  }
+
+  .link a:hover {
+    background-color: #34495e;
+  }
+
+  .dropdown-menu {
+    display: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .dropdown:hover .dropdown-menu {
+    display: block;
+  }
+
+  .dropdown-menu a {
+    padding: 10px 20px;
+    background-color: #34495e;
+  }
+
+  .contact-btns {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: auto;
+  }
+
+  .btn {
+    padding: 10px;
+    background-color: #2980b9;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .btn:hover {
+    background-color: #3498db;
+  }
+
+  .toggle-container {
+    margin-top: 20px;
+  }
+
+      
     </style>
     <script>
-      const hamburger = document.getElementById('hamburger');
+      /*const hamburger = document.getElementById('hamburger');
       const navLinks = document.querySelector('.navLinks');
       const dropdownToggles = document.querySelectorAll('.dropdown');
 
       hamburger.addEventListener('click', () => {
         navLinks.classList.toggle('active'); // Toggles the 'active' class
-      });
+      });*/
     </script>
 
     <header>