From d546511c560e0b957c663124593a10c0c9dfa5c4 Mon Sep 17 00:00:00 2001
From: Satyam Singh <satyamsinghu123123@gmail.com>
Date: Mon, 14 Oct 2024 11:28:18 +0530
Subject: [PATCH] allinged toogle button for darkmode

---
 index.html | 48 ++++++++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 92332b42..59b4d3e5 100644
--- a/index.html
+++ b/index.html
@@ -141,11 +141,7 @@
     
 
     /* Position the toggle button to the right */
-    .switch-container {
-      position: absolute;
-      right: 10rem; /* Adjust this value to move the button more to the right */
-      top: 1.5rem; /* Adjust this value to move the button vertically */
-    }
+    
 
     /* For responsiveness */
     @media (max-width: 99rem) {
@@ -1698,12 +1694,7 @@
     
 
     /* Position the toggle button to the right */
-    .switch-container {
-      position: absolute;
-      right: 10rem; /* Adjust this value to move the button more to the right */
-      top: 1.5rem; /* Adjust this value to move the button vertically */
-    }
-
+    
     /* For responsiveness */
     @media (max-width: 99rem) {
       .switch-container {
@@ -2293,9 +2284,7 @@
     .vis-h{
         opacity: 0;
     }
-    .switch-container {
-      right: 7rem !important;
-    }
+    
 }
 @media only screen and (max-width:990px){
   .header{
@@ -3194,10 +3183,25 @@
 
           <li class="navbar-item">
               <a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" data-nav-link>
-                  <i class="ri-bar-chart-fill"></i> Audio<br> Books
+               Audio<br> Books
               </a>
           </li>
-            
+          
+          <!--this  li is added to align the darkmode toggle button  -->
+          <li style="width: 100px;">      
+          </li>
+          <li >
+            <div class="switch-container"  >
+              <input type="checkbox" id="switch" class="switch-checkbox">
+              <label for="switch" class="switch-label">
+                <div class="switch-button">
+                  <span class="material-icons sun-icon">wb_sunny  </span>
+                  <span class="material-icons moon-icon">brightness_2</span>
+                </div>
+              </label>
+            </div>
+          </div>
+          </li>
           <li>
           <div class="action">
             <div class="profile" onclick="menuToggle();">
@@ -3205,6 +3209,7 @@
             </div>
             <div class="menu">
               <h3>XYZ<br /><span>Book Lover</span></h3>
+          
               <ul>
                 <li>
                   <img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a>
@@ -3377,16 +3382,7 @@ <h1>Logout Account</h1>
 
   window.addEventListener("scroll", onScroll);
 </script>
-      <div class="switch-container" style="top: 1.5rem;">
-        <input type="checkbox" id="switch" class="switch-checkbox">
-        <label for="switch" class="switch-label">
-          <div class="switch-button">
-            <span class="material-icons sun-icon">wb_sunny  </span>
-            <span class="material-icons moon-icon">brightness_2</span>
-          </div>
-        </label>
-      </div>
-    </div>
+
     </div>
   </header>
   <link rel="stylesheet" href="assets/css/refresher.css">