danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/dwaring87-webdev-wedding. Marissa & David's Wedding Website!
1.6 kB
48 lines
1<script setup>
2 import RiRiding from '~icons/ri/riding-line';
3 import RiMail from '~icons/ri/mail-check-fill';
4 import RiInfo from '~icons/ri/information-fill';
5
6 const route = useRoute();
7 const { rsvp_enabled } = useRuntimeConfig();
8 const { getDetails, getPages } = useCMS();
9
10 const couple = await getDetails('couple');
11 const pages = await getPages();
12</script>
13
14<template>
15 <div v-if="route.path !== '/'">
16 <nav class="bg-primary text-white shadow-md">
17 <div class="container">
18 <div class="h-14 flex justify-between items-center">
19 <div class="flex items-center">
20 <NuxtLink to="/"><RiRiding class="inline" /> {{ couple }}</NuxtLink>
21 </div>
22 <div class="flex-grow"></div>
23 <div class="flex gap-2 lg:gap-4">
24 <NuxtLink v-for="(page) in pages" :to="`/page/${page.slug}`"
25 class="hidden md:inline" :class="{active: route.path.includes(page.slug)}">
26 {{ page.title }}
27 </NuxtLink>
28 <NuxtLink to="/info" class="inline md:hidden">
29 <RiInfo class='inline' /> Info
30 </NuxtLink>
31 <NuxtLink v-if="rsvp_enabled && rsvp_enabled === 'true'" to="/rsvp">
32 <RiMail class='inline' /> RSVP
33 </NuxtLink>
34 </div>
35 </div>
36 </div>
37 </nav>
38 </div>
39</template>
40
41<style scoped>
42 a {
43 @apply font-semibold opacity-70 hover:opacity-100 px-1;
44 }
45 .active {
46 @apply border-b-2 border-gray-100 border-opacity-20 opacity-90 hover:opacity-100 !important;
47 }
48</style>