From f5c87df60eed5ddc5912b6fe4c659bd4e5178ac5 Mon Sep 17 00:00:00 2001 From: rijkvanzanten Date: Fri, 4 Aug 2023 14:44:56 -0400 Subject: [PATCH] Header submenu --- assets/svg/waves.svg | 1753 ++++++++++++------------------- components/Nav/Header.vue | 119 ++- types/schema/meta/navigation.ts | 4 + 3 files changed, 790 insertions(+), 1086 deletions(-) diff --git a/assets/svg/waves.svg b/assets/svg/waves.svg index ceef0b90..e0e77482 100644 --- a/assets/svg/waves.svg +++ b/assets/svg/waves.svg @@ -1,1236 +1,869 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/components/Nav/Header.vue b/components/Nav/Header.vue index 6bee5ddd..90778811 100644 --- a/components/Nav/Header.vue +++ b/components/Nav/Header.vue @@ -10,6 +10,9 @@ const { data: menu } = useAsyncData('header-nav', () => 'id', 'title', 'url', + 'callout', + 'callout_title', + 'children_title', { page: ['permalink'], children: ['id', 'title', 'url', 'description', 'image', { page: ['permalink'] }], @@ -102,21 +105,28 @@ onClickOutside(headerContainer, resetNavState); - +
+
+
{{ section.children_title }}
+
    +
  • + + +
    +
    {{ link.title }}
    +
    {{ link.description }}
    +
    +     +
    • +
+
+ +
+
{{ section.callout_title }}
+ + +
+
@@ -153,15 +163,19 @@ a { } .base-container.header-container { + --background-color: color-mix(in srgb, transparent, var(--white) 90%); + --box-shadow: inset 0 -1px 0 0 color-mix(in srgb, transparent, var(--gray-400) 20%); + --backdrop-filter: saturate(180%) blur(5px); + position: fixed; top: 0; z-index: 5; 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%); + backdrop-filter: var(--backdrop-filter); + background-color: var(--background-color); + box-shadow: var(--box-shadow); @media (width > 80rem) { backdrop-filter: unset; @@ -176,9 +190,9 @@ a { 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%); + backdrop-filter: var(--backdrop-filter); + background-color: var(--background-color); + box-shadow: var(--box-shadow); } } } @@ -232,8 +246,10 @@ a { display: block; } - li + li { - margin-block-start: var(--space-4); + .links { + li + li { + margin-block-start: var(--space-4); + } } .link { @@ -242,6 +258,25 @@ a { align-items: flex-start; } + .subsection { + &-title { + text-transform: uppercase; + color: var(--gray-400); + font-size: var(--font-size-xs); + line-height: var(--line-height-xs); + font-weight: 600; + padding-bottom: var(--space-2); + border-bottom: 1px solid color-mix(in srgb, transparent, var(--gray-400) 25%); + inline-size: 100%; + margin-block-end: var(--space-4); + text-align: center; + } + + & + .subsection { + margin-block-start: var(--space-8); + } + } + .icon { width: var(--space-8); } @@ -304,6 +339,27 @@ a { } } +@media (width > 35rem) { + .submenu { + grid-template-columns: 2fr 1fr; + gap: var(--space-4); + + &.active { + display: grid; + } + + .subsection { + &-title { + text-align: start; + } + + & + .subsection { + margin-block-start: 0; + } + } + } +} + @media (width > 50rem) { .logo { order: 1; @@ -335,6 +391,18 @@ a { .menu { order: 5; } + + .submenu { + .subsection.links ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); + + li + li { + margin: 0; + } + } + } } @media (width > 80rem) { @@ -401,8 +469,6 @@ a { inset-block-start: 100%; inset-inline-start: 50%; translate: -50% 0; - 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; @@ -411,8 +477,9 @@ a { padding: var(--space-6) var(--space-8); width: 82.5rem; box-shadow: var(--shadow-base); - grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-4); + backdrop-filter: var(--backdrop-filter); + background-color: var(--background-color); &.active { display: grid; diff --git a/types/schema/meta/navigation.ts b/types/schema/meta/navigation.ts index 24c65fbc..de6f3b12 100644 --- a/types/schema/meta/navigation.ts +++ b/types/schema/meta/navigation.ts @@ -1,3 +1,4 @@ +import { BlockCard } from '../blocks/block-card.js'; import type { Page } from '../content/index.js'; import type { File, User } from '../system/index.js'; @@ -24,5 +25,8 @@ export interface NavigationItem { description: string | null; image: string | File | null; children: NavigationItem[]; + children_title: string | null; parent: string | Navigation | null; + callout: string | BlockCard | null; + callout_title: string | null; }