From 9f0ebde3a54ecf35c11eebc1e005fbdb0f532897 Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Mon, 30 Oct 2023 17:07:44 -0500 Subject: [PATCH 1/6] styles put back --- src/css/nav.css | 38 ++++++++++++++++++-------------------- src/partials/nav-tree.hbs | 6 +++--- 2 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index b08dc0ca..8b8a81a7 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -88,6 +88,10 @@ html.is-clipped--nav { } .nav-list { + transition: max-height 0.25s ease, opacity 0.25s ease, visibility 0s ease 0.25s; + max-height: 200vh; + opacity: 1; + visibility: visible; display: flex; flex-direction: column; list-style: none; @@ -108,12 +112,12 @@ html.is-clipped--nav { padding: var(--ds-space-1) var(--site-padding); } -@media screen and (max-width: 1023.5px) { +/* @media screen and (max-width: 1023.5px) { .nav-link, .nav-text { padding: var(--ds-space-1) var(--site-padding--mobile); } -} +} */ .nav-link { transition: var(--ds-transition); @@ -183,28 +187,22 @@ html.is-clipped--nav { content: "\e89e"; } -/*** nav-item toggle styles, keeping for now as we might implement again when more content is added ***/ - -/* .nav-item:not(.is-active) > .nav-list { - display: none; -} */ +.nav-item:not(.is-active) > .nav-list { + max-height: 0; + opacity: 0; + visibility: hidden; +} -/* .nav-item-toggle { - background: transparent url(../img/caret.svg) no-repeat center / 50%; - border: none; - outline: none; - line-height: inherit; - padding: 0; +.nav-item-toggle { position: absolute; - height: calc(var(--nav-line-height) * 1em); - width: calc(var(--nav-line-height) * 1em); - margin-top: -0.05em; - margin-left: calc(var(--nav-line-height) * -1em); -} */ + margin-top: 0.75em; + margin-left: 0.5em; + color: var(--ds-text-tertiary); +} -/* .nav-item.is-active > .nav-item-toggle { +.nav-item.is-active > .nav-item-toggle { transform: rotate(90deg); -} */ +} /*** nav-panel-explore styles, keeping for now as we might implement it elsewhere ***/ diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index 7095eb4e..84f85959 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -3,9 +3,9 @@ {{#each navigation}}
  • {{#if ./content}} - {{!-- {{#if ./items.length}} --}} - {{!-- --}} - {{!-- {{/if}} --}} + {{#if ./items.length}} + + {{/if}} {{#if ./url}} .nav-list { - max-height: 0; - opacity: 0; - visibility: hidden; -} - .nav-item-toggle { position: absolute; margin-top: 0.75em; diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 28c3fee2..fc325c69 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -106,6 +106,10 @@ } function toggleActive () { + if (!this.classList.contains('is-active')) { + var siblings = Array.from(this.parentElement.children).filter((li) => li !== this) + if (siblings) siblings.forEach((li) => li.classList.remove('is-active')) + } if (this.classList.toggle('is-active')) { var padding = parseFloat(window.getComputedStyle(this).marginTop) var rect = this.getBoundingClientRect() From 677d27ffb0548946a95f62aeb92c176c147f610e Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Wed, 1 Nov 2023 12:28:28 -0500 Subject: [PATCH 3/6] improved timing function --- src/css/nav.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index 9bdef985..c11e4dcc 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -7,6 +7,8 @@ width: 100%; z-index: var(--z-index-nav); visibility: hidden; + + --transition-duration: 300ms; } @media screen and (min-width: 769px) { @@ -96,16 +98,16 @@ html.is-clipped--nav { } .nav-item > .nav-list { - transition-duration: 0.25s; + transition-duration: var(--transition-duration); transition-delay: 0s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease, linear; + transition-timing-function: cubic-bezier(0, 1, 0, 1), ease, linear; transition-property: max-height, opacity, visibility; max-height: 100vh; opacity: 1; } .nav-item:not(.is-active) > .nav-list { - transition-delay: 0s, 0s, 0.25s; + transition-delay: 0s, 0s, var(--transition-duration); max-height: 0; opacity: 0; visibility: hidden; From c0625a0313c173fe09d88b60a9264fb19fa0f9c9 Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Wed, 1 Nov 2023 13:28:30 -0500 Subject: [PATCH 4/6] add overflow hidden --- src/css/nav.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/css/nav.css b/src/css/nav.css index c11e4dcc..46f33246 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -111,6 +111,7 @@ html.is-clipped--nav { max-height: 0; opacity: 0; visibility: hidden; + overflow: hidden; } .nav-item { From 7d44ed41c85042f968100ebe60883115f0c6f455 Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Wed, 1 Nov 2023 15:50:50 -0500 Subject: [PATCH 5/6] remove auto collapsing --- src/js/01-nav.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/js/01-nav.js b/src/js/01-nav.js index fc325c69..28c3fee2 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -106,10 +106,6 @@ } function toggleActive () { - if (!this.classList.contains('is-active')) { - var siblings = Array.from(this.parentElement.children).filter((li) => li !== this) - if (siblings) siblings.forEach((li) => li.classList.remove('is-active')) - } if (this.classList.toggle('is-active')) { var padding = parseFloat(window.getComputedStyle(this).marginTop) var rect = this.getBoundingClientRect() From dd994541aaaaa5cf5787927f3acf2d3a464c57ed Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Mon, 6 Nov 2023 13:21:24 -0600 Subject: [PATCH 6/6] make secondary nav sticky --- src/css/nav.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/css/nav.css b/src/css/nav.css index 46f33246..ec80e7ae 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -185,6 +185,9 @@ html.is-clipped--nav { margin: 0; padding: var(--ds-space-2) 0; margin-top: auto; + position: sticky; + background: var(--ds-background-body); + bottom: 0; } .secondary-nav-list .nav-item {