UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-22 08:07:55 +00:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

refac: navbar styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-05-14 14:50:24 -10:00
parent 170361c27e
commit a57a01a598
3 changed files with 75 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/components/layout/Navbar.svelte
View File

@ -2,7 +2,16 @@
import { getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import { WEBUI_NAME, chatId, modelfiles, settings, showSettings, showSidebar } from '$lib/stores';
import {
WEBUI_NAME,
chatId,
mobile,
modelfiles,
settings,
showSettings,
showSidebar,
user
} from '$lib/stores';
import { slide } from 'svelte/transition';
import ShareChatModal from '../chat/ShareChatModal.svelte';
@ -10,6 +19,7 @@
import Tooltip from '../common/Tooltip.svelte';
import Menu from './Navbar/Menu.svelte';
import { page } from '$app/stores';
import UserMenu from './Sidebar/UserMenu.svelte';
const i18n = getContext('i18n');
@ -155,6 +165,29 @@
</div>
</button>
</Tooltip>
{#if !$mobile && $user !== undefined}
<UserMenu
role={$user.role}
on:show={(e) => {
if (e.detail === 'archived-chat') {
// showArchivedChatsModal = true;
}
}}
>
<button
class=" flex rounded-xl p-1.5 w-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
>
<div class=" self-center">
<img
src={$user.profile_image_url}
class=" size-6 object-cover rounded-full"
alt="User profile"
/>
</div>
</button>
</UserMenu>
{/if}
</div>
</div>
</div>

69
src/lib/components/layout/Sidebar.svelte
View File

@ -1,6 +1,15 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { user, chats, settings, showSettings, chatId, tags, showSidebar } from '$lib/stores';
import {
user,
chats,
settings,
showSettings,
chatId,
tags,
showSidebar,
mobile
} from '$lib/stores';
import { onMount, getContext } from 'svelte';
const i18n = getContext('i18n');
@ -703,38 +712,40 @@
</div>
</div>
<div class="px-2.5">
<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->
{#if $mobile}
<div class="px-2.5">
<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->
<div class="flex flex-col">
{#if $user !== undefined}
<UserMenu
role={$user.role}
on:show={(e) => {
if (e.detail === 'archived-chat') {
showArchivedChatsModal = true;
}
}}
>
<button
class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
showDropdown = !showDropdown;
<div class="flex flex-col">
{#if $user !== undefined}
<UserMenu
role={$user.role}
on:show={(e) => {
if (e.detail === 'archived-chat') {
showArchivedChatsModal = true;
}
}}
>
<div class=" self-center mr-3">
<img
src={$user.profile_image_url}
class=" max-w-[30px] object-cover rounded-full"
alt="User profile"
/>
</div>
<div class=" self-center font-semibold">{$user.name}</div>
</button>
</UserMenu>
{/if}
<button
class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
on:click={() => {
showDropdown = !showDropdown;
}}
>
<div class=" self-center mr-3">
<img
src={$user.profile_image_url}
class=" max-w-[30px] object-cover rounded-full"
alt="User profile"
/>
</div>
<div class=" self-center font-semibold">{$user.name}</div>
</button>
</UserMenu>
{/if}
</div>
</div>
</div>
{/if}
</div>
<div

2
src/lib/components/layout/Sidebar/UserMenu.svelte
View File

@ -28,7 +28,7 @@
<slot name="content">
<DropdownMenu.Content
class="w-full max-w-[240px] rounded-lg p-1 py-1 border border-gray-850 z-50 bg-gray-850 text-white text-sm"
class="w-full max-w-[240px] rounded-lg p-1 py-1 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-gray-850 text-white text-sm"
sideOffset={8}
side="bottom"
align="start"