tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

feat: tooltip added to sidebar

Browse source
This commit is contained in:
Timothy J. Baek 2024-03-02 01:21:00 -08:00
parent f9482275f2
commit 0bc3e0a302
1 changed files with 27 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/lib/components/layout/Sidebar.svelte
View file

@ -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 @@
<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>