feat: update header layout

src/components/Header.tsx

@@ -5,6 +5,7 @@ import {
   IconHome,
   IconNetwork,
   IconNetworkOff,
+  IconPalette,
   IconRuler,
   IconSettings,
 } from '@tabler/icons-solidjs'
@@ -17,9 +18,8 @@ export const Header = () => {
   const navigate = useNavigate()
 
   return (
-    <div class="sticky inset-x-0 top-0 z-10 flex items-center rounded-md bg-base-200 px-4 py-2">
+    <ul class="menu rounded-box menu-horizontal sticky left-0 top-0 z-10 flex items-center justify-center gap-2 bg-base-200 p-2">
       <Show when={location.pathname !== '/setup'}>
-        <ul class="menu rounded-box menu-horizontal">
         <li>
           <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
             <IconHome />
@@ -27,11 +27,7 @@ export const Header = () => {
         </li>
 
         <li>
-            <A
+          <A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
-              class="tooltip tooltip-bottom"
-              href="/proxies"
-              data-tip="Proxies"
-            >
             <IconGlobe />
           </A>
         </li>
@@ -77,15 +73,14 @@ export const Header = () => {
             <IconNetworkOff />
           </button>
         </li>
-        </ul>
       </Show>
 
-      <div class="drawer drawer-end ml-auto w-auto">
+      <div class="drawer drawer-end w-auto sm:ml-auto">
         <input id="themes" type="checkbox" class="drawer-toggle" />
 
         <div class="drawer-content">
-          <label for="themes" class="btn drawer-button btn-sm m-2 uppercase">
+          <label for="themes" class="btn btn-primary drawer-button btn-sm">
-            Themes
+            <IconPalette />
           </label>
         </div>
 
@@ -107,6 +102,6 @@ export const Header = () => {
           </ul>
         </div>
       </div>
-    </div>
+    </ul>
   )
 }