style: set bottom when scroll

app/menu/page.tsx

@@ -25,15 +25,20 @@ export default function Menu() {
     const menu = document.querySelector("#menu ul");
     const scrollPosition = document.body.scrollTop; // Lấy vị trí cuộn của body
     console.log('scroll body', scrollPosition);
+    const modeDiv = document.querySelector('.mode-mobile');
 
     if (!menu)
       return;
     if (scrollPosition > lastScrollY) {
       // Cuộn xuống -> ẩn menu
       menu.classList.add('hidden');
+      if (modeDiv)
+        modeDiv.classList.remove('mode');
     } else {
       // Cuộn lên -> hiện menu
       menu.classList.remove('hidden');
+      if (modeDiv)
+        modeDiv.classList.add('mode');
     }
 
     // Cập nhật lastScrollY để so sánh trong lần cuộn tiếp theo
@@ -65,7 +70,7 @@ export default function Menu() {
           </li>
           {/* Add other links similarly */}
         </ul>
-        <div className="mode">
+        <div className="mode-mobile">
           <button onClick={toggleMode}>
             <i className={`bx ${isDarkMode ? 'bx-moon' : 'bx-sun'} sun-moon`}></i>
           </button>

styles/main.css

@@ -16,25 +16,14 @@ i {
 }
 
 
-.mode button i {
-  font-size: 20px;
-}
-
-
-.menu .mode {
-  position: fixed;
-  left: 22px;
-  bottom: 60px;
-}
-
 .main {
   min-height: calc(100vh - 100px);
   /* Adjust 100px to match your footer's height */
   display: flex;
   flex-direction: column;
 }
 
-.menu .mode button {
+.menu .mode-mobile button {
   width: 44px;
   height: 44px;
   display: flex;
@@ -48,7 +37,7 @@ i {
   cursor: pointer;
 }
 
-.menu .mode ._icon_1plrx_24 {
+.menu .mode-mobile ._icon_1plrx_24 {
   position: relative;
   width: 100%;
   height: 100%;

styles/menu.css

@@ -6,6 +6,22 @@
 }
 
 
+.mode-mobile button i {
+  font-size: 20px;
+}
+
+
+.menu .mode-mobile {
+  position: fixed;
+  left: 22px;
+  bottom: 60px;
+}
+
+
+
+
+
+
 .menu ul {
   list-style: none;
   padding: 0;
@@ -101,8 +117,10 @@ svg:not(:host).svg-inline--fa {
     justify-content: space-around;
     align-items: center;
     padding-bottom: 45px;
+  }
 
-
+  .menu .mode.mode-mobile {
+    bottom: 20px;
   }
 
   .hidden {

styles/mode.css

@@ -53,7 +53,7 @@
   color: rgb(250, 250, 250);
 }
 
-.dark-mode .mode:hover i {
+.dark-mode .mode-mobile:hover i {
   color: #009688;
 }
 
@@ -88,7 +88,7 @@
   color: rgb(255, 255, 255);
 }
 
-.dark-mode .mode {
+.dark-mode .mode-mobile {
   color: aliceblue
 }