95 lines
4.1 KiB
Vue
95 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownItem } from '~/types/dropdown';
|
|
|
|
const route = useRoute();
|
|
const { agents, getAgent } = await useAgents();
|
|
const homeButtonRef = ref<HTMLElement | null>(null);
|
|
|
|
const activeAgent = computed(() => getAgent(route.params.id as string));
|
|
|
|
const hovering = defineModel<boolean>({ required: true });
|
|
const initialized = ref(false);
|
|
|
|
let lastHovering: boolean | null = null;
|
|
onMounted(() => {
|
|
console.log(hovering.value);
|
|
|
|
if (hovering.value && homeButtonRef.value) {
|
|
const width = homeButtonRef.value.scrollWidth;
|
|
homeButtonRef.value.style.width = `calc(${width}px + 0.5rem)`;
|
|
}
|
|
|
|
watch(hovering, (value) => {
|
|
if (lastHovering === value) {
|
|
console.warn('Hovering value did not change, but watcher was triggered');
|
|
}
|
|
console.log(value, lastHovering);
|
|
lastHovering = value;
|
|
|
|
if (!initialized.value) {
|
|
initialized.value = true;
|
|
}
|
|
|
|
if (!homeButtonRef.value) return;
|
|
|
|
if (value) {
|
|
const width = homeButtonRef.value.scrollWidth;
|
|
homeButtonRef.value.style.width = `calc(${width}px + 0.5rem)`;
|
|
} else {
|
|
homeButtonRef.value.style.width = '0';
|
|
}
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
console.log('unmounted');
|
|
});
|
|
|
|
const agentDropdownOpen = ref(false);
|
|
|
|
const agentItems: DropdownItem[] = [];
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex items-center rounded-lg overflow-hidden">
|
|
<div ref="homeButtonRef" style="width: 0;"
|
|
:class="['flex flex-shrink-0 items-center overflow-hidden', initialized ? 'transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]' : '', hovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
|
|
<NuxtLink to="/"
|
|
class="flex hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg decoration-none transition-inherit text-[var(--color-muted)] p-1.5">
|
|
<Icon name="mynaui:chevron-left" class="w-4.5 h-4.5" />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<Dropdown class="overflow-hidden" v-model="agentDropdownOpen" :items="agentItems" placement="center"
|
|
width="calc(80% - 1rem)">
|
|
<template #trigger="{ toggle }">
|
|
<button
|
|
class="flex max-w-full gap-1.5 pr-2 items-center cursor-pointer hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg"
|
|
@click="toggle">
|
|
<div
|
|
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-highlight-high)]']">
|
|
<img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
|
|
class="w-full h-full object-cover" />
|
|
<Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--color-text)] whitespace-nowrap">
|
|
{{ activeAgent?.name }}
|
|
</span>
|
|
<div class="w-4 h-4 text-[var(--color-muted)]">
|
|
<Icon
|
|
class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
|
|
name="mynaui:chevron-up-down" />
|
|
</div>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="flex flex-col gap-1.5 max-h-[calc(2.25rem*4+0.375rem*3)] overflow-y-auto">
|
|
<SidenavItem draggable="false" v-for="agent in agents" :to="`/agent/${agent.id}`" :name="agent.name"
|
|
class="whitespace-nowrap" icon="mynaui:check-hexagon" :key="agent.id"
|
|
:active="activeAgent?.id === agent.id" />
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</header>
|
|
</template> |