Joakim Mörling
00327674ed
- Add design tokens (colors, spacing, radius, shadows, typography, transitions) - Add global reset, body/link/focus/typography base styles - Add utility classes (container, surface-card, btn variants, field, badge, message, divider) - Replace header ✉ symbol with inline SVG envelope icon - Update favicon to license-plate shaped mark with blue gradient and bold B - Rename brand from BilHälsning to Bilhej in header, footer, and HTML title - Rewrite footer tagline: focus on service, not privacy - Add theme-color meta tag for browser chrome
170 lines
3.9 KiB
Vue
170 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink, useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/authStore'
|
|
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
|
|
function handleLogout() {
|
|
auth.logout()
|
|
router.push('/')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-header">
|
|
<div class="app-header__inner">
|
|
<RouterLink to="/" class="app-header__logo">
|
|
<svg
|
|
class="app-header__logo-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<rect
|
|
x="2"
|
|
y="5"
|
|
width="20"
|
|
height="14"
|
|
rx="2"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
/>
|
|
<path
|
|
d="M2 7l10 6 10-6"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
Bilhej
|
|
</RouterLink>
|
|
<nav class="app-header__nav">
|
|
<RouterLink to="/" class="app-header__link">Hem</RouterLink>
|
|
<template v-if="!auth.isAuthenticated">
|
|
<RouterLink to="/logga-in" class="app-header__link"
|
|
>Logga in</RouterLink
|
|
>
|
|
<RouterLink to="/registrera" class="app-header__link"
|
|
>Registrera</RouterLink
|
|
>
|
|
</template>
|
|
<template v-else>
|
|
<RouterLink
|
|
v-if="auth.isAdmin"
|
|
to="/admin"
|
|
class="app-header__link app-header__link--admin"
|
|
>Admin</RouterLink
|
|
>
|
|
<RouterLink to="/orders" class="app-header__link"
|
|
>Mina beställningar</RouterLink
|
|
>
|
|
<span class="app-header__email">{{ auth.email }}</span>
|
|
<button class="app-header__logout" @click="handleLogout">
|
|
Logga ut
|
|
</button>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: rgba(253, 250, 245, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.app-header__inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 0.875rem var(--space-lg);
|
|
}
|
|
|
|
.app-header__logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app-header__logo-icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.app-header__nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.app-header__link {
|
|
padding: 0.4rem 0.875rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-full);
|
|
transition:
|
|
color var(--transition-fast),
|
|
background var(--transition-fast);
|
|
}
|
|
|
|
.app-header__link:hover,
|
|
.app-header__link.router-link-active {
|
|
color: var(--color-primary-dark);
|
|
background: var(--color-primary-soft);
|
|
}
|
|
|
|
.app-header__link--admin {
|
|
background: var(--color-primary-soft);
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.app-header__link--admin:hover {
|
|
background: #e9d5ff;
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
.app-header__email {
|
|
color: var(--color-muted);
|
|
font-size: 0.8125rem;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.app-header__logout {
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-muted);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 0.35rem 0.875rem;
|
|
border-radius: var(--radius-full);
|
|
transition:
|
|
color var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
background var(--transition-fast);
|
|
}
|
|
|
|
.app-header__logout:hover {
|
|
color: var(--color-danger);
|
|
border-color: var(--color-danger);
|
|
background: var(--color-danger-soft);
|
|
}
|
|
</style>
|