From 28f4c1c03d903f42df9bf6888486ee8527bfdbf0 Mon Sep 17 00:00:00 2001
From: LingKa <cnfty786@gmail.com>
Date: Tue, 29 Oct 2024 15:05:40 +0800
Subject: [PATCH] feat(header): beautify header

Signed-off-by: LingKa <cnfty786@gmail.com>
---
 packages/website/src/pages/_common.astro |  9 +--
 packages/website/src/pages/header.tsx    | 93 ++++++++++++------------
 2 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/website/src/pages/_common.astro b/packages/website/src/pages/_common.astro
index b3630cf..afd895c 100644
--- a/packages/website/src/pages/_common.astro
+++ b/packages/website/src/pages/_common.astro
@@ -28,11 +28,10 @@ const locale = Astro.preferredLocale
 		w-m="0"
 		w-min-w="view"
 		w-min-h="screen"
-		w-color="gray-800"
-		w-bg="light-50"
-		w-color-black
-		dark:w-bg-gray-900
-		dark:w-color-white
+        w-color="slate-800"
+        w-bg="slate-50"
+        dark:w-bg-slate-800
+        dark:w-color-slate-50
 		w-children:min-w="full"
 	>
 	<Header {pages} />
diff --git a/packages/website/src/pages/header.tsx b/packages/website/src/pages/header.tsx
index b9b1747..4328388 100644
--- a/packages/website/src/pages/header.tsx
+++ b/packages/website/src/pages/header.tsx
@@ -2,63 +2,64 @@ import { component$ } from '@builder.io/qwik'
 
 import type { Route } from '@lib/types'
 
+const ThemeButton = component$(() => {
+	return (
+		<button
+			w-ml-auto
+			type='button'
+			onClick$={() => {
+				document.documentElement.classList.toggle('dark')
+			}}
+		>
+			<svg width='30px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+				<title>theme button</title>
+				<path
+					w-fill-transparent
+					dark:w-fill-slate-50
+					fill-rule='evenodd'
+					d='M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z'
+				/>
+				<path
+					w-fill-black
+					dark:w-fill-transparent
+					fill-rule='evenodd'
+					d='M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z'
+				/>
+			</svg>
+		</button>
+	)
+})
+
 export default component$<{ pages: Route[] }>((props) => {
 	return (
 		<header
-			w-justify-between
-			w-item-center
+			w-h-16
+			w-w-full
 			w-flex
-			w-pos-sticky
+			w-item-center
+			w-sticky
 			w-top-0
-			w-border-b-2
-			w-bg-light-100
-			dark:w-bg-gray-800
-			w-z-999
-			w-px='[calc(1.5%+1rem)]'
-			w-py='1.25rem'
-			children:w-h-4rem
+			w-z-250
+			w-p-x-10
+			w-bg-slate-50
+			dark:w-bg-slate-800
+			w-border-b-1
+			w-border-slate-200
+			dark:w-border-slate-700
+			w-shadow-lg
+			w-shadow-slate-200
+			dark:w-shadow-slate-900
 		>
-			<img
-				src='/logo.svg'
-				w-translate-y-0
-				w-transition-transform
-				w-delay-50
-				w-duration-200
-				hover:w-translate-y-='-0.5rem'
-				green-500
-				alt='My Happy SVG'
-			/>
-			<nav w-min-w='70%' md:w-min-w='50%' lg:w-min-w='40%'>
-				<ul w-w-full w-h-full w-text-2xl w-grid w-grid-auto-flow-col w-justify-between w-grid-items-center>
+			<img src='/logo.svg' alt='IO' w-p-y-2 w-m-r-8 />
+			<nav w-w-full w-flex w-items-center>
+				<ul w-flex w-items-center w-h-full w-w-min>
 					{props.pages.map((a) => (
-						<li key={a.slug} w-text-align-center w-transition-text w-duration-100 hover:w-color-green-300>
+						<li key={a.slug} w-p-x-4 w-text-md>
 							<a href={`/${a.path}`}>{a.slug}</a>
 						</li>
 					))}
-					<li>
-						<button
-							type='button'
-							onClick$={() => {
-								document.documentElement.classList.toggle('dark')
-							}}
-						>
-							<svg width='30px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
-								<path
-									w-fill-transparent
-									dark:w-fill-black
-									fill-rule='evenodd'
-									d='M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z'
-								/>
-								<path
-									w-fill-black
-									dark:w-fill-transparent
-									fill-rule='evenodd'
-									d='M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z'
-								/>
-							</svg>
-						</button>
-					</li>
 				</ul>
+				<ThemeButton />
 			</nav>
 		</header>
 	)