diff --git a/src/header.pug b/src/header.pug index 2c2ec98..3e47e55 100644 --- a/src/header.pug +++ b/src/header.pug @@ -24,6 +24,9 @@ details#user-controls #user-controls__panel include page-user-panel.pug +.mobile-menu-icon + button.icon-menu + button(role='log in' onclick="document.querySelector('sib-auth').login();") Login sib-auth diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index 741219e..3ff49c7 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -1,4 +1,58 @@ @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) { box-shadow: 0 0 8px 0 $shadow; background-color: $background; -} \ No newline at end of file +} + +@mixin breakpoint($min: 0, $max: 0) { + $type: type-of($min); + + @if $type==string { + @if $min==xs { + @media (max-width: 768px) { + @content; + } + } + + @else if $min==sm { + @media (max-width: 1024px) { + @content; + } + } + + @else if $min==md { + @media (max-width: 1200px) { + @content; + } + } + + @else if $min==lg { + @media (min-width: 1201px) { + @content; + } + } + + @else { + @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg"; + } + } + + @else if $type==number { + $query: "all" !default; + + @if $min !=0 and $max !=0 { + $query: "(min-width: #{$min}) and (max-width: #{$max})"; + } + + @else if $min !=0 and $max==0 { + $query: "(min-width: #{$min})"; + } + + @else if $min==0 and $max !=0 { + $query: "(max-width: #{$max});" + } + + @media #{$query} { + @content; + } + } +} diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 51cc2af..6d1e7b5 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -168,6 +168,10 @@ &::before { margin-left: 1.5rem; } + + @include breakpoint(sm) { + display: none; + } } } } @@ -236,5 +240,13 @@ } } } + + .mobile-menu-icon { + display: none; + + @include breakpoint(sm) { + display: block; + } + } } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 35a6246..f889e74 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -188,4 +188,21 @@ background-color: $color-213-13-86; } } + + &.mobile-opened { + @include breakpoint(sm) { + bottom: 0; + min-width: 80%; + position: fixed; + right: 0; + top: 0; + z-index: 1; + } + } + + &.mobile-closed { + @include breakpoint(sm) { + display: none; + } + } }