From 1397bfa84c0e9d352aa8c17b1c63eeaf662eb316 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 5 Oct 2024 14:26:54 -0700
Subject: [PATCH] refac: navbar styling

---
 src/lib/components/chat/Chat.svelte     |  2 +-
 src/lib/components/chat/Messages.svelte |  2 +-
 src/lib/components/layout/Navbar.svelte | 11 ++++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 6db935113..29bc64bb8 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -1926,7 +1926,7 @@
 			{initNewChat}
 		/>
 
-		<PaneGroup direction="horizontal" class="w-full h-full">
+		<PaneGroup direction="horizontal" class="w-full h-ful pt-2">
 			<Pane defaultSize={50} class="h-full flex w-full relative">
 				{#if $banners.length > 0 && !history.currentId && !$chatId && selectedModels.length <= 1}
 					<div class="absolute top-3 left-0 right-0 w-full z-20">
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index b0c322a66..e78708341 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -308,7 +308,7 @@
 	};
 </script>
 
-<div class="h-full flex">
+<div class="h-full flex pt-8">
 	{#if Object.keys(history?.messages ?? {}).length == 0}
 		<Placeholder {selectedModels} bind:prompt />
 	{:else}
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 7c6c11369..83edd3d92 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -39,8 +39,13 @@
 </script>
 
 <ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
-<nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-10">
-	<div class=" flex max-w-full w-full mx-auto px-5 pt-0.5 md:px-[1rem]">
+
+<div class="sticky top-0 z-50 w-full px-1 py-2 -mb-8 flex items-center">
+	<div
+		class=" bg-gradient-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur"
+	></div>
+
+	<div class=" flex max-w-full w-full mx-auto px-5 pt-0.5 md:px-[1rem] bg-transparen">
 		<div class="flex items-center w-full max-w-full">
 			<div
 				class="{$showSidebar
@@ -178,4 +183,4 @@
 			</div>
 		</div>
 	</div>
-</nav>
+</div>