From f0b1cf7493d66a33268834a3a4700572e43a1796 Mon Sep 17 00:00:00 2001
From: Anushka Chouhan <anushkachouhan064@gmail.com>
Date: Wed, 16 Oct 2024 18:22:46 +0530
Subject: [PATCH] Update Navabar

---
 assets/css/style.css |  48 +++++++++---------
 index.html           | 118 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 123 insertions(+), 43 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 7d676054..ccc893ec 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,3 +1,7 @@
+*{
+  margin: 0;
+  padding: 0;box-sizing: border-box;
+}
 body {
   user-select: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
@@ -5,6 +9,8 @@ body {
   background-size: cover;
   color: var(--sonic-silver);
   user-select: none;
+  padding: 0;
+  margin: 0;
 }
 .visitor-counter {
   font-family: var(--ff-philosopher);
@@ -715,13 +721,12 @@ body {
 \*-----------------------------------*/
 
 .header {
-  background-color: white;
-
+  background-color: white;  
   position: absolute;
-  top: 10px;
-  right: 10px;
+  /* top: 10px;
+  right: 10px;  
   left: 10px;
-  padding-block: 12px;
+  padding-block: 12px; */
   z-index: 4;
   transition: var(--transition-2);
 }
@@ -751,7 +756,7 @@ body {
 
 .header .container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   height: 80px;
 }
@@ -804,7 +809,7 @@ body {
 }
 
 .navbar.active {
-  max-height: 387px;
+  max-height: 800px;
   visibility: visible;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
@@ -815,7 +820,7 @@ body {
 .navbar-list {
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; 
   margin: 0;
   padding: 0;
   height: 80px;
@@ -2699,9 +2704,9 @@ footer {
   .container1,
   .header,
   .navbar {
-    max-width: 540px;
+    max-width: 840px;
     width: 100%;
-    margin-inline: auto;
+    /* margin-inline: auto; */
     padding: 0;
     /* border-radius: var(--radius-5); */
   }
@@ -2715,7 +2720,7 @@ footer {
    */
 
   .header {
-    top: 30px;
+    /* top: 30px; */
   }
 
   .header.active {
@@ -2724,7 +2729,7 @@ footer {
   }
 
   .navbar {
-    left: 50%;
+    /* left: 50%; */
     transform: translateX(-50%);
   }
 
@@ -2795,7 +2800,7 @@ footer {
   .container1,
   .header,
   .navbar {
-    max-width: 720px;
+    max-width: 920px;
     /* border-radius:61px; */
   }
 
@@ -3621,7 +3626,7 @@ footer {
   align-items: center;
   justify-content: center;
   margin-top: 30px;
-  right: -4px;
+  right: -44px;
   top: 15px;
 }
 
@@ -3680,14 +3685,14 @@ footer {
 .switch-label .moon-icon {
   color: #bdc3c7;
   opacity: 0;
-  left: 5px;
+  left: 2px;
 }
 
 /* Switch Button */
 .switch-button {
   position: absolute;
   top: 3px;
-  left: 3px;
+  /* left: 3px; */
   width: 25px;
   height: 25px;
   background-color: #fff;
@@ -3700,15 +3705,10 @@ footer {
 
 .switch-checkbox:checked + .switch-label {
   background-color:  #34495e;
-  left: 242px;
-  margin-top: -30px
-}
-
-.switch-checkbox:checked + .switch-label {
-  background-color: #34495e;
-  left: 242px;
-  margin-top: -30px
+  left: 200px;
+  margin-top: -30px;
 }
+ 
 
 .switch-checkbox:checked + .switch-label .sun-icon {
   opacity: 0;
diff --git a/index.html b/index.html
index 5d889a8c..1212c2db 100644
--- a/index.html
+++ b/index.html
@@ -1707,7 +1707,7 @@
   position: sticky !important;
   align-items: center;
   justify-content: space-between;
-  margin-left: -18rem; 
+  margin-left: -5rem; 
   /* margin-left: 5rem; */
 }
 
@@ -3156,17 +3156,56 @@
   }
 });
 </script>
-  <header class="header header-anim nav-h" data-header>
+<style>
+  .dropdown {
+      position: relative;
+  }
+  .dropdown-menu {
+      display: none;
+      position: absolute;
+      background: white; /* Adjust as needed */
+      list-style: none;
+      padding: 10px; /* Adjust as needed */
+      border: 1px solid #ccc; /* Adjust as needed */
+      z-index: 1000; /* Ensure it appears above other elements */
+  }
+  .dropdown-menu {
+    display: none; /* Initially hide the dropdown */
+    position: absolute; /* Position it absolutely */
+    background-color: #fff; /* Background color */
+    z-index: 1; /* Ensure it is above other elements */
+}
+.dropdown:hover .dropdown-menu {
+    display: block; /* Show dropdown on hover */
+}
+.dropdown .navbar-link {
+    position: relative; /* Needed for arrow positioning */
+}
+  .dropdown-item {
+      padding: 5px 10px; /* Adjust padding */
+  }
+  .navbar-link {
+      display: block; /* Make links fill the container */
+      padding: 8px; /* Adjust padding */
+  }
+  .arrow {
+    transition: transform 0.3s; /* Smooth transition for arrow */
+}
 
-    <div class="container mobile-container-styles">
+.dropdown:hover .arrow {
+    transform: rotate(180deg); /* Rotate arrow on hover */
+}
+</style>
 
-      <nav class="navbar nav_activated" data-navbar>
+  <header class="header header-anim nav-h" data-header>
 
+    <div class="container mobile-container-styles">
 
-        <ul class="navbar-list nav">
-          <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-            <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
-          </a>
+      <nav class="navbar nav_activated" data-navbar> 
+        <ul class="navbar-list nav"> 
+        <a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+          <img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
+        </a>  
           <li class="navbar-item">
             <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
                 class="ri-home-fill"></i> Home</a>
@@ -3175,8 +3214,14 @@
                 <a href="./assets/html/about.html"  class="navbar-link" data-nav-link><i
                     class="ri-home-fill"></i>About Us</a>
               </li>
-              
-          <li class="navbar-item">
+              <li class="navbar-item">
+                <a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
+                    class="ri-customer-service-2-fill"></i> Contact</a>
+                </li>
+                <li class="navbar-item" id="login-signup-link">
+                  <a href="./assets/html/login.html" class="navbar-link">Create Account</a>
+                </li>
+            <!-- <li class="navbar-item">
             <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
                 class="ri-bar-chart-fill"></i> Benefits</a>
           </li>
@@ -3186,25 +3231,21 @@
                 class="ri-bar-chart-fill"></i> Genre</a>
           </li>
 
-          <li class="navbar-item">
-            <a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
-                class="ri-customer-service-2-fill"></i> Contact</a>
-            </li>
+        
             
             <li class="navbar-item">
               <a href="#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
                   <i class="ri-questionnaire-fill"></i> FAQ
               </a>
-          </li>
+          </li> 
 
           <li class="navbar-item">
-            <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
+            <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+          </li>
             <li class="navbar-item" id="login-signup-link">
               <a href="./assets/html/event.html" class="navbar-link">Events</a>
             </li>
-          <li class="navbar-item" id="login-signup-link">
-            <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
-          </li>
+          
           <li class="navbar-item" id="login-signup-link">
             <a href="comsp.html" class="navbar-link">Community Spotlight</a>
           </li>
@@ -3213,7 +3254,37 @@
               <a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" data-nav-link>
                   <i class="ri-bar-chart-fill"></i> Audio<br> Books
               </a>
+          </li> -->
+           <!-- New Dropdown Menu for More -->
+    <li class="navbar-item dropdown">
+      <a href="#" class="navbar-link dropdown-toggle" onclick="toggleDropdown(event)">More <span class="arrow" id="arrow" style="display: inline;">&#9660;</span></a>
+      <ul class="dropdown-menu">
+          <li class="dropdown-item">
+              <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link>
+                  <i class="ri-bar-chart-fill"></i> Benefits
+              </a>
           </li>
+          <li class="dropdown-item">
+              <a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link>
+                  <i class="ri-bar-chart-fill"></i> Genre
+              </a>
+          </li>
+          <li class="dropdown-item">
+              <a href="#faq" onclick="lenis.scrollTo('#faq')" class="navbar-link" data-nav-link>
+                  <i class="ri-questionnaire-fill"></i> FAQ
+              </a>
+          </li>
+          <li class="dropdown-item">
+              <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+          </li>
+          <li class="dropdown-item" id="login-signup-link">
+              <a href="./assets/html/event.html" class="navbar-link">Events</a>
+          </li>
+          <li class="dropdown-item" id="login-signup-link">
+              <a href="comsp.html" class="navbar-link">Community Spotlight</a>
+          </li>
+      </ul>
+  </li>
             
           <li>
           <div class="action">
@@ -3241,6 +3312,13 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                 </li>
               </ul>
               </div>
+              <script>
+                function toggleDropdown(event) {
+                    event.preventDefault();
+                    const dropdownMenu = event.currentTarget.nextElementSibling;
+                    dropdownMenu.classList.toggle('show');
+                }
+            </script>
               <script>
                 document.addEventListener("DOMContentLoaded", () => {
                     const savedAvatar = localStorage.getItem("selectedAvatar");
@@ -3305,6 +3383,7 @@ <h1>Logout Account</h1>
           <div class="line"></div>
           <div class="line"></div>
         </div> -->
+
       </nav>
       <div id="mobile_View_Menu">
         <span id="menu_lines"></span>
@@ -5926,6 +6005,7 @@ <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
     .newsletter {
         padding: 20px;
     }
+  }
 </style>
         
 <!--<script>