Skip to content
Snippets Groups Projects
Commit 1399f96b authored by Chris Lawton's avatar Chris Lawton
Browse files

adding mobile nav functionality and styles

parent 4e098ecd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
opentech/static_src/src/javascript/components/mobile-menu.js
+ 24
− 24
View file @ 1399f96b
...@@ -3,40 +3,40 @@ class MobileMenu { ...@@ -3,40 +3,40 @@ class MobileMenu {
return '.js-mobile-menu-toggle'; return '.js-mobile-menu-toggle';
} }
constructor(node, openCb = () => {}, closeCb = () => {}) { constructor(node, closeButton, mobileMenu, search) {
this.node = node; this.node = node;
this.closeButton = closeButton;
// Any callbacks to be called on open or close. this.mobileMenu = mobileMenu;
this.openCb = openCb; this.search = search;
this.closeCb = closeCb;
this.state = {
open: false,
};
this.bindEventListeners(); this.bindEventListeners();
} }
bindEventListeners() { bindEventListeners() {
this.node.click(this.toggle.bind(this)); this.node.click(this.toggle.bind(this));
this.closeButton.click(this.toggle.bind(this));
} }
toggle() { toggle() {
this.state.open ? this.close() : this.open(); // toggle mobile menu
} this.mobileMenu[0].classList.toggle('is-visible');
open() { // toggle modifier to change position of the search div when the mobile menu is open
this.node.addClass('is-open'); this.search[0].classList.toggle('header__search--mobile-menu-open');
this.openCb();
// reset the search whenever the mobile menu is toggled
this.state.open = true; if(this.search[0].classList.contains('is-visible')){
} this.search[0].classList.toggle('is-visible');
document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
close() { }
this.node.removeClass('is-open');
this.closeCb(); // reset the search show/hide icons
if(this.mobileMenu[0].classList.contains('is-visible')){
this.state.open = false; document.querySelector('.header__icon--open-search-menu-open').classList.remove('is-hidden');
document.querySelector('.header__icon--close-search-menu-open').classList.remove('is-unhidden');
document.querySelector('.header__icon--open-search-menu-closed').classList.remove('is-hidden');
document.querySelector('.header__icon--close-search-menu-closed').classList.remove('is-unhidden');
}
} }
} }
......
opentech/static_src/src/javascript/main.js
+ 1
− 15
View file @ 1399f96b
import $ from './globals'; import $ from './globals';
import MobileMenu from './components/mobile-menu'; import MobileMenu from './components/mobile-menu';
// Open the mobile menu callback
function openMobileMenu() {
document.querySelector('body').classList.add('no-scroll');
document.querySelector('.header__menus--mobile').classList.add('is-visible');
}
// Close the mobile menu callback.
function closeMobileMenu() {
document.querySelector('body').classList.remove('no-scroll');
document.querySelector('.header__menus--mobile').classList.remove('is-visible');
}
import Search from './components/search'; import Search from './components/search';
$(function () { $(function () {
$(MobileMenu.selector()).each((index, el) => { $(MobileMenu.selector()).each((index, el) => {
new MobileMenu($(el), openMobileMenu, closeMobileMenu); new MobileMenu($(el), $('.js-mobile-menu-close'), $('.header__menus--mobile'), $('.header__search'));
});
}); });
$(Search.selector()).each((index, el) => { $(Search.selector()).each((index, el) => {
......
opentech/static_src/src/sass/components/_icon.scss
+ 6
− 1
View file @ 1399f96b
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
height: 15px; height: 15px;
margin-right: 5px; margin-right: 5px;
fill: $color--primary; fill: $color--primary;
} }
&--footer-social { &--footer-social {
@include media-query(tablet-portrait) { @include media-query(tablet-portrait) {
...@@ -21,6 +21,11 @@ ...@@ -21,6 +21,11 @@
} }
} }
&--mobile-menu {
width: 32px;
height: 28px;
}
&--footer-credit { &--footer-credit {
width: 70px; width: 70px;
height: 45px; height: 45px;
......
opentech/static_src/src/sass/layout/_header.scss
+ 47
− 38
View file @ 1399f96b
...@@ -32,40 +32,55 @@ ...@@ -32,40 +32,55 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
}
&__inner--top { &--mobile-buttons {
display: flex; justify-content: flex-end;
align-items: center;
justify-content: flex-end; @include media-query(tablet-portrait) {
display: none;
}
}
&--menu-open {
padding: 10px;
background: transparent;
transition: background $transition;
}
&--search-open {
background: $color--dark-blue;
}
} }
&__menus { &__menus {
&--desktop { &--desktop {
display: none; display: none;
@include media-query(tablet-portrait) { @include media-query(tablet-portrait) {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: space-between;
} }
} }
&--mobile { &--mobile {
position: fixed; position: fixed;
top: 87px; top: 0;
left: 0; left: 0;
display: flex; z-index: 10;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 20px; background: $color--dark-grey;
background: rgba($color--white, 0.95); opacity: 0;
transform: translate3d(100%, 0%, 0); transform: translate3d(0, -100%, 0);
transition: transform 250ms cubic-bezier(0.24, 0.26, 0.2, 1) 0ms; transition: opacity, transform, 250ms cubic-bezier(0.65, 0.05, 0.36, 1) 0ms;
&.is-visible { &.is-visible {
transform: translate3d(0%, 0%, 0); opacity: 1;
transform: translate3d(0, 0%, 0);
@include media-query(tablet-portrait) {
display: none;
}
} }
nav { nav {
...@@ -98,23 +113,13 @@ ...@@ -98,23 +113,13 @@
} }
&__menu-toggle { &__menu-toggle {
@include font-size(milli);
z-index: 10;
display: flex;
align-items: flex-end;
flex-direction: column;
width: 100%;
font-weight: $weight--bold;
color: $color--secondary;
text-transform: uppercase;
@include media-query(tablet-portrait) { @include media-query(tablet-portrait) {
display: none; display: none;
} }
} }
&__icon { &__icon {
&--cross { &--close-search {
@extend %is-hidden; @extend %is-hidden;
} }
...@@ -144,18 +149,22 @@ ...@@ -144,18 +149,22 @@
} }
&__search { &__search {
&--desktop { @extend %is-invisible;
@extend %is-invisible; position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0; display: flex;
display: flex; align-items: flex-end;
align-items: flex-end; justify-content: center;
justify-content: center; width: 100%;
width: 100%; height: 180px;
height: 180px; padding-bottom: 50px;
padding-bottom: 50px; background: $color--dark-blue;
background: $color--dark-blue;
&--mobile-menu-open {
top: 80px;
z-index: 12;
height: 120px;
} }
} }
} }
opentech/templates/base.html
+ 26
− 14
View file @ 1399f96b
...@@ -81,28 +81,40 @@ ...@@ -81,28 +81,40 @@
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg> <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a> </a>
<div class="header__menu-toggle"> <div class="header__inner header__inner--mobile-buttons">
<span>Menu</span> <button class="button button--left-space js-search-toggle">
<button class="button button-menu-toggle js-mobile-menu-toggle" aria-haspopup="true"> <svg class="header__icon header__icon--open-search header__icon--open-search-menu-closed icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
<span class="button-menu-toggle__line"></span> <svg class="header__icon header__icon--close-search header__icon--close-search-menu-closed icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
<span class="button-menu-toggle__line"></span> </button>
<span class="button-menu-toggle__line"></span> <button class="button js-mobile-menu-toggle" aria-haspopup="true" >
<span class="button-menu-toggle__line"></span> <svg class="icon icon--mobile-menu"><use xlink:href="#mobile-menu-toggle"></use></svg>
</button> </button>
</div> </div>
<section class="header__menus header__menus--desktop"> <section class="header__menus header__menus--desktop">
<div class="header__inner--top"> {% primarynav %}
{% primarynav %}
<button class="button js-desktop-search-toggle"> <button class="button button--left-space js-search-toggle">
<svg class="header__icon header__icon--magnifying-glass icon"><use xlink:href="#magnifying-glass"></use></svg> <svg class="header__icon header__icon--open-search icon"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--cross icon"><use xlink:href="#cross"></use></svg> <svg class="header__icon header__icon--close-search icon"><use xlink:href="#cross"></use></svg>
</button> </button>
</div>
</section> </section>
<section class="header__menus header__menus--mobile"> <section class="header__menus header__menus--mobile">
<div class="header__inner header__inner--menu-open">
<a href="{% slugurl 'home' %}">
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
<div class="header__inner header__inner--mobile-buttons">
<button class="button js-search-toggle">
<svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
<button class="button js-mobile-menu-close">
<svg class="header__icon header__icon--cross icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
</div>
</div>
{% primarynav %} {% primarynav %}
</section> </section>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment