VueJS Navbar
I know space-between would work, but I only want the links spaced sliiiighltly apart, like 20px or so..?
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<header>
<h1>Gym Tracker</h1>
<div class="wrapper">
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/nutrition">Nutrition</RouterLink>
<RouterLink to="/workouts">Workouts</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
<style scoped>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
h1 {
text-align: center;
font-size: 5rem;
}
</style><script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<header>
<h1>Gym Tracker</h1>
<div class="wrapper">
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/nutrition">Nutrition</RouterLink>
<RouterLink to="/workouts">Workouts</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
<style scoped>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
h1 {
text-align: center;
font-size: 5rem;
}
</style>
