add top navigation with logo upload and about links.

Shared app header in the layout shell and upload main area flex fix for the new chrome.
This commit is contained in:
2026-10-29 18:14:15 +01:00
parent 80497177f8
commit eed17c9aab
7 changed files with 54 additions and 2 deletions
+4 -1
View File
@@ -1,3 +1,6 @@
<template>
<router-view />
<div class="flex min-h-screen flex-col bg-background">
<AppHeader />
<router-view />
</div>
</template>
@@ -0,0 +1,47 @@
<template>
<header class="border-b border-border bg-card">
<div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-4 px-4 sm:px-6">
<RouterLink
:to="{ name: ROUTE_NAMES.Upload }"
class="shrink-0 transition-opacity hover:opacity-80"
>
<img
src="/logo.png"
alt="Private Image"
class="h-8 w-auto sm: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>
+1
View File
@@ -1,5 +1,6 @@
export const ROUTE_NAMES = {
Upload: 'Upload',
About: 'About',
Viewer: 'Viewer',
HotlinkViewer: 'HotlinkViewer',
Delete: 'Delete'
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<main class="mx-auto flex min-h-screen max-w-3xl flex-col gap-6 p-8">
<main class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-8">
<div>
<h1 class="text-2xl font-semibold tracking-tight">Upload</h1>
<p class="mt-2 text-sm text-muted-foreground">