From 0bc3e0a302409865904a5516fae57a79e076e2ed Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 2 Mar 2024 01:21:00 -0800
Subject: [PATCH] feat: tooltip added to sidebar

---
 src/lib/components/layout/Sidebar.svelte | 51 +++++++++++++-----------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 711e4fd6..2f74128b 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -19,6 +19,7 @@
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+	import Tooltip from '../common/Tooltip.svelte';
 
 	let show = false;
 	let navElement;
@@ -670,30 +671,32 @@
 	<div
 		class="fixed left-0 top-[50dvh] z-40 -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
 	>
-		<button
-			id="sidebar-toggle-button"
-			class=" group"
-			on:click={() => {
-				show = !show;
-			}}
-			><span class="" data-state="closed"
-				><div
-					class="flex h-[72px] w-8 items-center justify-center opacity-20 group-hover:opacity-100 transition"
-				>
-					<div class="flex h-6 w-6 flex-col items-center">
-						<div
-							class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show
-								? 'group-hover:rotate-[15deg]'
-								: 'group-hover:rotate-[-15deg]'}"
-						/>
-						<div
-							class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show
-								? 'group-hover:rotate-[-15deg]'
-								: 'group-hover:rotate-[15deg]'}"
-						/>
+		<Tooltip placement="right" content={`${show ? 'Close' : 'Open'} sidebar`}>
+			<button
+				id="sidebar-toggle-button"
+				class=" group"
+				on:click={() => {
+					show = !show;
+				}}
+				><span class="" data-state="closed"
+					><div
+						class="flex h-[72px] w-8 items-center justify-center opacity-20 group-hover:opacity-100 transition"
+					>
+						<div class="flex h-6 w-6 flex-col items-center">
+							<div
+								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show
+									? 'group-hover:rotate-[15deg]'
+									: 'group-hover:rotate-[-15deg]'}"
+							/>
+							<div
+								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show
+									? 'group-hover:rotate-[-15deg]'
+									: 'group-hover:rotate-[15deg]'}"
+							/>
+						</div>
 					</div>
-				</div>
-			</span>
-		</button>
+				</span>
+			</button>
+		</Tooltip>
 	</div>
 </div>