From 07c82e87d83b8117ad603857723b995f37a058f6 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Mon, 28 Aug 2023 22:28:30 +0800
Subject: [PATCH] feat: update header layout

---
 src/components/Header.tsx | 109 ++++++++++++++++++--------------------
 1 file changed, 52 insertions(+), 57 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8c04f52..dbc687d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,6 +5,7 @@ import {
   IconHome,
   IconNetwork,
   IconNetworkOff,
+  IconPalette,
   IconRuler,
   IconSettings,
 } from '@tabler/icons-solidjs'
@@ -17,75 +18,69 @@ 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 />
-            </A>
-          </li>
+        <li>
+          <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
+            <IconHome />
+          </A>
+        </li>
 
-          <li>
-            <A
-              class="tooltip tooltip-bottom"
-              href="/proxies"
-              data-tip="Proxies"
-            >
-              <IconGlobe />
-            </A>
-          </li>
+        <li>
+          <A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
+            <IconGlobe />
+          </A>
+        </li>
 
-          <li>
-            <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
-              <IconRuler />
-            </A>
-          </li>
+        <li>
+          <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
+            <IconRuler />
+          </A>
+        </li>
 
-          <li>
-            <A
-              class="tooltip tooltip-bottom"
-              href="/conns"
-              data-tip="Connections"
-            >
-              <IconNetwork />
-            </A>
-          </li>
+        <li>
+          <A
+            class="tooltip tooltip-bottom"
+            href="/conns"
+            data-tip="Connections"
+          >
+            <IconNetwork />
+          </A>
+        </li>
 
-          <li>
-            <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
-              <IconFileStack />
-            </A>
-          </li>
+        <li>
+          <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
+            <IconFileStack />
+          </A>
+        </li>
 
-          <li>
-            <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
-              <IconSettings />
-            </A>
-          </li>
+        <li>
+          <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
+            <IconSettings />
+          </A>
+        </li>
 
-          <li>
-            <button
-              class="tooltip tooltip-bottom"
-              data-tip="Switch Endpoint"
-              onClick={() => {
-                setSelectedEndpoint('')
+        <li>
+          <button
+            class="tooltip tooltip-bottom"
+            data-tip="Switch Endpoint"
+            onClick={() => {
+              setSelectedEndpoint('')
 
-                navigate('/setup')
-              }}
-            >
-              <IconNetworkOff />
-            </button>
-          </li>
-        </ul>
+              navigate('/setup')
+            }}
+          >
+            <IconNetworkOff />
+          </button>
+        </li>
       </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">
-            Themes
+          <label for="themes" class="btn btn-primary drawer-button btn-sm">
+            <IconPalette />
           </label>
         </div>
 
@@ -107,6 +102,6 @@ export const Header = () => {
           </ul>
         </div>
       </div>
-    </div>
+    </ul>
   )
 }