fix: sidebar styles and search button
This commit is contained in:
@@ -185,53 +185,50 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<nav ref="navRef"
|
||||
class="max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
|
||||
class="flex flex-col gap-1 max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
|
||||
|
||||
<!-- Agent Info Link -->
|
||||
<div class="mt-2 flex flex-col">
|
||||
<SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="i-mynaui-info-square"
|
||||
:active="route.path.endsWith('/profile')" />
|
||||
<SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="i-mynaui-info-square"
|
||||
:active="route.path.endsWith('/profile')" />
|
||||
|
||||
<!-- Topics Section -->
|
||||
<button @click="topicsOpen = !topicsOpen"
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
|
||||
<span class="text-sm font-medium">Topics</span>
|
||||
<span
|
||||
class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="topicsOpen ? '' : '-rotate-90'"></span>
|
||||
</button>
|
||||
<!-- Topics Section -->
|
||||
<button @click="topicsOpen = !topicsOpen"
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
|
||||
<span class="text-sm font-medium">Topics</span>
|
||||
<span
|
||||
class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="topicsOpen ? '' : '-rotate-90'"></span>
|
||||
</button>
|
||||
|
||||
<Collapsible :is-open="topicsOpen">
|
||||
<div @click="handleNavClick" class="mt-1 flex flex-col transform-origin-center-top">
|
||||
<RowVirtualizerFixed :scroll-element="navRef" key-field="id" :prerender="50" :items="topics"
|
||||
:item-size="40" :overscan="20">
|
||||
<template v-slot="{ item: topic }">
|
||||
<a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
|
||||
:href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.name"
|
||||
class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]"
|
||||
:class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
|
||||
<input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
|
||||
v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
|
||||
@blur="saveRename"
|
||||
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
|
||||
<div v-else-if="topic.renaming" class="flex w-full">
|
||||
<span class="i-svg-spinners-3-dots-fade text-6"></span>
|
||||
</div>
|
||||
<span v-else
|
||||
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
<Collapsible :is-open="topicsOpen">
|
||||
<div @click="handleNavClick" class="flex flex-col transform-origin-center-top">
|
||||
<RowVirtualizerFixed :scroll-element="navRef" key-field="id" :prerender="50" :items="topics"
|
||||
:item-size="40" :overscan="20">
|
||||
<template v-slot="{ item: topic }">
|
||||
<a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
|
||||
:href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.name"
|
||||
class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]"
|
||||
:class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
|
||||
<input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
|
||||
v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
|
||||
@blur="saveRename"
|
||||
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
|
||||
<div v-else-if="topic.renaming" class="flex w-full">
|
||||
<span class="i-svg-spinners-3-dots-fade text-6"></span>
|
||||
</div>
|
||||
<span v-else class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
|
||||
<div data-action="toggle-dropdown"
|
||||
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</RowVirtualizerFixed>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
<div data-action="toggle-dropdown"
|
||||
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</RowVirtualizerFixed>
|
||||
</div>
|
||||
</Collapsible>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
|
||||
Reference in New Issue
Block a user