Add (mobile) header (#38)

* Add button reset styles to globals

* Upgrade SDK

* Add dark logo

* Fetch menu data in header

* Remove reset file

* order

* Add togglable sections

* Improvise a mobile nav

* Finish first take on mobile nav

* Fix type issues

* Banner before header please

* wip

* Add some space

assets/css/global.css

@@ -22,8 +22,8 @@ svg {
 }
 
 input,
-button,
 textarea,
+button,
 select {
 	font: inherit;
 }
@@ -41,3 +41,12 @@ h6 {
 a {
 	color: var(--primary);
 }
+
+button {
+	all: unset;
+	line-height: 0;
+}
+
+button:focus {
+	outline: revert;
+}

components/Block/MediaFullWidth.vue

@@ -14,8 +14,11 @@ const { data: block } = useAsyncData(props.uuid, () =>
 );
 
 const imgSrc = computed(() => {
-	if (unref(block)?.type !== 'image') return null;
-	return getFileUrl(unref(block)!.image.id);
+	const type = unref(block)?.type;
+	const imageId = unref(block)?.image?.id;
+	if (type !== 'image' || !imageId) return null;
+
+	return getFileUrl(imageId);
 });
 </script>
 

components/Block/Showcase.vue

@@ -40,7 +40,10 @@ const handleClick = (itemIdx: number) => {
 
 const startTimer = () => {
 	timer = setInterval(() => {
-		selectedIdx.value = (selectedIdx.value + 1) % (unref(block)?.items.length ?? 0);
+		const items = unref(block)?.items;
+		if (!items) return;
+
+		selectedIdx.value = (selectedIdx.value + 1) % items.length;
 	}, timerLength);
 };
 

components/Comp/Media.vue

@@ -20,12 +20,12 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 	)
 );
 
-const imageUrl = computed(() => getFileUrl(unref(comp)?.image.id));
+const imageUrl = computed(() => getFileUrl(unref(comp)?.image?.id));
 </script>
 
 <template>
 	<BaseFrame variant="frosted" color="white">
-		<BaseVideo v-if="comp?.type === 'video' && comp.video.url" :url="comp.video.url" />
+		<BaseVideo v-if="comp?.type === 'video' && comp.video?.url" :url="comp.video.url" />
 		<img v-else-if="comp?.type === 'image' && comp.image" :src="imageUrl" :alt="comp.image.description ?? undefined" />
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else-if="comp?.type === 'embed'" v-html="comp.embed" />

components/Nav/Banner.vue

@@ -27,17 +27,15 @@ const dismiss = (id: string) => {
 </script>
 
 <template>
-	<ClientOnly>
-		<BaseContainer v-if="banner && bannerVisible" class="banner-container">
-			<NuxtLink class="banner" :href="banner.link ?? undefined">
-				<BaseIcon v-if="banner.icon" :name="banner.icon" size="small" />
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<span class="content" v-html="banner.content" />
-				<BaseIcon class="arrow" name="arrow_forward" size="small" />
-				<button class="dismiss" @click="dismiss(banner.id)"><BaseIcon name="close" size="small" /></button>
-			</NuxtLink>
-		</BaseContainer>
-	</ClientOnly>
+	<BaseContainer v-if="banner && bannerVisible" class="banner-container">
+		<NuxtLink class="banner" :href="banner.link ?? undefined">
+			<BaseIcon v-if="banner.icon" :name="banner.icon" size="small" />
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<span class="content" v-html="banner.content" />
+			<BaseIcon class="arrow" name="arrow_forward" size="small" />
+			<button class="dismiss" @click="dismiss(banner.id)"><BaseIcon name="close" size="small" /></button>
+		</NuxtLink>
+	</BaseContainer>
 </template>
 
 <style scoped lang="scss">
@@ -66,15 +64,6 @@ const dismiss = (id: string) => {
 		text-decoration: underline;
 	}
 
-	button {
-		all: unset;
-		line-height: 0;
-
-		&:focus {
-			outline: revert;
-		}
-	}
-
 	.base-icon {
 		--base-icon-color: var(--white);
 	}