feat: improve mobile responsiveness across UI
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:
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { DialogType } from '~/composables/useDialog';
|
||||
|
||||
const { user, signOut } = useAuth();
|
||||
|
||||
// to prevent the user details from going blank for a
|
||||
@@ -30,18 +32,19 @@ const handleLogout = async () => {
|
||||
<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)]">
|
||||
<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" />
|
||||
<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>
|
||||
<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 }}
|
||||
</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'
|
||||
]">
|
||||
<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>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -10,11 +10,13 @@ const { isHovered } = useSidenavContext();
|
||||
|
||||
<template>
|
||||
<header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0">
|
||||
<div :style="isHovered ? 'width: 32px;' : 'width: 0px;'"
|
||||
: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']">
|
||||
<div :class="[
|
||||
'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="/"
|
||||
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>
|
||||
</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">
|
||||
<div class="pointer-events-none flex items-center gap-1.5 max-w-full">
|
||||
<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"
|
||||
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>
|
||||
<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 }}
|
||||
</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
|
||||
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>
|
||||
</button>
|
||||
|
||||
@@ -16,12 +16,12 @@ const props = defineProps<{
|
||||
: '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
||||
]">
|
||||
<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">
|
||||
<span class="text-4.5" :class="props.icon"></span>
|
||||
<div v-if="props.icon" class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
|
||||
<span class="text-5.5 md:text-4.5" :class="props.icon"></span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
||||
}}</span>
|
||||
<span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
||||
}}</span>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,12 +34,12 @@ const props = defineProps<{
|
||||
: '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
||||
]">
|
||||
<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">
|
||||
<span class="text-4.5" :class="props.icon"></span>
|
||||
<div v-if="props.icon" class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
|
||||
<span class="text-5.5 md:text-4.5" :class="props.icon"></span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
||||
}}</span>
|
||||
<span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
||||
}}</span>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -154,9 +154,9 @@ onMounted(() => {
|
||||
<!-- 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="md: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="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>
|
||||
</button>
|
||||
|
||||
@@ -167,22 +167,23 @@ onMounted(() => {
|
||||
<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="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 }">
|
||||
<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" />
|
||||
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">
|
||||
<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>
|
||||
<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 }}
|
||||
</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>
|
||||
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)]"
|
||||
: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>
|
||||
</a>
|
||||
</template>
|
||||
@@ -202,7 +203,7 @@ onMounted(() => {
|
||||
visibility: middlewareData.hide?.referenceHidden
|
||||
? 'hidden'
|
||||
: 'visible',
|
||||
}" class="fixed z-15" :class="transformOrigin">
|
||||
}" class="fixed z-20" :class="transformOrigin">
|
||||
<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">
|
||||
|
||||
|
||||
@@ -121,9 +121,9 @@ onMounted(() => {
|
||||
<button
|
||||
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">
|
||||
<span class="text-sm">Agents</span>
|
||||
<span class="md:text-sm">Agents</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>
|
||||
</button>
|
||||
|
||||
@@ -131,10 +131,10 @@ onMounted(() => {
|
||||
<Collapsible :is-open="agentsOpen">
|
||||
<div class="flex flex-col transform-origin-top pt-1 pb-1 px-1">
|
||||
<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">
|
||||
<div class="h-7 w-7 flex items-center justify-center">
|
||||
<span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-4.5"></span>
|
||||
<span v-else class="i-mynaui-plus text-4.5"></span>
|
||||
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-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-5 md:text-4"></span>
|
||||
<span v-else class="i-mynaui-plus text-5 md:text-4"></span>
|
||||
</div>
|
||||
<span>New Agent</span>
|
||||
</button>
|
||||
@@ -149,15 +149,15 @@ onMounted(() => {
|
||||
<input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
|
||||
@keydown.prevent.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" />
|
||||
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
|
||||
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 }}
|
||||
</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>
|
||||
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-6 w-6 md:h-4.5 md:w-4.5 i-tabler-dots"></span>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@@ -103,39 +103,49 @@ const navKind = computed(() => {
|
||||
<template>
|
||||
<div class="relative">
|
||||
<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)]',
|
||||
open ? 'w-full mr-2' : 'w-0 mr-0',
|
||||
isResizing ? 'transition-none' : ''
|
||||
'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' : 'w-0',
|
||||
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"
|
||||
@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">
|
||||
<!-- Header -->
|
||||
<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'" />
|
||||
<SidenavHeaderAgent v-else-if="navKind === 'agent'" />
|
||||
|
||||
<div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
|
||||
<div :style="isHovering ? 'width: 32px;' : 'width: 0px;'"
|
||||
: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']">
|
||||
<div :class="[
|
||||
'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', '[']">
|
||||
<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
|
||||
class="i-mynaui-panel-left-close text-5 transition-inherit transform-origin-right-center"
|
||||
:class="isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"></span>
|
||||
class="i-mynaui-panel-left-close opacity-100 scale-100 text-6 md:text-5 transition-all transform-origin-right-center"
|
||||
:class="isHovering ? '' : 'md:opacity-0 md:scale-95'"></span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg">
|
||||
<Tooltip :hotkey="['ctrl', 'alt', 'n']">
|
||||
<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>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@@ -151,8 +161,8 @@ const navKind = computed(() => {
|
||||
<div class="flex">
|
||||
<Tooltip :hotkey="['ctrl', ',']">
|
||||
<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)]">
|
||||
<span class="i-mynaui-cog-four text-5"></span>
|
||||
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-6 md:text-5"></span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@@ -164,8 +174,17 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
<!-- resize handle -->
|
||||
<div @mousedown="onResizeStart" class="absolute top-0 right-0 bottom-0 p-1 cursor-ew-resize">
|
||||
<!-- resize handle - hidden on mobile -->
|
||||
<div @mousedown="onResizeStart" class="md:flex hidden absolute top-0 left-full bottom-0 p-1 cursor-ew-resize">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (max-width: 767px) {
|
||||
.mobile-full-width {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user