Move theme toggle (sun icon) into header

Signed-off-by: silvialpz <74107990+silvialpz@users.noreply.github.com>

Author: silvialpz

docs/_includes/header_custom.html

@@ -2424,7 +2424,7 @@
   }
 
   // Add theme toggle button as floating button
-  function addThemeToggleToMainArea() {
+  function addThemeToggleToAuxNav() {
     if (!document.getElementById('main-theme-toggle')) {
       const themeButton = document.createElement('button');
       themeButton.id = 'main-theme-toggle';
@@ -2434,10 +2434,8 @@
 
       // Style the button to be clearly visible
       themeButton.style.cssText = `
-        position: fixed !important;
         top: 80px !important;
         right: calc(50% - 440px) !important;
-        z-index: 9999 !important;
         background: #6b7280 !important;
         color: white !important;
         border: none !important;
@@ -2446,7 +2444,6 @@
         font-size: 16px !important;
         cursor: pointer !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
-        display: flex !important;
         align-items: center !important;
         gap: 8px !important;
         font-weight: 500 !important;
@@ -2481,8 +2478,15 @@
         updateMainThemeButton();
         updateNavigationThemeLink();
       });
-      
-      document.body.appendChild(themeButton);
+
+
+      const auxNavList = document.querySelector('.aux-nav-list');
+      // Creat a list item to wrap teh themeButton with 
+      const listItem = document.createElement('li');
+      listItem.className = 'aux-nav-list-item';
+      listItem.appendChild(themeButton);
+      // Append to aux navigation
+      auxNavList.appendChild(listItem);
       updateMainThemeButton();
     }
   }
@@ -2506,7 +2510,7 @@
   }
 
   // Add main theme button after page loads
-  setTimeout(addThemeToggleToMainArea, 200);
+  setTimeout(addThemeToggleToAuxNav, 200);
 
   // Function to update navigation theme link
   function updateNavigationThemeLink() {