diff --git a/src/assets/js/index.js b/src/assets/js/index.js index 92fbe89..9bfc233 100644 --- a/src/assets/js/index.js +++ b/src/assets/js/index.js @@ -1,3 +1,5 @@ +import './nav.js' + class ToggleMenuButton extends HTMLElement { connectedCallback() { this.addEventListener('click', this.onClick.bind(this)) diff --git a/src/assets/js/nav.js b/src/assets/js/nav.js new file mode 100644 index 0000000..4ac2979 --- /dev/null +++ b/src/assets/js/nav.js @@ -0,0 +1,43 @@ +class NavBar extends HTMLElement { + connectedCallback() { + document.addEventListener("scroll", this.onScroll.bind(this)) + } + + + onScroll(evt) { + const scrollThreshold = this.getAttribute('scroll-threshold') + if(window.scrollY > scrollThreshold) { + this.classList.add("nav-bar__scrolled") + } + else { + this.classList.remove("nav-bar__scrolled") + } + } +} + +class ToggleNavBarButton extends HTMLElement { + connectedCallback() { + this.addEventListener('click', this.onClick.bind(this)) + const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize'; + window.addEventListener(windowsChangeEvent, this.close.bind(this)) + } + + get navbar() { + const navbar = this.closest('nav-bar') + console.assert(navbar !== undefined) + return navbar + } + + onClick(evt) { + this.navbar.classList.toggle('nav-bar__open') + evt.preventDefault() + } + + close() { + this.navbar.classList.remove('nav-bar__open') + } +} + +window.customElements.define('nav-bar', NavBar) +window.customElements.define('toggle-nav-bar-button', ToggleNavBarButton) + diff --git a/src/lib/css/content.scss b/src/lib/css/content.scss index b218237..bfa9ee3 100644 --- a/src/lib/css/content.scss +++ b/src/lib/css/content.scss @@ -7,13 +7,13 @@ body { color: var(--color); } -.content { - margin: -60px auto 0 auto; - padding: 0 var(--space-small); - max-width: 1100px; - - @media ($mobile-breakpoint) { - margin-top: 0; - } +* { + box-sizing: border-box; +} + +.content { + margin: 0 auto; + padding: 0 var(--space-small); + max-width: 1100px; } diff --git a/src/lib/nav.html b/src/lib/nav.html index 2859fd2..2556e50 100644 --- a/src/lib/nav.html +++ b/src/lib/nav.html @@ -1,33 +1,36 @@ - + diff --git a/src/lib/nav.scss b/src/lib/nav.scss index cf73cc2..b2eb8aa 100644 --- a/src/lib/nav.scss +++ b/src/lib/nav.scss @@ -1,24 +1,67 @@ -.nav { +.nav-bar { --background: var(--dark); + --mobile-nav-height: 47px; + display: grid; position: sticky; top: 0; - overflow: hidden; - padding: 0 var(--space-small); + height: 82px; + padding: 0; - &--title { - grid-area: 1 / 1 / 3 / 2; - background: var(--background); - padding: var(--space-small); - box-shadow: var(--box-shadow); + grid-template-columns: auto minmax(0px, var(--width)) auto; + background: var(--background); + box-shadow: var(--box-shadow); + + @media ($mobile-breakpoint) { + height: var(--mobile-nav-height); + margin-bottom: 65px; } &--content { - max-width: var(--width); - margin: 0 auto; + margin: 0; display: grid; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto auto; + grid-area: 1 / 2 / 2 / 3; + grid-template-columns: 155px 1fr auto; + } + + &--brand { + position: relative; + grid-area: 1 / 1 / 2 / 2; + padding: 0; + transition: margin-top 0.2s ease-out; + + @media ($mobile-breakpoint) { + width: 100px; + } + } + + &__scrolled &--brand { + margin-top: -80px; + } + + @media ($mobile-breakpoint) { + &__scrolled &--brand, &__open &--brand { + margin-top: -52px; + } + } + + &--logo-wrapper { + width: 100%; + background: var(--dark); + position: absolute; + display: grid; + box-shadow: var(--box-shadow); + padding: var(--space-small); + transition: padding-bottom 0.2s ease-out; + } + + &__scrolled &--logo-wrapper { + padding-bottom: 0; + box-shadow: none; + } + + &--logo { + width: 100%; } &--menu { @@ -28,13 +71,10 @@ display: grid; grid-template-columns: 1fr auto; - box-shadow: var(--box-shadow); - - /* make the nav background full page width */ - margin: 0 -50vw; - padding: 0 50vw; - @media ($mobile-breakpoint) { + position: absolute; + top: var(--mobile-nav-height); + width: 100%; max-height: 0; display: flex; flex-direction: column; @@ -42,6 +82,10 @@ } } + &__open &--menu { + max-height: 230px; + } + &--menu-section { display: flex; flex-direction: row; @@ -50,6 +94,10 @@ margin: 0; @media ($mobile-breakpoint) { flex-direction: column; + + &:not(:last-child) { + border-bottom: 2px solid var(--primary-color); + } } } @@ -57,19 +105,26 @@ list-style: none; flex-grow: 1; display: flex; + } &--menu-link { flex-grow: 1; - padding: var(--space-large) var(--space-small); + display: flex; + justify-content: center; + align-items: center; font-family: Knewave; font-size: var(--fz-4); color: var(--primary-color); text-transform: uppercase; - text-align: center; text-decoration: none; + @media ($mobile-breakpoint) { + padding: var(--space-small); + justify-content: start; + } + &:hover { background: var(--primary-color); color: var(--on-primary); @@ -77,50 +132,41 @@ } &--toggle-button { + display: none; + cursor: pointer; + margin: 0 var(--space-small); + align-self: center; + grid-area: 1 / 3 / 2 / 4; + @media ($mobile-breakpoint) { display: block; } - } - &__open &--menu { - @media ($mobile-breakpoint) { - max-height: 100vh; - } - } -} - -toggle-menu-button { - width: 34px; - height: 34px; - position: absolute; - top: 0; - right: 0; - display: none; - cursor: pointer; - - .bar { - display: block; - background-color: #777; - width: 20px; - height: 2px; - border-radius: 100px; - position: absolute; - top: 18px; - right: 7px; - transition: all 0.5s; - - &:first-child { - transform: translateY(-6px); - } - } - - .nav__open & { .bar { - transform: rotate(45deg); + display: block; + position: initial; + background-color: var(--primary-color); + width: 25px; + height: 3px; + transition: all 0.3s ease-out; + margin: 5px 0; + } + } + + &__open &--toggle-button { + .bar { + opacity: 0; &:first-child { - transform: rotate(-45deg); + opacity: 1; + transform: translateY(8px) rotate(-45deg); + } + + &:last-child { + opacity: 1; + transform: translateY(-8px) rotate(45deg); } } - } + } } + diff --git a/src/pages/index.html b/src/pages/index.html index 56e4c86..fac0b08 100644 --- a/src/pages/index.html +++ b/src/pages/index.html @@ -8,7 +8,7 @@ - + {% include "lib/nav.html" %}