diff --git a/src/css/layout/_nav.scss b/src/css/layout/_nav.scss index 8bd315d..4dfffd0 100644 --- a/src/css/layout/_nav.scss +++ b/src/css/layout/_nav.scss @@ -2,42 +2,103 @@ /* Nav */ #nav { - > div > span { - &.bar { - height: 10px; - display: block; - border-radius: 5px; - @include vendor('transition', ( - 'transform #{_duration(transition)} ease', - )); + @include vendor('transition', ( + 'height #{_duration(transition)} ease', + )); + height: 80px; - } + > #wrapper { + margin: auto; + line-height: 11px; - &.bar1 { - width: 60px; - background: _palette(accent1); - margin: 15px 30px; - @include vendor('transform-origin', '55px 5px'); + > #menuToggle { + @include vendor('transition', ( + 'padding #{_duration(transition)} ease', + )); + display: inline-block; + cursor: pointer; + padding: calc(47px/2); - &.active { - @include vendor('transform', 'rotate(45deg)'); - } - } + > span { + &.bar { + height: 3px; + display: block; + border-radius: 1.5px; + @include vendor('transition', ( + 'transform #{_duration(transition)} ease', + 'transform-origin #{_duration(transition)} ease', + 'width #{_duration(transition)} ease', + 'margin #{_duration(transition)} ease', + )); - &.bar1:first-child { - @include vendor('transform-origin', '5px 5px'); - } + } - &.bar2 { - width: 80px; - background: _palette(accent2); - margin: 7px 20px; - z-index: 99; + &.bar1 { + width: 30px; + background: _palette(accent1); + margin: auto; + @include vendor('transform-origin', '30px 1.5px'); - &.active { - @include vendor('transform', 'rotate(-45deg)'); - transform: rotate(-45deg); + &.active { + @include vendor('transform', 'rotate(45deg)'); + } + } + + &.bar1:first-child { + @include vendor('transform-origin', '0 1.5px'); + } + + &.bar2 { + width: 43px; + background: _palette(accent2); + margin: 12px 0; + + &.active { + @include vendor('transform', 'rotate(-45deg)'); + transform: rotate(-45deg); + } + } } } } + + @include breakpoint('<=xlarge') { + + } + + @include breakpoint('<=large') { + + } + + @include breakpoint('<=medium') { + height: 60px; + + > #wrapper > #menuToggle { + padding: calc(35px/2); + + > span { + &.bar1 { + width: 22px; + @include vendor('transform-origin', '22px 1.5px'); + } + + &.bar2 { + width: 32px; + margin: 8px 0; + } + } + } + } + + @include breakpoint('<=small') { + + } + + @include breakpoint('<=xsmall') { + + } + + @include breakpoint('<=xxsmall') { + + } } diff --git a/src/index.html b/src/index.html index c0386b0..63d16b4 100644 --- a/src/index.html +++ b/src/index.html @@ -47,10 +47,12 @@ diff --git a/src/js/main.js b/src/js/main.js index c6d9b22..9478fdc 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,3 +1,4 @@ +document.getElementById("menuToggle").addEventListener("click", menuToggle); function menuToggle() { var bars = document.getElementsByClassName('bar'); for (var i = 0; i < bars.length; i++) {