feat: share button added

src/lib/components/layout/Navbar.svelte

@@ -5,16 +5,16 @@
 	import { chatId } from '$lib/stores';
 
 	export let title: string = 'Ollama Web UI';
+	export let shareEnabled: boolean = false;
 </script>
 
-<div
+<nav
-	class=" fixed top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-full z-30"
+	id="nav"
+	class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
 >
-	<div class="basis-full">
+	<div class=" flex max-w-3xl w-full mx-auto px-3">
-		<nav class="py-3" id="nav">
+		<div class="flex w-full max-w-full">
-			<div class=" flex max-w-3xl mx-auto px-3">
+			<div class="pr-2 self-center">
-				<div class="flex w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
-					<div class="pr-2">
 				<button
 					class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
 					on:click={async () => {
@@ -40,13 +40,36 @@
 					</div>
 				</button>
 			</div>
-					<div
+			<div class=" flex-1 self-center font-medium text-ellipsis whitespace-nowrap overflow-hidden">
-						class=" flex-1 self-center font-medium overflow-hidden text-ellipsis whitespace-nowrap w-[80vw] pr-4"
-					>
 				{title != '' ? title : 'Ollama Web UI'}
 			</div>
+
+			{#if shareEnabled}
+				<div class="pl-2">
+					<button
+						class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
+						on:click={async () => {
+							console.log('share');
+						}}
+					>
+						<div class=" m-auto self-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								class="w-4 h-4"
+							>
+								<path
+									d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"
+								/>
+								<path
+									d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
+								/>
+							</svg>
+						</div>
+					</button>
+				</div>
+			{/if}
 		</div>
 	</div>
-		</nav>
+</nav>
-	</div>
-</div>

src/routes/(app)/+page.svelte

@@ -566,7 +566,7 @@
 	}}
 />
 
-<Navbar {title} />
+<Navbar {title} shareEnabled={messages.length > 0} />
 <div class="min-h-screen w-full flex justify-center">
 	<div class=" py-2.5 flex flex-col justify-between w-full">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">

src/routes/(app)/c/[id]/+page.svelte

@@ -579,7 +579,7 @@
 />
 
 {#if loaded}
-	<Navbar {title} />
+	<Navbar {title} shareEnabled={messages.length > 0} />
 	<div class="min-h-screen w-full flex justify-center">
 		<div class=" py-2.5 flex flex-col justify-between w-full">
 			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">