bring back menu drawer, optional
This commit is contained in:
madrilene
parent
46f445aa25
commit
3ee8502953
5 changed files with 124 additions and 65 deletions
|
|
@ -57,8 +57,9 @@ module.exports = {
|
|||
ariaTop: 'Main',
|
||||
ariaBottom: 'Complementary',
|
||||
ariaPlatforms: 'Platforms',
|
||||
closedText: 'Menu',
|
||||
drawerMenu: true
|
||||
// activate alternative mobile menu with drawer
|
||||
drawerMenu: true,
|
||||
navLabel: 'Menu'
|
||||
},
|
||||
themeSwitch: {
|
||||
title: 'Theme',
|
||||
|
|
|
|||
|
|
@ -4,13 +4,21 @@
|
|||
|
||||
<template id="burger-template">
|
||||
<button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
|
||||
<span>Menu</span>
|
||||
<svg width="24" height="24" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<span>{{ meta.navigation.navLabel }}</span>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="M12 5v14" />
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,15 @@
|
|||
<nav id="mainnav" class="site-nav" aria-label="{{ meta.navigation.ariaTop }}">
|
||||
<!-- check for drawer menu being activated in meta.js -->
|
||||
{% set drawerMenu = meta.navigation.drawerMenu %}
|
||||
|
||||
{% if drawerMenu %}
|
||||
{% set drawerClass = "site-nav-drawer" %}
|
||||
{% endif %}
|
||||
|
||||
<nav
|
||||
id="mainnav"
|
||||
class=" {{ drawerClass or 'site-nav' }}"
|
||||
aria-label="{{ meta.navigation.ariaTop }}"
|
||||
>
|
||||
<ul class="cluster" role="list">
|
||||
{% for item in navigation.top %}
|
||||
<li>
|
||||
|
|
@ -18,6 +29,6 @@
|
|||
</ul>
|
||||
</nav>
|
||||
|
||||
{% if meta.navigation.drawerMenu %}
|
||||
{% if drawerMenu %}
|
||||
{% include "components/burger-template.njk" %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -64,10 +64,11 @@
|
|||
|
||||
<!-- defered js -->
|
||||
|
||||
<!-- masonry fallback, if true in frontmatter -->
|
||||
{% if masonry %}
|
||||
<!-- masonry fallback, if true in frontmatter -->
|
||||
<script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
|
||||
{% endif %}
|
||||
|
||||
{% if youtube %}
|
||||
<!-- youtube, if true in frontmatter -->
|
||||
<script
|
||||
|
|
@ -76,6 +77,11 @@
|
|||
></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- menu drawer js, if true in meta -->
|
||||
{% if meta.navigation.drawerMenu %}
|
||||
<script src="/assets/scripts/nav-drawer.js?{{ assetHash }}" defer></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- easteregg js, if true in meta -->
|
||||
{% if meta.easteregg %}
|
||||
<script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,79 @@
|
|||
@media (min-width: 38em) {
|
||||
nav.navbar {
|
||||
--nav-button-display: none;
|
||||
--nav-position: static;
|
||||
}
|
||||
|
||||
nav.navbar ul {
|
||||
--nav-list-background: transparent;
|
||||
--nav-list-layout: row;
|
||||
--nav-list-position: static;
|
||||
--nav-list-padding: 0;
|
||||
--nav-list-height: auto;
|
||||
--nav-list-width: 100%;
|
||||
--nav-list-shadow: none;
|
||||
--nav-list-transform: none;
|
||||
--nav-list-visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* set on parent div to get the right z-index context */
|
||||
.ontop {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
.site-nav-drawer {
|
||||
position: var(--nav-position, absolute);
|
||||
/* inset-block-start: 0.5rem; */
|
||||
inset-inline-end: 0.1rem;
|
||||
}
|
||||
|
||||
/* Remove default list styling and create layout for list */
|
||||
nav.navbar ul {
|
||||
background: var(--nav-list-background, var(--color-light));
|
||||
box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
|
||||
display: flex;
|
||||
flex-direction: var(--nav-list-layout, column);
|
||||
gap: var(--space-s);
|
||||
block-size: var(--nav-list-height, 100vh);
|
||||
.site-nav-drawer ul {
|
||||
--cluster-vertical-alignment: normal;
|
||||
--gutter: var(--space-xs);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: var(--nav-list-padding, var(--space-l) var(--space-s));
|
||||
line-height: 0.5em;
|
||||
padding: var(--nav-list-padding, var(--space-2xl) var(--space-s));
|
||||
background: var(--nav-list-background, var(--color-bg));
|
||||
box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
|
||||
flex-direction: var(--nav-list-layout, column);
|
||||
block-size: var(--nav-list-height, 100vh);
|
||||
position: var(--nav-list-position, fixed);
|
||||
inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
|
||||
inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inline-size: var(--nav-list-width, min(22rem, 100vw));
|
||||
visibility: var(--nav-list-visibility, visible);
|
||||
}
|
||||
|
||||
nav.navbar [aria-expanded='false'] + ul {
|
||||
.site-nav-drawer [aria-expanded='false'] + ul {
|
||||
transform: var(--nav-list-transform, translateX(100%));
|
||||
visibility: var(--nav-list-visibility, hidden);
|
||||
}
|
||||
|
||||
/* animates ul only when opening to avoid flash on page load, svg always */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
nav.navbar [aria-expanded='true'] + ul,
|
||||
nav.navbar svg {
|
||||
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
||||
.site-nav-drawer [aria-expanded='true'] + ul,
|
||||
.site-nav-drawer svg {
|
||||
transition:
|
||||
transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
||||
visibility 0.05s linear;
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic link styling */
|
||||
nav.navbar a {
|
||||
--text-color: var(--color-dark);
|
||||
.site-nav-drawer a {
|
||||
--text-color: var(--color-text);
|
||||
--background-color: var(--color-bg);
|
||||
--border-color: transparent;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
padding: 0.1rem;
|
||||
padding: var(--anchor-padding, var(--space-s));
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--border-color, transparent);
|
||||
text-decoration-thickness: 3px;
|
||||
text-underline-offset: 0.3em;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Change the border-color on :hover and :focus */
|
||||
nav.navbar a:where(:hover, :focus) {
|
||||
--border-color: var(--text-color);
|
||||
.site-nav-drawer a:where(:hover, :focus) {
|
||||
--background-color: var(--color-bg-accent);
|
||||
--text-color: var(--color-text-accent);
|
||||
--border-color: var(--color-bg-accent);
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page */
|
||||
nav.navbar [aria-current='page'] {
|
||||
--border-color: var(--color-primary);
|
||||
--text-color: var(--color-primary);
|
||||
.site-nav-drawer [aria-current='page'],
|
||||
.site-nav-drawer [data-state='active'] {
|
||||
--background-color: var(--color-bg-accent);
|
||||
--text-color: var(--color-text);
|
||||
--border-color: var(--color-bg-accent);
|
||||
}
|
||||
|
||||
/* Reset button styling */
|
||||
nav.navbar button {
|
||||
.site-nav-drawer button {
|
||||
all: unset;
|
||||
display: var(--nav-button-display, flex);
|
||||
align-items: center;
|
||||
|
|
@ -97,21 +84,67 @@ nav.navbar button {
|
|||
padding: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
nav.navbar span {
|
||||
.site-nav-drawer span {
|
||||
font-size: var(--size-step-min-1);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
padding-inline-end: var(--space-2xs);
|
||||
}
|
||||
|
||||
nav.navbar svg {
|
||||
.site-nav-drawer svg {
|
||||
block-size: 100%;
|
||||
inline-size: auto;
|
||||
}
|
||||
header svg {
|
||||
transform: translateY(-0.1em);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav.navbar [aria-expanded='true'] svg {
|
||||
.site-nav-drawer [aria-expanded='true'] svg {
|
||||
transform: var(--nav-list-rotate, rotate(45deg));
|
||||
}
|
||||
|
||||
@media screen(sm) {
|
||||
.site-nav-drawer {
|
||||
--nav-button-display: none;
|
||||
--nav-position: static;
|
||||
}
|
||||
|
||||
.site-nav-drawer ul {
|
||||
--nav-list-background: transparent;
|
||||
--nav-list-layout: row;
|
||||
--nav-list-position: static;
|
||||
--nav-list-padding: 0;
|
||||
--nav-list-height: auto;
|
||||
--nav-list-width: 100%;
|
||||
--nav-list-shadow: none;
|
||||
--nav-list-transform: none;
|
||||
--nav-list-visibility: visible;
|
||||
}
|
||||
|
||||
.site-nav-drawer a {
|
||||
--anchor-padding: var(--space-xs) 0.2em;
|
||||
--text-color: var(--color-text);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: transparent;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--text-decoration, transparent);
|
||||
text-decoration-thickness: 3px;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.site-nav-drawer a:where(:hover, :focus) {
|
||||
--text-color: var(--color-text);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: var(--color-text-accent);
|
||||
}
|
||||
|
||||
/* Change border-color and color for the active page */
|
||||
.site-nav-drawer [aria-current='page'],
|
||||
.site-nav-drawer [data-state='active'] {
|
||||
--text-color: var(--color-primary);
|
||||
--background-color: transparent;
|
||||
--border-color: transparent;
|
||||
--text-decoration: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue