You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.8 KiB
81 lines
1.8 KiB
<script setup lang="ts"> |
|
/** |
|
* AppHeader - Site header with logo and navigation |
|
* |
|
* AI CODING TOOL INSTRUCTIONS: |
|
* - "change the logo" -> update the logo image or text |
|
* - "add a nav link" -> add to the navigation links array |
|
* - "remove a nav link" -> remove from navigation links |
|
* - "change header color" -> modify the header background style |
|
*/ |
|
import { RouterLink } from "vue-router"; |
|
import { hero } from "@/content/site-data"; |
|
</script> |
|
|
|
<template> |
|
<header class="app-header"> |
|
<div class="header-container"> |
|
<RouterLink to="/" class="logo"> |
|
{{ hero.title.value }} |
|
</RouterLink> |
|
|
|
<nav class="main-nav"> |
|
<RouterLink to="/">Home</RouterLink> |
|
<RouterLink to="/about">About</RouterLink> |
|
</nav> |
|
</div> |
|
</header> |
|
</template> |
|
|
|
<style scoped> |
|
.app-header { |
|
background-color: var(--color-background-soft); |
|
border-bottom: 1px solid var(--color-border); |
|
padding: var(--space-md) var(--space-lg); |
|
position: sticky; |
|
top: 0; |
|
z-index: 100; |
|
} |
|
|
|
.header-container { |
|
max-width: var(--max-width); |
|
margin: 0 auto; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.logo { |
|
font-family: var(--font-heading); |
|
font-size: var(--font-size-xl); |
|
font-weight: 700; |
|
color: var(--color-primary-dark); |
|
text-decoration: none; |
|
} |
|
|
|
.logo:hover { |
|
color: var(--color-primary); |
|
} |
|
|
|
.main-nav { |
|
display: flex; |
|
gap: var(--space-lg); |
|
} |
|
|
|
.main-nav a { |
|
font-weight: 500; |
|
color: var(--color-text); |
|
padding: var(--space-xs) var(--space-sm); |
|
border-radius: var(--border-radius); |
|
transition: all var(--transition-fast); |
|
} |
|
|
|
.main-nav a:hover { |
|
color: var(--color-primary-dark); |
|
background-color: var(--color-primary-light); |
|
} |
|
|
|
.main-nav a.router-link-active { |
|
color: var(--color-primary-dark); |
|
} |
|
</style>
|
|
|