open-webui/src/lib/components/app/AppSidebar.svelte
Timothy Jaeryang Baek f677fdbf50 refac
2026-09-03 20:22:32 -04:00

80 lines
2.3 KiB
Svelte

<script lang="ts">
import { getContext } from 'svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
import { WEBUI_BASE_URL } from '$lib/constants';
const i18n: any = getContext('i18n');
let selected = '';
</script>
<nav
aria-label={$i18n.t('App navigation')}
class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-8"
>
<div class="flex justify-center relative">
{#if selected === 'home'}
<div class="absolute top-0 left-0 flex h-full">
<div class="my-auto rounded-r-lg w-1 h-8 bg-black dark:bg-white"></div>
</div>
{/if}
<Tooltip content={$i18n.t('Home')} placement="right">
<button
aria-label={$i18n.t('Home')}
class=" cursor-pointer {selected === 'home' ? 'rounded-2xl' : 'rounded-full'}"
on:click={() => {
selected = 'home';
if (window.electronAPI) {
window.electronAPI.load('home');
}
}}
>
<!-- LICENSE covers this Open WebUI app navigation logo.
Do not alter, remove, obscure, or replace it except as LICENSE permits:
https://docs.openwebui.com/license. -->
<img
src="{WEBUI_BASE_URL}/static/splash.png"
class="size-11 dark:invert p-0.5"
alt="logo"
draggable="false"
/>
</button>
</Tooltip>
</div>
<div class=" -mt-1 border-[1.5px] border-gray-100 dark:border-gray-900 mx-4"></div>
<div class="flex justify-center relative group">
{#if selected === ''}
<div class="absolute top-0 left-0 flex h-full">
<div class="my-auto rounded-r-lg w-1 h-8 bg-black dark:bg-white"></div>
</div>
{/if}
<button
aria-label={$i18n.t('Chat')}
class=" cursor-pointer bg-transparent"
on:click={() => {
selected = '';
}}
>
<!-- LICENSE covers this Open WebUI chat navigation logo.
Do not alter, remove, obscure, or replace it except as LICENSE permits:
https://docs.openwebui.com/license. -->
<img
src="{WEBUI_BASE_URL}/static/favicon.png"
class="size-10 {selected === '' ? 'rounded-2xl' : 'rounded-full'}"
alt="logo"
draggable="false"
/>
</button>
</div>
<!-- <div class="flex justify-center relative group text-gray-400">
<button class=" cursor-pointer p-2" on:click={() => {}}>
<Plus className="size-4" strokeWidth="2" />
</button>
</div> -->
</nav>