zoeissleeping
61c73f394d
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.
47 lines
2.1 KiB
Vue
47 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
name: string;
|
|
icon?: string;
|
|
to?: string;
|
|
active?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink v-if="props.to" v-bind="$attrs" :to="props.to" :aria-label="props.name" :class="[
|
|
'decoration-none text-[var(--text-secondary)] flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
|
props.icon ? 'px-1' : 'px-2',
|
|
props.active
|
|
? 'text-[var(--text-primary)] 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 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="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
|
}}</span>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
<button v-else v-bind="$attrs" :aria-label="props.name" :class="[
|
|
'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9',
|
|
props.icon ? 'px-1' : 'px-2',
|
|
props.active
|
|
? 'text-[var(--text-primary)] 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 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="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
|
}}</span>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template> |