zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve mobile responsiveness across UI

Browse Source 
Sidenav becomes a full-screen overlay on mobile with slide-in animation.
Dialog goes full-screen on small screens. Settings dialog gets a mobile
nav with hamburger menu. Touch targets and text sizes scaled up for
mobile. Slider gets visual checked/unchecked colors. Sidebar auto-closes
on mobile route navigation. Resize handle hidden on mobile.
This commit is contained in:
Zoe
2026-04-27 12:06:15 -05:00
parent 8c2cefea49
commit 61c73f394d
13 changed files with 163 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Dialog/QuickSwitcher.vue
+7 -2
View File
@@ -116,14 +116,19 @@ onMounted(() => { inputRef.value?.focus(); });
<template> <template>
<div <div
class="flex flex-col w-[100vw] max-w-4xl max-h-[60vh] bg-[var(--color-bg-elevated)] rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden"> class="flex flex-col w-[100vw] max-w-4xl md:max-h-[60vh] bg-[var(--color-bg-elevated)] md:rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
<!-- Search --> <!-- Search -->
<div class="p-4 border-b border-[var(--color-border)]"> <div class="flex p-4 w-full border-b border-[var(--color-border)]">
<input ref="inputRef" v-model="query" type="text" role="combobox" aria-autocomplete="list" <input ref="inputRef" v-model="query" type="text" role="combobox" aria-autocomplete="list"
aria-haspopup="listbox" :aria-expanded="flattenedResults.length > 0" :aria-controls="listboxId" aria-haspopup="listbox" :aria-expanded="flattenedResults.length > 0" :aria-controls="listboxId"
:aria-activedescendant="flattenedResults[selectedIndex]?.uiId" placeholder="Search agents and topics..." :aria-activedescendant="flattenedResults[selectedIndex]?.uiId" placeholder="Search agents and topics..."
class="placeholder:text-[var(--text-tertiary)] w-full bg-transparent border-none outline-none text-lg text-[var(--text-primary)]" class="placeholder:text-[var(--text-tertiary)] w-full bg-transparent border-none outline-none text-lg text-[var(--text-primary)]"
@keydown="handleKeyDown" /> @keydown="handleKeyDown" />
<button
class="p-2 flex items-center justify-center md:hidden rounded hover:bg-[var(--color-hover)] text-[var(--text-secondary)] transition-colors"
@click="emit('close')">
<span class="block i-mynaui-x-solid"></span>
</button>
</div> </div>
<div ref="navRef" <div ref="navRef"
app/components/Dialog/Settings.vue
+44 -9
View File
@@ -39,6 +39,21 @@ const props = defineProps<{
const { close, setOptions } = useDialog(); const { close, setOptions } = useDialog();
const mobileNavOpen = ref(false);
onMounted(() => {
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) {
mobileNavOpen.value = false;
}
})
});
const handleNavigate = (page: string, params?: string) => {
setOptions({ page: page as keyof typeof PAGES_CONFIG, params });
mobileNavOpen.value = false;
};
const runtimePage = computed(() => { const runtimePage = computed(() => {
// 1. Get the base config (e.g., 'providers' or 'general') // 1. Get the base config (e.g., 'providers' or 'general')
const config = PAGES_CONFIG[props.page as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general; const config = PAGES_CONFIG[props.page as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
@@ -70,13 +85,26 @@ const runtimePage = computed(() => {
</script> </script>
<template> <template>
<div class="p-2 flex h-[70vh] h-[70dvh] w-[85vw]"> <div class="p-2 flex flex-col md:flex-row h-screen md:h-[70vh] md:h-[70dvh] w-screen md:w-[85vw]">
<nav class="w-64 flex flex-col gap-1 mr-2 overflow-y-auto"> <nav :class="[
<!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav --> 'w-full md:w-64 flex-col gap-1 mr-2 overflow-y-auto text-xl md:text-base',
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" // Mobile: hidden by default, shown as fixed overlay
@navigate="(p: string, params?: string) => setOptions({ page: p, params })" :params="props.params" /> 'hidden md:flex',
mobileNavOpen ? '!flex fixed inset-y-0 left-0 z-15 bg-[var(--bg-base)] p-2 shadow-xl' : ''
]">
<!-- Mobile close button -->
<button
class="md:hidden flex items-center justify-center h-9 w-full rounded-lg @hover:bg-[var(--color-hover)] text-[var(--text-secondary)]"
@click="mobileNavOpen = false">
<span class="i-mynaui-x-solid mr-2"></span>
Close
</button>
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setOptions({ page: id })" <!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" @navigate="handleNavigate"
:params="props.params" />
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="handleNavigate(id)"
:class="[page === id ? 'bg-[var(--color-hover)]' : '@hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']"> :class="[page === id ? 'bg-[var(--color-hover)]' : '@hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
<div class="flex items-center gap-2 max-w-full flex-1"> <div class="flex items-center gap-2 max-w-full flex-1">
<span :class="['w-5 h-5 text-5', config.icon]"></span> <span :class="['w-5 h-5 text-5', config.icon]"></span>
@@ -87,17 +115,24 @@ const runtimePage = computed(() => {
<!-- DYNAMIC CONTENT --> <!-- DYNAMIC CONTENT -->
<main <main
class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-lg border-[var(--color-border)]"> class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-none md:rounded-lg border-[var(--color-border)]">
<header class="flex items-center justify-between pl-2 pb-2 pt-2 "> <header class="flex items-center justify-between pl-2 pb-2 pt-2 ">
<div class="flex items-center gap-2">
<!-- Mobile menu button -->
<button
class="md:hidden flex items-center justify-center h-8 w-8 rounded-lg @hover:bg-[var(--color-hover)]"
@click="mobileNavOpen = true">
<span class="i-mynaui-menu text-5"></span>
</button>
<h2 class="text-lg font-semibold m-0 case-capital">{{ runtimePage.label }}</h2> <h2 class="text-lg font-semibold m-0 case-capital">{{ runtimePage.label }}</h2>
</div>
<button <button
class="@hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]" class="@hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"
@click="close"> @click="close">
<span class="i-mynaui-x-solid"></span> <span class="i-mynaui-x-solid"></span>
</button> </button>
</header> </header>
<component @navigate="(p: string, params?: string) => setOptions({ page: p, params })" <component @navigate="handleNavigate" :is="runtimePage.component" :params="props.params" />
:is="runtimePage.component" :params="props.params" />
</main> </main>
</div> </div>
</template> </template>
app/components/Dialog/index.vue
+2 -2
View File
@@ -53,9 +53,9 @@ onUnmounted(() => {
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" <Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0" enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2"> enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
<div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center"> <div v-if="open" class="z-50 fixed inset-0 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 flex items-center justify-center">
<div <div
class="absolute max-w-6xl bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)] flex"> class="absolute w-full h-full md:w-auto md:h-auto max-w-6xl bg-[var(--bg-base)] rounded-none md:rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
<KeepAlive> <KeepAlive>
<Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" /> <Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
app/components/Settings/ProviderSidebar.vue
+8 -8
View File
@@ -12,34 +12,34 @@ defineEmits(['navigate']);
<template> <template>
<div class="flex flex-col gap-1 overflow-auto"> <div class="flex flex-col gap-1 overflow-auto">
<button @click="$emit('navigate', 'general')" <button @click="$emit('navigate', 'general')"
class="flex items-center gap-2 p-2 rounded-lg text-sm @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"> class="flex items-center gap-2 p-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-chevron-left text-4"></span> Back to General <span class="i-mynaui-chevron-left md:text-4"></span> Back to General
</button> </button>
<button @click="$emit('navigate', 'providers')" <button @click="$emit('navigate', 'providers')"
class="flex items-center gap-2 p-2 rounded-lg text-sm @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"> class="flex items-center gap-2 p-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-envelope-open text-4"></span> All <span class="i-mynaui-envelope-open md:text-4"></span> All
</button> </button>
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div> <div class="px-2 py-4 font-bold md:text-xs text-sm uppercase opacity-50">Enabled Providers</div>
<button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)" <button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)"
:class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']"> :class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]" <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
class="w-4 h-4 text-[var(--text-primary)]" /> class="h-6 w-6 md:w-4 md:h-4 text-[var(--text-primary)]" />
<span>{{ p.name }}</span> <span>{{ p.name }}</span>
</div> </div>
</button> </button>
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Disabled Providers</div> <div class="px-2 py-4 font-bold md:text-xs text-sm uppercase opacity-50">Disabled Providers</div>
<button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id" <button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
@click="$emit('navigate', 'providers', p.id)" @click="$emit('navigate', 'providers', p.id)"
:class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']"> :class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]" <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
class="w-4 h-4 text-[var(--text-primary)]" /> class="h-6 w-6 md:w-4 md:h-4 h-full text-[var(--text-primary)]" />
<span>{{ p.name }}</span> <span>{{ p.name }}</span>
</div> </div>
</button> </button>
app/components/Sidenav/Header.vue
+8 -5
View File
@@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DialogType } from '~/composables/useDialog';
const { user, signOut } = useAuth(); const { user, signOut } = useAuth();
// to prevent the user details from going blank for a // to prevent the user details from going blank for a
@@ -30,18 +32,19 @@ const handleLogout = async () => {
<button @click="dropdownOpen = !dropdownOpen" <button @click="dropdownOpen = !dropdownOpen"
class="flex gap-1 pr-1 items-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"> class="flex gap-1 pr-1 items-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<div <div
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']"> :class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
<img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" /> <img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
<span v-else class="i-mynaui-user text-4 text-[var(--text-secondary)]"></span> <span v-else class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-user text-[var(--text-secondary)]"></span>
</div> </div>
<span <span
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap"> class="md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
{{ cachedUser?.name }} {{ cachedUser?.name }}
</span> </span>
<div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left', <div :class="['transform-origin-left-center flex-shrink-0 w-5 h-5 md:w-4 md:h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40' isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
]"> ]">
<span class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-250 ease-in-out" <span
class="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-250 ease-in-out"
:class="dropdownOpen ? 'rotate-180' : ''"></span> :class="dropdownOpen ? 'rotate-180' : ''"></span>
</div> </div>
</button> </button>
app/components/Sidenav/HeaderAgent.vue
+11 -8
View File
@@ -10,11 +10,13 @@ const { isHovered } = useSidenavContext();
<template> <template>
<header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0"> <header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0">
<div :style="isHovered ? 'width: 32px;' : 'width: 0px;'" <div :class="[
:class="['flex flex-shrink-0 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95']"> 'w-10 flex flex-shrink-0 opacity-100 scale-100 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
isHovered ? 'md:w-8' : 'md:w-0 md:opacity-0 md:scale-95',
]">
<NuxtLink to="/" <NuxtLink to="/"
class="flex @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5"> class="flex @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5">
<span class="i-mynaui-chevron-left text-4.5"></span> <span class="i-mynaui-chevron-left text-5.5 md:text-4.5"></span>
</NuxtLink> </NuxtLink>
</div> </div>
@@ -24,18 +26,19 @@ const { isHovered } = useSidenavContext();
class="shrink-1 max-w-full min-w-0 transition duration-200 pr-2 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"> class="shrink-1 max-w-full min-w-0 transition duration-200 pr-2 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg">
<div class="pointer-events-none flex items-center gap-1.5 max-w-full"> <div class="pointer-events-none flex items-center gap-1.5 max-w-full">
<div <div
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']"> :class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
<img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl" <img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
class="w-full h-full object-cover" /> class="w-full h-full object-cover" />
<span v-else class="h-4 w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span> <span v-else
class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
</div> </div>
<span <span
class="min-w-0 text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap"> class="min-w-0 md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
{{ activeAgent?.name }} {{ activeAgent?.name }}
</span> </span>
<div class="shrink-0 w-4 h-4 text-[var(--text-secondary)]"> <div class="shrink-0 w-5 h-5 md:w-4 md:h-4 text-[var(--text-secondary)]">
<span <span
class="i-mynaui-chevron-up-down inline-block text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span> class="i-mynaui-chevron-up-down inline-block text-5 md:text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
</div> </div>
</div> </div>
</button> </button>
app/components/Sidenav/Item.vue
+6 -6
View File
@@ -16,11 +16,11 @@ const props = defineProps<{
: '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]' : '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
]"> ]">
<div class="flex items-center gap-2 max-w-full flex-1"> <div class="flex items-center gap-2 max-w-full flex-1">
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center"> <div v-if="props.icon" class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
<span class="text-4.5" :class="props.icon"></span> <span class="text-5.5 md:text-4.5" :class="props.icon"></span>
</div> </div>
<div class="flex justify-between items-center w-full"> <div class="flex justify-between items-center w-full">
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name <span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
}}</span> }}</span>
<slot /> <slot />
</div> </div>
@@ -34,11 +34,11 @@ const props = defineProps<{
: '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]' : '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
]"> ]">
<div class="flex items-center gap-2 max-w-full flex-1"> <div class="flex items-center gap-2 max-w-full flex-1">
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center"> <div v-if="props.icon" class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
<span class="text-4.5" :class="props.icon"></span> <span class="text-5.5 md:text-4.5" :class="props.icon"></span>
</div> </div>
<div class="flex justify-between items-center w-full"> <div class="flex justify-between items-center w-full">
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name <span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
}}</span> }}</span>
<slot /> <slot />
</div> </div>
app/components/Sidenav/NavAgent.vue
+10 -9
View File
@@ -154,9 +154,9 @@ onMounted(() => {
<!-- Topics Section --> <!-- Topics Section -->
<button @click="topicsOpen = !topicsOpen" <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"> 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="md:text-sm font-medium">Topics</span>
<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="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="topicsOpen ? '' : '-rotate-90'"></span> :class="topicsOpen ? '' : '-rotate-90'"></span>
</button> </button>
@@ -167,22 +167,23 @@ onMounted(() => {
<template v-slot="{ item: topic }"> <template v-slot="{ item: topic }">
<a :key="topic.id" data-action="navigate" :data-topic-id="topic.id" <a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
:href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.name" :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="group mt-1 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 }"> :class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
<input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input" <input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename" v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
@blur="saveRename" @blur="saveRename"
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" /> class="flex-1 bg-transparent border-none outline-none md:text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
<div v-else-if="topic.renaming" class="flex w-full"> <div v-else-if="topic.renaming" class="flex w-full">
<span class="i-svg-spinners-3-dots-fade text-6"></span> <span class="i-svg-spinners-3-dots-fade text-7 md:text-6"></span>
</div> </div>
<span v-else class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap"> <span v-else class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
{{ topic.name }} {{ topic.name }}
</span> </span>
<div data-action="toggle-dropdown" <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)]"> class="text-[var(--text-secondary)] shrink-0 w-0 max-w-0 opacity-0 overflow-hidden p-1 max-md:w-auto max-md:max-w-none max-md:opacity-100 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]"
<span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span> :class="route.params.topicId === topic.id ? 'w-auto max-w-none opacity-100' : 'group-hover:w-auto group-hover:max-w-none group-hover:opacity-100'">
<span class="pointer-events-none h-6 w-6 md:h-4.5 md:w-4.5 i-tabler-dots"></span>
</div> </div>
</a> </a>
</template> </template>
@@ -202,7 +203,7 @@ onMounted(() => {
visibility: middlewareData.hide?.referenceHidden visibility: middlewareData.hide?.referenceHidden
? 'hidden' ? 'hidden'
: 'visible', : 'visible',
}" class="fixed z-15" :class="transformOrigin"> }" class="fixed z-20" :class="transformOrigin">
<div v-click-outside="closeDropdown" <div v-click-outside="closeDropdown"
class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40"> class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40">
app/components/Sidenav/NavHome.vue
+10 -10
View File
@@ -121,9 +121,9 @@ onMounted(() => {
<button <button
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors w-full" class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors w-full"
@click="toggleAgentsList"> @click="toggleAgentsList">
<span class="text-sm">Agents</span> <span class="md:text-sm">Agents</span>
<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="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="{ '-rotate-90': !agentsOpen }"></span> :class="{ '-rotate-90': !agentsOpen }"></span>
</button> </button>
@@ -131,10 +131,10 @@ onMounted(() => {
<Collapsible :is-open="agentsOpen"> <Collapsible :is-open="agentsOpen">
<div class="flex flex-col transform-origin-top pt-1 pb-1 px-1"> <div class="flex flex-col transform-origin-top pt-1 pb-1 px-1">
<button @click="newAgent" :disabled="creatingAgent" <button @click="newAgent" :disabled="creatingAgent"
class="disabled:cursor-wait flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full"> class="disabled:cursor-wait flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg md:text-sm text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
<div class="h-7 w-7 flex items-center justify-center"> <div class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
<span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-4.5"></span> <span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-5 md:text-4"></span>
<span v-else class="i-mynaui-plus text-4.5"></span> <span v-else class="i-mynaui-plus text-5 md:text-4"></span>
</div> </div>
<span>New Agent</span> <span>New Agent</span>
</button> </button>
@@ -149,15 +149,15 @@ onMounted(() => {
<input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName" <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
@keydown.prevent.enter="saveRename" @keydown.escape="cancelRename" @keydown.prevent.enter="saveRename" @keydown.escape="cancelRename"
@blur="saveRename" @blur="saveRename"
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" /> class="flex-1 bg-transparent border-none outline-none md:text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
<span v-else <span v-else
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap"> class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
{{ agent.name }} {{ agent.name }}
</span> </span>
<div data-action="toggle-dropdown" <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)]"> class="text-[var(--text-secondary)] shrink-0 md: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,background-color] 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> <span class="pointer-events-none h-6 w-6 md:h-4.5 md:w-4.5 i-tabler-dots"></span>
</div> </div>
</a> </a>
</template> </template>
app/components/Sidenav/index.vue
+35 -16
View File
@@ -103,39 +103,49 @@ const navKind = computed(() => {
<template> <template>
<div class="relative"> <div class="relative">
<aside ref="sidenavRef" :class="[ <aside ref="sidenavRef" :class="[
'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', 'mobile-full-width pr-2 md:pr-0 bg-[var(--bg-base)] h-full background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin,transform] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
open ? 'w-full mr-2' : 'w-0 mr-0', open ? 'w-full' : 'w-0',
isResizing ? 'transition-none' : '' isResizing ? 'transition-none' : '',
// Mobile styles
'md:static md:z-auto',
open ? 'md:translate-x-0' : 'md:translate-x-0',
// Mobile overlay styles
'fixed inset-0 z-15 h-screen md:h-full',
open ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
'md:max-w-xs',
]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true" ]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true"
@mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut"> @mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut">
<div :style="{ minWidth: `${sidebarWidth}px` }" class="pl-2 flex flex-col h-full justify-between"> <div :style="{ width: `${sidebarWidth}px` }"
class="mobile-full-width pl-2 flex flex-col h-full justify-between">
<div class="flex flex-col h-full max-h-full overflow-y-hidden"> <div class="flex flex-col h-full max-h-full overflow-y-hidden">
<!-- Header --> <!-- Header -->
<div <div
class="z-25 bg-[var(--bg-base)] relative flex flex-row gap-2 justify-between items-center shrink-0 pb-1.5 h-11 pt-2"> class="z-25 bg-[var(--bg-base)] relative flex flex-row gap-2 justify-between items-center shrink-0 pb-1.5 h-13 md:h-11 pt-2">
<SidenavHeader v-if="navKind === 'home'" /> <SidenavHeader v-if="navKind === 'home'" />
<SidenavHeaderAgent v-else-if="navKind === 'agent'" /> <SidenavHeaderAgent v-else-if="navKind === 'agent'" />
<div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5"> <div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
<div :style="isHovering ? 'width: 32px;' : 'width: 0px;'" <div :class="[
:class="['flex-shrink-0 overflow-hidden rounded-lg transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center-right']"> 'w-10 flex-shrink-0 overflow-hidden rounded-lg transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center-right md:flex',
isHovering ? 'md:w-8' : 'md:w-0',
]">
<Tooltip :hotkey="['ctrl', '[']"> <Tooltip :hotkey="['ctrl', '[']">
<button aria-label="close sidebar" @click="closeSidebar" :class="[ <button aria-label="close sidebar" @click="closeSidebar" :class="[
'flex text-5 h-8 w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit', 'flex h-10 w-10 md:h-8 md:w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit',
]"> ]">
<span <span
class="i-mynaui-panel-left-close text-5 transition-inherit transform-origin-right-center" class="i-mynaui-panel-left-close opacity-100 scale-100 text-6 md:text-5 transition-all transform-origin-right-center"
:class="isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"></span> :class="isHovering ? '' : 'md:opacity-0 md:scale-95'"></span>
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
<div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg"> <div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg">
<Tooltip :hotkey="['ctrl', 'alt', 'n']"> <Tooltip :hotkey="['ctrl', 'alt', 'n']">
<NuxtLink aria-label="Start a new topic" :to="`/agent/${route.params.id}`" :class="[ <NuxtLink aria-label="Start a new topic" :to="`/agent/${route.params.id}`" :class="[
'flex text-5 h-8 w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit', 'flex h-10 w-10 md:h-8 md:w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit',
]"> ]">
<span class="i-mynaui-book-plus text-5"></span> <span class="i-mynaui-book-plus text-6 md:text-5"></span>
</NuxtLink> </NuxtLink>
</Tooltip> </Tooltip>
</div> </div>
@@ -151,8 +161,8 @@ const navKind = computed(() => {
<div class="flex"> <div class="flex">
<Tooltip :hotkey="['ctrl', ',']"> <Tooltip :hotkey="['ctrl', ',']">
<button @click="openDialog(DialogType.Settings)" <button @click="openDialog(DialogType.Settings)"
class="flex items-center justify-center h-7 w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]"> class="flex items-center justify-center h-9 w-9 md:h-7 md:w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
<span class="i-mynaui-cog-four text-5"></span> <span class="i-mynaui-cog-four text-6 md:text-5"></span>
</button> </button>
</Tooltip> </Tooltip>
</div> </div>
@@ -164,8 +174,17 @@ const navKind = computed(() => {
</div> </div>
</aside> </aside>
<!-- resize handle --> <!-- resize handle - hidden on mobile -->
<div @mousedown="onResizeStart" class="absolute top-0 right-0 bottom-0 p-1 cursor-ew-resize"> <div @mousedown="onResizeStart" class="md:flex hidden absolute top-0 left-full bottom-0 p-1 cursor-ew-resize">
</div> </div>
</div> </div>
</template> </template>
<style>
@media (max-width: 767px) {
.mobile-full-width {
width: 100% !important;
min-width: 100% !important;
}
}
</style>
app/components/Slider.vue
+5 -1
View File
@@ -26,12 +26,16 @@ watch(() => props.checked, (newValue) => {
<template> <template>
<button :id="id" role="switch" <button :id="id" role="switch"
:class="{
'checked': active,
}"
class="vl-toggle-switch flex items-center w-[2.5em] h-[1.4em] rounded-[100px] bg-[var(--bg-container)] py-0.5 px-1 transition-[background-color] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" class="vl-toggle-switch flex items-center w-[2.5em] h-[1.4em] rounded-[100px] bg-[var(--bg-container)] py-0.5 px-1 transition-[background-color] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:aria-disabled="(props.disabled === true) ? 'true' : 'false'" :aria-label="label" :aria-labelledby="id" :aria-disabled="(props.disabled === true) ? 'true' : 'false'" :aria-label="label" :aria-labelledby="id"
:tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)" :aria-checked="active" :tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)" :aria-checked="active"
:data-state="(active) ? 'checked' : 'unchecked'"> :data-state="(active) ? 'checked' : 'unchecked'">
<div <div
class="transform-origin-center-left [will-change:tranform] relative left-0 w-[1em] h-[1em] bg-gray-100 rounded-full pointer-events-none transition-all duration-300"> :class="active ? 'bg-gray-100' : 'bg-gray-500 dark:bg-gray-100'"
class="transform-origin-center-left [will-change:tranform] relative left-0 w-[1em] h-[1em] rounded-full pointer-events-none transition-all duration-300">
</div> </div>
</button> </button>
</template> </template>
app/components/ThemeSwitcher.vue
+1 -1
View File
@@ -30,7 +30,7 @@ const currentOption = computed(
<button :ref="setRef" @click="toggle" <button :ref="setRef" @click="toggle"
class="flex items-center justify-center rounded-lg @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]" class="flex items-center justify-center rounded-lg @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
:class="{ :class="{
'h-7 w-7 text-5': size === 'small', 'h-9 w-9 md:h-7 md:w-7 text-5 md:text-6': size === 'small',
'h-9 w-9 text-6': size === 'medium', 'h-9 w-9 text-6': size === 'medium',
'h-11 w-11 text-7': size === 'large', 'h-11 w-11 text-7': size === 'large',
}"> }">
app/composables/useSidebar.ts
+12
View File
@@ -37,6 +37,18 @@ export const useSidebar = () => {
useCookie('sidebar:width').value = sidebarWidth.value.toString(); useCookie('sidebar:width').value = sidebarWidth.value.toString();
}; };
// Auto-close sidebar on mobile when navigating
if (import.meta.client) {
const mobileQuery = window.matchMedia('(max-width: 767px)');
const route = useRoute();
watch(() => route.path, () => {
if (mobileQuery.matches && open.value) {
open.value = false;
}
});
}
return { return {
open: readonly(open), open: readonly(open),
toggle, toggle,