From 774dd3bb3526ee390deb76d4cb5e05d6ddf8cfce Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 4 Aug 2023 14:06:14 -0400
Subject: [PATCH] Positioning / color tweaks

---
 assets/css/vars.css             |  2 +-
 components/Nav/Header.vue       | 35 ++++++++++++++++++++++++++++-----
 types/schema/meta/navigation.ts |  4 +---
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/assets/css/vars.css b/assets/css/vars.css
index 6921f0a4..4d1f0061 100644
--- a/assets/css/vars.css
+++ b/assets/css/vars.css
@@ -19,7 +19,7 @@
 
 	--gray-50: #f9fafb;
 	--gray-100: #F0F4F9;
-	--gray-200: #e5e7eb;
+	--gray-200: #e2e7ee;
 	--gray-300: #d2d6dc;
 	--gray-400: #a2b5cd; /* Correct */
 	--gray-500: #888d96;
diff --git a/components/Nav/Header.vue b/components/Nav/Header.vue
index a40c1b42..6bee5ddd 100644
--- a/components/Nav/Header.vue
+++ b/components/Nav/Header.vue
@@ -156,11 +156,31 @@ a {
 	position: fixed;
 	top: 0;
 	z-index: 5;
-	background-color: rgba(255, 255, 255, 0.8);
-	backdrop-filter: blur(10px);
 	max-height: 100vh;
 	overflow: auto;
 	width: 100%;
+	backdrop-filter: saturate(180%) blur(5px);
+	background-color: color-mix(in srgb, transparent, var(--white) 80%);
+	box-shadow: inset 0 -1px 0 0 color-mix(in srgb, transparent, var(--gray-400) 20%);
+
+	@media (width > 80rem) {
+		backdrop-filter: unset;
+		background-color: unset;
+		box-shadow: unset;
+
+		&::after {
+			content: '';
+			inline-size: 100%;
+			block-size: 100%;
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			position: absolute;
+			z-index: -1;
+			backdrop-filter: saturate(180%) blur(5px);
+			background-color: color-mix(in srgb, transparent, var(--white) 80%);
+			box-shadow: inset 0 -1px 0 0 color-mix(in srgb, transparent, var(--gray-400) 20%);
+		}
+	}
 }
 
 .header {
@@ -378,13 +398,18 @@ a {
 
 	.submenu {
 		position: absolute;
-		inset-block-start: calc(100% + var(--space-4));
+		inset-block-start: 100%;
 		inset-inline-start: 50%;
 		translate: -50% 0;
-		background-color: var(--white);
+		background-color: color-mix(in srgb, transparent, var(--white) 80%);
+		backdrop-filter: saturate(180%) blur(4px);
 		border-radius: var(--rounded-md);
+		border-start-start-radius: 0;
+		border-start-end-radius: 0;
+		border: 1px solid var(--gray-200);
+		border-top: 0;
 		padding: var(--space-6) var(--space-8);
-		width: 67.5rem;
+		width: 82.5rem;
 		box-shadow: var(--shadow-base);
 		grid-template-columns: repeat(3, 1fr);
 		gap: var(--space-2) var(--space-4);
diff --git a/types/schema/meta/navigation.ts b/types/schema/meta/navigation.ts
index c8310c01..24c65fbc 100644
--- a/types/schema/meta/navigation.ts
+++ b/types/schema/meta/navigation.ts
@@ -21,10 +21,8 @@ export interface NavigationItem {
 	open_in_new_tab: boolean | null;
 	page: string | Page | null;
 	url: string | null;
-	parent: string | Navigation | null;
 	description: string | null;
 	image: string | File | null;
-	/** Add this item to far right and make it huge. **Use only 1 per submenu** */
-	callout: boolean | null;
 	children: NavigationItem[];
+	parent: string | Navigation | null;
 }