Header pt2 (#41)

* Tweak type * Add CTAs
directus · Jul 28, 2023 · f21d2db · f21d2db
1 parent 3d1d060
commit f21d2db
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 17 deletions.
diff --git a/components/Base/Button.vue b/components/Base/Button.vue
@@ -179,7 +179,7 @@ const trailingIconName = computed(() => {
 			/>
 		</slot>
 		<slot>
-			<span v-if="label">
+			<span v-if="label" class="label">
 				{{ label }}
 			</span>
 		</slot>
@@ -206,6 +206,7 @@ const trailingIconName = computed(() => {
 	text-decoration: none;
 	border-radius: var(--rounded-full);
 	font-weight: 600;
+	justify-content: center;
 }
 
 .btn-base:disabled {
@@ -272,7 +273,8 @@ const trailingIconName = computed(() => {
 }
 
 .btn-small {
-	font-size: var(--text-md);
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
 	padding: var(--space-2) var(--space-4);
 	column-gap: var(--space-2);
 }
@@ -282,7 +284,8 @@ const trailingIconName = computed(() => {
 }
 
 .btn-medium {
-	font-size: var(--text-lg);
+	font-size: var(--font-size-base);
+	line-height: var(--line-height-base);
 	padding: var(--space-3) var(--space-6);
 	column-gap: var(--space-3);
 }
@@ -292,7 +295,8 @@ const trailingIconName = computed(() => {
 }
 
 .btn-large {
-	font-size: var(--text-2xl);
+	font-size: var(--font-size-lg);
+	line-height: var(--line-height-lg);
 	padding: var(--space-4) var(--space-8);
 	column-gap: var(--space-4);
 }

diff --git a/components/Base/ButtonGroup.vue b/components/Base/ButtonGroup.vue
@@ -1 +1,29 @@
-<template><slot /></template>
+<script setup lang="ts">
+interface BaseButtonGroupProps {
+	size?: 'small' | 'medium' | 'large';
+}
+
+withDefaults(defineProps<BaseButtonGroupProps>(), {
+	size: 'medium',
+});
+</script>
+
+<template>
+	<div class="button-group-container">
+		<div class="button-group" :class="{ size }">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.button-group {
+	display: flex;
+	gap: var(--space-3);
+	flex-wrap: wrap;
+
+	:deep(> *) {
+		flex-shrink: 0;
+	}
+}
+</style>
diff --git a/components/Base/Container.vue b/components/Base/Container.vue
@@ -20,7 +20,7 @@ withDefaults(defineProps<BaseContainerProps>(), {
 	grid-template-columns:
 		[full-start] minmax(var(--space-5), 1fr)
 		[standard-start] 0
-		[narrow-start] minmax(var(--space-4), 67.5rem)
+		[narrow-start] minmax(var(--space-4), 70rem)
 		[narrow-end] 0
 		[standard-end] minmax(var(--space-5), 1fr)
 		[full-end];
@@ -31,7 +31,7 @@ withDefaults(defineProps<BaseContainerProps>(), {
 		grid-template-columns:
 			[full-start] minmax(var(--space-8), 1fr)
 			[standard-start] var(--space-16)
-			[narrow-start] minmax(var(--space-4), 67.5rem)
+			[narrow-start] minmax(var(--space-4), 70rem)
 			[narrow-end] var(--space-16)
 			[standard-end] minmax(var(--space-8), 1fr)
 			[full-end];

diff --git a/components/Comp/ButtonGroup.vue b/components/Comp/ButtonGroup.vue
@@ -9,8 +9,9 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('comp_button_groups', props.uuid, {
 			fields: [
+				'size',
 				{
-					buttons: ['id', 'external_url', 'page', 'variant', 'label'],
+					buttons: ['id', 'external_url', 'page', 'variant', 'label', 'color', 'pulse', 'icon'],
 				},
 			],
 		})
@@ -19,12 +20,16 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 </script>
 
 <template>
-	<BaseButtonGroup v-if="comp">
+	<BaseButtonGroup v-if="comp" :size="comp.size">
 		<BaseButton
 			v-for="button in comp.buttons"
 			:key="button.id"
 			:href="button.external_url ?? button.page ?? undefined"
 			:variant="button.variant"
+			:color="button.color"
+			:pulse="button.pulse"
+			:icon="button.icon ?? undefined"
+			:size="comp.size"
 		>
 			{{ button.label }}
 		</BaseButton>

diff --git a/components/Nav/Header.vue b/components/Nav/Header.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { $directus, $readItem } = useNuxtApp();
+const { $directus, $readItem, $readSingleton } = useNuxtApp();
 
 const { data: menu } = useAsyncData('header-nav', () =>
 	$directus.request(
@@ -26,6 +26,14 @@ const { data: menu } = useAsyncData('header-nav', () =>
 	)
 );
 
+const { data: ctas } = useAsyncData('header-nav-ctas', () =>
+	$directus.request(
+		$readSingleton('globals', {
+			fields: ['header_cta_buttons'],
+		})
+	)
+);
+
 const headerContainer = ref();
 
 const navActive = ref(false);
@@ -112,6 +120,18 @@ onClickOutside(headerContainer, resetNavState);
 					</li>
 				</ul>
 			</nav>
+
+			<CompButtonGroup
+				v-if="ctas && ctas.header_cta_buttons"
+				class="ctas"
+				:class="{ active: navActive }"
+				:uuid="ctas.header_cta_buttons"
+			/>
+
+			<NuxtLink class="star" :class="{ active: navActive }" href="https://github.com/directus/directus">
+				<BaseIcon class="icon" name="star" size="small" />
+				<span class="label">Star us on GitHub</span>
+			</NuxtLink>
 		</header>
 	</BaseContainer>
 </template>
@@ -147,7 +167,7 @@ a {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	padding-block: var(--space-4);
+	padding-block: var(--space-3);
 }
 
 .logo {
@@ -165,9 +185,9 @@ a {
 .menu {
 	flex-basis: 100%;
 	display: none;
-	padding-block-start: var(--space-4);
 	font-size: var(--font-size-lg);
 	line-height: var(--line-height-lg);
+	margin-block-start: var(--space-4);
 
 	&.active {
 		display: block;
@@ -218,7 +238,81 @@ a {
 	}
 }
 
-@media (width > 75rem) {
+.ctas {
+	flex-basis: 100%;
+	display: none;
+	margin-inline: auto;
+	margin-block: var(--space-3);
+	justify-content: center;
+
+	&.active {
+		display: flex;
+	}
+}
+
+.star {
+	display: none;
+	color: var(--gray-500);
+	text-align: center;
+	width: 100%;
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+
+	.icon {
+		--base-icon-color: var(--gray-500);
+		margin-inline-end: var(--space-05);
+		vertical-align: -3px;
+	}
+
+	&.active {
+		display: block;
+	}
+
+	&:hover {
+		text-decoration: none;
+		color: var(--black);
+
+		.icon {
+			--base-icon-color: var(--black);
+		}
+
+		.label {
+			text-decoration: underline;
+		}
+	}
+}
+
+@media (width > 50rem) {
+	.logo {
+		order: 1;
+	}
+
+	.star {
+		order: 2;
+		margin-inline-start: auto;
+		width: auto;
+		display: block;
+	}
+
+	.ctas {
+		display: block;
+		order: 3;
+		margin-block: 0;
+		flex-basis: unset;
+		margin-inline: var(--space-6);
+	}
+
+	.menu-toggle {
+		order: 4;
+		margin-inline: 0;
+	}
+
+	.menu {
+		order: 5;
+	}
+}
+
+@media (width > 80rem) {
 	.base-container.header-container {
 		position: sticky;
 		top: 0;
@@ -229,17 +323,28 @@ a {
 		flex-wrap: nowrap;
 	}
 
+	.star {
+		margin-inline-end: var(--space-6);
+	}
+
+	.ctas {
+		order: 3;
+		margin-inline: 0;
+	}
+
 	.menu-toggle {
 		display: none;
 	}
 
 	.menu {
+		order: 2;
 		flex-basis: content;
 		display: block;
 		padding: 0;
 		font-size: var(--font-size-sm);
 		line-height: var(--line-height-sm);
-		margin-inline-start: var(--space-8);
+		margin-inline: auto var(--space-8);
+		margin-block: 0;
 
 		> ul {
 			display: flex;

diff --git a/plugins/directus.ts b/plugins/directus.ts
@@ -1,4 +1,4 @@
-import { createDirectus, readItem, readItems, rest, staticToken } from '@directus/sdk';
+import { createDirectus, readItem, readItems, rest, staticToken, readSingleton } from '@directus/sdk';
 import type { Schema } from '~/types/schema';
 
 export default defineNuxtPlugin(() => {
@@ -7,5 +7,5 @@ export default defineNuxtPlugin(() => {
 
 	const directus = createDirectus<Schema>(directusUrl).with(staticToken(directusToken)).with(rest());
 
-	return { provide: { directus, readItem, readItems } };
+	return { provide: { directus, readItem, readItems, readSingleton } };
 });
diff --git a/types/schema/components/component-button-group.ts b/types/schema/components/component-button-group.ts
@@ -2,5 +2,6 @@ import type { ComponentButton } from './component-button.js';
 
 export interface ComponentButtonGroup {
 	id: string;
+	size: 'small' | 'medium' | 'large';
 	buttons: string[] | ComponentButton[];
 }
diff --git a/types/schema/components/component-button.ts b/types/schema/components/component-button.ts
@@ -6,10 +6,13 @@ export interface ComponentButton {
 	id: string;
 	sort: number | null;
 	label: string | null;
+	color: 'primary' | 'secondary' | 'gray' | 'white' | 'danger';
+	pulse: boolean;
 	variant: 'solid' | 'frosted' | 'gradient';
 	button_group: string | ComponentButtonGroup | null;
 	page: string | Page | null;
 	type: string | null;
 	resource: string | Resource | null;
 	external_url: string | null;
+	icon: string | null;
 }
diff --git a/types/schema/meta/globals.ts b/types/schema/meta/globals.ts
@@ -15,5 +15,5 @@ export interface Globals {
 	social: string;
 	sales: string;
 	seo: string;
-	header_cta_buttons: ComponentButtonGroup;
+	header_cta_buttons: string | ComponentButtonGroup | null;
 }