Skip to content

GitLab

Commit 0bc3e0a3 authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

feat: tooltip added to sidebar

parent f9482275
Hide whitespace changes
Inline Side-by-side
Showing with 27 additions and 24 deletions
src/lib/components/layout/Sidebar.svelte
View file @ 0bc3e0a3
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
import Tooltip from '../common/Tooltip.svelte';
let show = false; let show = false;
let navElement; let navElement;
...@@ -670,30 +671,32 @@ ...@@ -670,30 +671,32 @@
<div <div
class="fixed left-0 top-[50dvh] z-40 -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0" class="fixed left-0 top-[50dvh] z-40 -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
> >
<button <Tooltip placement="right" content={`${show ? 'Close' : 'Open'} sidebar`}>
id="sidebar-toggle-button" <button
class=" group" id="sidebar-toggle-button"
on:click={() => { class=" group"
show = !show; on:click={() => {
}} show = !show;
><span class="" data-state="closed" }}
><div ><span class="" data-state="closed"
class="flex h-[72px] w-8 items-center justify-center opacity-20 group-hover:opacity-100 transition" ><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 <div class="flex h-6 w-6 flex-col items-center">
class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show <div
? 'group-hover:rotate-[15deg]' 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]'
/> : 'group-hover:rotate-[-15deg]'}"
<div />
class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show <div
? 'group-hover:rotate-[-15deg]' 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]'
/> : 'group-hover:rotate-[15deg]'}"
/>
</div>
</div> </div>
</div> </span>
</span> </button>
</button> </Tooltip>
</div> </div>
</div> </div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment