From 85ccb8fce235d0048290441394ae49d83313967e Mon Sep 17 00:00:00 2001
From: Shibo Lyu <github@of.sb>
Date: Sat, 31 Aug 2024 11:51:44 +0800
Subject: [PATCH] refactor: adjust chat header design on desktop

---
 .../(app)/chats/[chatId]/ChatHeader.svelte    | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/routes/(app)/chats/[chatId]/ChatHeader.svelte b/src/routes/(app)/chats/[chatId]/ChatHeader.svelte
index 79f2292..1481987 100644
--- a/src/routes/(app)/chats/[chatId]/ChatHeader.svelte
+++ b/src/routes/(app)/chats/[chatId]/ChatHeader.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="box-border flex min-h-[calc(3rem+1px)] w-full gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
+	class="relative box-border flex min-h-[calc(3rem+1px)] w-full items-center gap-2 border-b border-ss-secondary bg-sb-primary p-2 shadow-sm"
 >
 	<Button href="/" class="rounded-full sm:hidden">
 		<svg
@@ -27,8 +27,42 @@
 		{/if}
 		<span class="sr-only">Back</span>
 	</Button>
-	<div class="flex flex-1 flex-col justify-center text-center">
+	<div class="flex flex-1 flex-col justify-center text-center sm:order-2 sm:text-start">
 		<h3 class="truncate text-sm font-semibold">{chat.name}</h3>
 	</div>
-	<AvatarBeam size={30} name={chat.name} />
+	<div class="sm:order-1">
+		<AvatarBeam size={30} name={chat.name} />
+	</div>
+
+	<a class="absolute inset-y-0 start-0 hidden w-2 cursor-default sm:block" href="/">
+		<span class="sr-only">Back</span>
+	</a>
+	<Button class="order-3 hidden size-8 p-0 sm:inline-flex">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+			<path
+				fill-rule="evenodd"
+				d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+		<span class="sr-only">Search</span>
+	</Button>
+	<Button class="order-3 hidden size-8 p-0 sm:inline-flex">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="size-6"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+			/>
+		</svg>
+
+		<span class="sr-only">Options</span>
+	</Button>
 </div>