Skip to content

Commit

Permalink
Header goodness
Browse files Browse the repository at this point in the history
  • Loading branch information
@rijkvanzanten
rijkvanzanten committed Aug 4, 2023
1 parent 857cdfb commit 5688615
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 49 deletions.
20 changes: 10 additions & 10 deletions assets/css/vars.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@
--warning: var(--orange-500);
--success: var(--green-500);

--gray-50: #f9fafb;
--gray-100: #F0F4F9;
--gray-200: #e2e7ee;
--gray-300: #d2d6dc;
--gray-400: #a2b5cd; /* Correct */
--gray-500: #888d96;
--gray-600: #4b5563;
--gray-700: #2e3848;
--gray-800: #0e1c2f;
--gray-900: #161e2e;
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8; /* Correct */
--gray-500: #64748B;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1E293B;
--gray-900: #0F172A;

--purple-50: #f0eeff;
--purple-100: #d0c0fd;
Expand Down
102 changes: 63 additions & 39 deletions components/Nav/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,28 +105,32 @@ onClickOutside(headerContainer, resetNavState);
<BaseIcon class="icon" name="expand_more" size="small" />
</button>
<div class="submenu" :class="{ active: navActiveSection === section.id }">
<div class="subsection links">
<div v-if="section.children_title" class="subsection-title">{{ section.children_title }}</div>
<ul v-if="section.children && section.children.length > 0">
<li v-for="link in section.children" :key="link.id">
<NuxtLink :href="link.url ?? undefined" :to="(link.page as any)?.permalink" class="link">
<BaseDirectusImage if="link.image" :uuid="(link.image as string)" alt="" class="icon" lazy />
<div class="content">
<div class="title">{{ link.title }}</div>
<div v-if="link.description" class="description">{{ link.description }}</div>
</div>
</NuxtLink>
</li>
</ul>
<Transition name="submenu">
<div v-show="navActiveSection === section.id" class="submenu">
<div class="grid">
<div class="subsection links">
<div v-if="section.children_title" class="subsection-title">{{ section.children_title }}</div>
<ul v-if="section.children && section.children.length > 0">
<li v-for="link in section.children" :key="link.id">
<NuxtLink :href="link.url ?? undefined" :to="(link.page as any)?.permalink" class="link">
<BaseDirectusImage if="link.image" :uuid="(link.image as string)" alt="" class="icon" lazy />
<div class="content">
<div class="title">{{ link.title }}</div>
<div v-if="link.description" class="description">{{ link.description }}</div>
</div>
</NuxtLink>
</li>
</ul>
</div>
<div class="subsection callout">
<div v-if="section.callout_title" class="subsection-title">{{ section.callout_title }}</div>
<!-- @TODO remove 'as string'-->
<BlockCard v-if="section.callout" :uuid="(section.callout as string)" />
</div>
</div>
</div>
<div class="subsection callout">
<div v-if="section.callout_title" class="subsection-title">{{ section.callout_title }}</div>
<!-- @TODO remove 'as string'-->
<BlockCard v-if="section.callout" :uuid="(section.callout as string)" />
</div>
</div>
</Transition>
</li>
</ul>
</nav>
Expand Down Expand Up @@ -159,7 +163,6 @@ a {
}
.base-container.header-container {
--box-shadow: inset 0 -1px 0 0 color-mix(in srgb, transparent, var(--gray-400) 20%);
--background-color: color-mix(in srgb, transparent, var(--white) 90%);
--backdrop-filter: saturate(180%) blur(5px);
Expand All @@ -171,16 +174,17 @@ a {
width: 100%;
backdrop-filter: var(--backdrop-filter);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
border-block-end: 1px solid var(--gray-200);
transition: background-color var(--duration-200) var(--ease-in);
&.no-blur {
background-color: var(--white);
transition: background-color var(--duration-200) var(--ease-out);
}
@media (width > 80rem) {
backdrop-filter: unset;
background-color: unset;
box-shadow: unset;
&::after {
content: '';
Expand All @@ -192,14 +196,15 @@ a {
z-index: -1;
backdrop-filter: var(--backdrop-filter);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
transition: background-color var(--duration-150) var(--ease-in);
}
&.no-blur {
background-color: unset;
&::after {
background-color: var(--white);
transition: background-color var(--duration-150) var(--ease-out);
}
}
}
Expand Down Expand Up @@ -247,11 +252,10 @@ a {
}
.submenu {
display: none;
margin-block-end: var(--space-3);
&.active {
display: block;
.grid {
display: contents;
}
.links {
Expand All @@ -276,7 +280,7 @@ a {
inset-inline: calc(-1 * var(--inline-padding) / 2);
inset-block: calc(-1 * var(--block-padding) / 2);
border-radius: var(--rounded-lg);
background-color: var(--gray-50);
background-color: var(--gray-100);
position: absolute;
z-index: -1;
opacity: 0;
Expand Down Expand Up @@ -381,11 +385,10 @@ a {
@media (width > 35rem) {
.submenu {
grid-template-columns: 2fr 1fr;
gap: var(--space-4);
&.active {
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-4);
}
.subsection {
Expand Down Expand Up @@ -512,19 +515,20 @@ a {
.submenu {
position: absolute;
inset-block-start: 100%;
inset-block-start: calc(100% + var(--space-4));
inset-inline-start: 50%;
translate: -50% 0;
border-radius: var(--rounded-md);
border-start-start-radius: 0;
border-start-end-radius: 0;
border-radius: var(--rounded-xl);
border: 1px solid var(--gray-200);
border-top: 0;
padding: var(--space-6) var(--space-8);
width: 82.5rem;
box-shadow: var(--shadow-base);
gap: var(--space-20);
background-color: var(--white);
rotate: 0deg;
.grid {
gap: var(--space-10);
}
.subsection.links ul {
gap: var(--space-5) var(--space-20);
Expand All @@ -534,5 +538,25 @@ a {
display: grid;
}
}
.submenu-enter-active,
.submenu-leave-active {
transition: var(--duration-150);
transition-property: opacity, translate;
}
.submenu-enter-from {
transition-timing-function: var(--ease-out);
}
.submenu-leave-to {
transition-timing-function: var(--ease-in);
}
.submenu-enter-from,
.submenu-leave-to {
opacity: 0;
translate: -50% calc(-1 * var(--space-2));
}
}
</style>

0 comments on commit 5688615

Please sign in to comment.