Dropdowns are FINALLY not a mess. whew that took forever.

src/components/Dropdown.astro

@@ -16,8 +16,6 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
             )
         })
     }
-        <!-- <li class="dropdown-item" id="proxy-auto" data-setting="auto">Auto</li>
-        <li class="dropdown-item" id="proxy-ultraviolet" data-setting="ultraviolet">Ultraviolet</li> -->
     </ul>
 </div>
 <style>
@@ -42,9 +40,9 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
         list-style: none;
         padding: 0;
         text-align: center;
-        height: 0px;
+        max-height: 0px; /* Set max-height to 0 instead of height */
         overflow: hidden;
-        transition: 350ms ease-in-out;
+        transition: max-height 350ms ease-in-out; /* Use max-height in the transition property */
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 10px;
         background-color: #212121;
@@ -55,4 +53,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
         color: white;
         cursor: pointer;
     }
+    .dropdown-item:nth-last-child(1) {
+        border-bottom: none;
+    }
 </style>

src/components/TabList.astro

@@ -5,8 +5,16 @@ import Dropdown from "./Dropdown.astro";
 <div class="content-hidden">
     <div id="content-setting-tab-proxy">
         <h1 style="color: white;">Proxy</h1>
+        <div class="settings-container">
+          <div class="setting__selected-proxy">
             <p style="color: white; font-size: 18px;">Selected Proxy</p>
-        <Dropdown buttonDefaultName="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
+            <Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
+          </div>
+          <div class="setting__search-engine">
+            <p style="color: white; font-size: 18px;">Search Engine</p>
+            <Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine"></Dropdown>
+          </div>
+        </div>
     </div>
     <div id="content-setting-tab-customization">
         <h1 style="color: white;">Customization</h1>
@@ -78,23 +86,23 @@ import Dropdown from "./Dropdown.astro";
     }
 
     function addDropdownListener() {
-      let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
+      let dropdown_toggles = document.getElementsByClassName('dropdown-toggle')
-        if (dropdown_toggle) {
+      Array.from(dropdown_toggles).forEach((toggle) => {
-            dropdown_toggle.addEventListener('click', () => {
+        toggle.addEventListener('click', () => {
-            let dropdown = document.getElementById('dropdown__selected-proxy-menu');
+          let dropdown = document.getElementById(toggle.id + "-menu")
           if (dropdown) {
-                if (dropdown.style.height == '0px' || dropdown.style.height == '') {
+            if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
-                    dropdown.style.height = "120px";
+              dropdown.style.maxHeight = dropdown.scrollHeight + 'px'; /* Set max-height dynamically */
-                    dropdown_toggle.style.borderRadius = '10px 10px 0 0';
+              toggle.style.borderRadius = '10px 10px 0 0';
             } else {
-                    dropdown.style.height = '0px';
+              dropdown.style.maxHeight = '0px';
               setTimeout(() => {
-                        dropdown_toggle.style.borderRadius = '10px';
+                toggle.style.borderRadius = '10px';
               }, 300);
             }
           }
-        });
+        })
-      }
+      })
     }
 
     function determineListener(event) {
@@ -103,32 +111,63 @@ import Dropdown from "./Dropdown.astro";
       }
     }
 
+    function closeDropdown(dropdownID) {
+      let dropdown = document.getElementById(dropdownID)
+      if (dropdown) {
+        dropdown.style.maxHeight = '0px';
+        setTimeout(() => {
+          let dropdown_toggle = document.getElementById(dropdownID.replace('-menu', ''));
+          dropdown_toggle.style.borderRadius = '10px';
+        }, 300);
+      }
+    }
+
+    function applySavedLocalStorage(localStorageItem, dropdownID) {
+      if (localStorage.getItem(localStorageItem)) {
+        let dropdown_toggle = document.getElementById(dropdownID);
+        if (dropdown_toggle) {
+          dropdown_toggle.innerText = localStorage.getItem(localStorageItem).charAt(0).toUpperCase() + localStorage.getItem(localStorageItem).slice(1)
+        }
+      }
+    }
+
     document.addEventListener('setting-tabChange', determineListener)
 
     loadContent('setting-tab-proxy')
 
     function setLocalStorageItem(event) {
       if (event.detail == "setting-tab-proxy") {
-        if (localStorage.getItem('selectedProxy')) {
+        applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy')
-          let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
+        applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine')
-
+        let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
-          if (dropdown_toggle) {
+        let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
-            dropdown_toggle.innerText = localStorage.getItem('selectedProxy').charAt(0).toUpperCase() + localStorage.getItem('selectedProxy').slice(1)
+        Array.from(searchEngineDropdown.children).forEach((item) => {
-          }
+          item.addEventListener('click', () => {
-        }
+            localStorage.setItem('selectedSearchEngine', item.dataset.setting)
-        Array.from(document.getElementsByClassName('dropdown-item')).forEach((item) => {
+            applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine')
-            item.addEventListener('click', (event) => {
+            closeDropdown(searchEngineDropdown.id);
-              console.log(event.target.dataset)
-              localStorage.setItem('selectedProxy', event.target.dataset.setting)
-              let dropdown = document.getElementById('dropdown__selected-proxy-menu');
-              if (dropdown) {
-                let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
-                dropdown_toggle.innerText = event.target.innerText
-                dropdown.style.height = '0px';
-                dropdown_toggle.style.borderRadius = '10px';
-              }
           })
         })
+        Array.from(selectedProxyDropdown.children).forEach((item) => {
+          item.addEventListener('click', () => {
+            localStorage.setItem('selectedProxy', item.dataset.setting)
+            applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy')
+            closeDropdown(selectedProxyDropdown.id);
+          })
+        })
+        // Array.from(document.getElementsByClassName('dropdown-item')).forEach((item) => {
+        //     item.addEventListener('click', (event) => {
+        //       console.log(event.target.dataset)
+        //       localStorage.setItem('selectedProxy', event.target.dataset.setting)
+        //       let dropdown = document.getElementById('dropdown__selected-proxy-menu');
+        //       if (dropdown) {
+        //         let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
+        //         dropdown_toggle.innerText = event.target.innerText
+        //         dropdown.style.height = '0px';
+        //         dropdown_toggle.style.borderRadius = '10px';
+        //       }
+        //     })
+        //   })
         }
     }
 
@@ -142,6 +181,10 @@ import Dropdown from "./Dropdown.astro";
     transition: opacity 250ms ease-in-out;
     margin-left: 20px;
 }
+.settings-container {
+    display: flex;
+    gap: 20px;
+}
 label {
   font-size: 24px;
   font-weight: 700;