nobswebdev
bb08bb389f
Improve narrow-viewport layout for upload, About, and shell overflow; keep modal scroll without extra dismiss or a11y markup changes.
48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<template>
|
|
<header class="border-b border-border bg-card">
|
|
<div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-2 px-3 sm:gap-4 sm:px-6">
|
|
<RouterLink
|
|
:to="{ name: ROUTE_NAMES.Upload }"
|
|
class="min-w-0 shrink transition-opacity hover:opacity-80"
|
|
>
|
|
<img
|
|
src="/logo.png"
|
|
alt="Private Image"
|
|
class="h-7 w-auto max-w-[min(100%,12rem)] sm:h-8 md:h-9"
|
|
width="1024"
|
|
height="228"
|
|
decoding="async"
|
|
/>
|
|
</RouterLink>
|
|
|
|
<nav class="flex items-center gap-1 sm:gap-2">
|
|
<RouterLink
|
|
v-for="item in navItems"
|
|
:key="item.name"
|
|
:to="{ name: item.name }"
|
|
class="rounded-md px-3 py-2 text-sm transition-colors"
|
|
:class="
|
|
route.name === item.name
|
|
? 'bg-muted font-medium text-foreground'
|
|
: 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
|
|
"
|
|
>
|
|
{{ item.label }}
|
|
</RouterLink>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRoute } from 'vue-router';
|
|
import { ROUTE_NAMES } from '@/consts/routeNames';
|
|
|
|
const route = useRoute();
|
|
|
|
const navItems = [
|
|
{ name: ROUTE_NAMES.Upload, label: 'Upload' },
|
|
{ name: ROUTE_NAMES.About, label: 'About' }
|
|
];
|
|
</script>
|