frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Private Image</title>
     </head>

frontend/src/App.vue

@@ -1,3 +1,6 @@
 <template>
+    <div class="flex min-h-screen flex-col bg-background">
+        <AppHeader />
         <router-view />
+    </div>
 </template>

frontend/src/components/layout/AppHeader.vue

@@ -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>

frontend/src/consts/routeNames.ts

@@ -1,5 +1,6 @@
 export const ROUTE_NAMES = {
     Upload: 'Upload',
+    About: 'About',
     Viewer: 'Viewer',
     HotlinkViewer: 'HotlinkViewer',
     Delete: 'Delete'

frontend/src/views/UploadView.vue

@@ -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">