refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-08-08 11:53:06 +04:00
parent e2ce735d12
commit b084613004

View file

@ -60,6 +60,7 @@
import Sidebar from '../icons/Sidebar.svelte';
import PinnedModelList from './Sidebar/PinnedModelList.svelte';
import Note from '../icons/Note.svelte';
import { slide } from 'svelte/transition';
const BREAKPOINT = 768;
@ -495,8 +496,8 @@
{#if !$mobile}
<div
class="{$showSidebar
? 'md:hidden'
: ''} py-2 px-1.5 flex flex-col justify-between text-black dark:text-white h-full border-e border-gray-50 dark:border-gray-850"
? 'hidden'
: ''} py-2 px-1.5 flex flex-col justify-between text-black dark:text-white h-full border-e border-gray-50 dark:border-gray-850 z-10"
>
<button
class="flex flex-col flex-1 cursor-[e-resize]"
@ -657,15 +658,17 @@
</div>
{/if}
{#if $showSidebar}
<div
bind:this={navElement}
id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'md:relative w-[260px] max-w-[260px] bg-gray-50 dark:bg-gray-950'
: 'w-[0px] md:relative md:w-[40px] bg-transparent'} {$isApp
? 'bg-gray-50 dark:bg-gray-950 z-50'
: ' bg-transparent z-0 '} {$isApp
? `ml-[4.5rem] md:ml-0 `
: 'transition-width transition-all duration-200 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed z-50 top-0 left-0 overflow-x-hidden
: 'transition-[width] duration-300 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed top-0 left-0 overflow-x-hidden
"
transition:slide={{ duration: 200, axis: 'x' }}
data-state={$showSidebar}
>
<div
@ -1075,7 +1078,9 @@
</Loader>
{/if}
{:else}
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
<div
class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2"
>
<Spinner className=" size-4" />
<div class=" ">Loading...</div>
</div>
@ -1115,6 +1120,7 @@
</div>
</div>
</div>
{/if}
<style>
.scrollbar-hidden:active::-webkit-scrollbar-thumb,