1<script setup lang="ts">
2import { RouterLink, RouterView } from "vue-router";
3import HelloWorld from "./components/HelloWorld.vue";
4</script>
5
6<template>
7 <header>
8 <img
9 alt="Vue logo"
10 class="logo"
11 src="@/assets/logo.svg"
12 width="125"
13 height="125"
14 />
15
16 <div class="wrapper">
17 <HelloWorld msg="You did it!" />
18
19 <nav>
20 <RouterLink to="/">Home</RouterLink>
21 <RouterLink to="/about">About</RouterLink>
22 </nav>
23 </div>
24 </header>
25
26 <RouterView />
27</template>
28
29<style scoped>
30header {
31 line-height: 1.5;
32 max-height: 100vh;
33}
34
35.logo {
36 display: block;
37 margin: 0 auto 2rem;
38}
39
40nav {
41 width: 100%;
42 font-size: 12px;
43 text-align: center;
44 margin-top: 2rem;
45}
46
47nav a.router-link-exact-active {
48 color: var(--color-text);
49}
50
51nav a.router-link-exact-active:hover {
52 background-color: transparent;
53}
54
55nav a {
56 display: inline-block;
57 padding: 0 1rem;
58 border-left: 1px solid var(--color-border);
59}
60
61nav a:first-of-type {
62 border: 0;
63}
64
65@media (min-width: 1024px) {
66 header {
67 display: flex;
68 place-items: center;
69 padding-right: calc(var(--section-gap) / 2);
70 }
71
72 .logo {
73 margin: 0 2rem 0 0;
74 }
75
76 header .wrapper {
77 display: flex;
78 place-items: flex-start;
79 flex-wrap: wrap;
80 }
81
82 nav {
83 text-align: left;
84 margin-left: -1rem;
85 font-size: 1rem;
86
87 padding: 1rem 0;
88 margin-top: 1rem;
89 }
90}
91</style>