Skip to content

Commit

Permalink
fix: the popup menu on the mobile layout displays correctly (resolves #…
Browse files Browse the repository at this point in the history 
…282) (#286)
  • Loading branch information
@cindyli
cindyli authored Jun 15, 2020
1 parent ca489c3 commit b2977c3
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 107 deletions.
27 changes: 14 additions & 13 deletions src/_includes/components/header-nav.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@
</symbol>
</svg>

<button id="menuToggleButton" aria-expanded="false">
<svg><use xlink:href="#menu-icon" /></svg>&nbsp;Menu
</button>
<div class="nav-wideScreen">
{% include 'components/nav-menu.njk' %}
{% include 'components/search-container.njk' %}
</div>

<nav aria-labelledby="primary-nav-label">
<span id="primary-nav-label" class="screen-reader-only">Primary Navigation</span>
{%- for pageItem in collections.pages %}
{%- if pageItem.menu_order > 0 %}
<a {% if page.url === '/' + pageItem.slug + '/' %}aria-current="page" {% endif %}href="/{{ pageItem.slug }}/">{{ pageItem.title }}</a>
{%- endif %}
{%- endfor %}
<a {% if page.url === '/news/' %}aria-current="page" {% endif %}href="/news/">News</a>
<a {% if page.url === '/views/' %}aria-current="page" {% endif %} href="/views/">Views</a>
</nav>
<div class="nav-smallScreen">
<nav class="starter-nav">
<button id="menuToggleButton" aria-expanded="false">
<svg><use xlink:href="#menu-icon" /></svg>&nbsp;Menu
</button>
{% include 'components/search-container.njk' %}
</nav>

{% include 'components/nav-menu.njk' %}
</div>
1 change: 0 additions & 1 deletion src/_includes/components/header.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
<div class="site-nav-wrapper">
<div class="site-nav">
{% include 'components/header-nav.njk' %}
{% include 'components/search.njk' %}
</div>
</div>
</header>
10 changes: 10 additions & 0 deletions src/_includes/components/nav-menu.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<nav class="primary-nav" aria-labelledby="primary-nav-label">
<span id="primary-nav-label" class="screen-reader-only">Primary Navigation</span>
{%- for pageItem in collections.pages %}
{%- if pageItem.menu_order > 0 %}
<a {% if page.url === '/' + pageItem.slug + '/' %}aria-current="page" {% endif %}href="/{{ pageItem.slug }}/">{{ pageItem.title }}</a>
{%- endif %}
{%- endfor %}
<a {% if page.url === '/news/' %}aria-current="page" {% endif %}href="/news/">News</a>
<a {% if page.url === '/views/' %}aria-current="page" {% endif %} href="/views/">Views</a>
</nav>
0 src/_includes/components/search.njk → ..._includes/components/search-container.njk
View file
File renamed without changes.
20 changes: 15 additions & 5 deletions src/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
/* global $, toggleMenu */

// Clicking the menu toggle button on the mobile layout opens up the popup menu
// and sets the button "aria-expanded" attribute value properly.
// eslint-disable-next-line
toggleMenu = function (expanded) {
document.getElementById("menuToggleButton").setAttribute("aria-expanded", expanded);
$($(".nav-smallScreen").children("nav.primary-nav")[0]).toggle(expanded);
};

// Clicking the menu toggle button on the mobile layout opens up the popup menu.
// Clicking anywhere else closes this popup menu.
document.addEventListener("click", (event) => {
if (event.target.id === "menuToggleButton") {
const expanded = "true" === event.target.getAttribute( "aria-expanded" ) || false;
event.target.setAttribute( "aria-expanded", !expanded );
const expanded = "true" === event.target.getAttribute("aria-expanded") || false;
toggleMenu(!expanded);
} else {
// click anywhere else on the page closes the pop up menu
document.getElementById("menuToggleButton").setAttribute( "aria-expanded", false );
toggleMenu(false);
}
});

// Clicking the search svg on the header enlarges the search input box and places the focus in it.
// This is required for the mobile layout where the search icon overlays on top of the input field.
document.querySelector(".site-nav .search-container svg").addEventListener("click", () => {
document.querySelector(".site-nav .search-container #search-form input").focus();
document.querySelector(".site-nav .nav-smallScreen .search-container svg").addEventListener("click", () => {
document.querySelector(".site-nav .nav-smallScreen .search-container #search-form input").focus();
});
192 changes: 104 additions & 88 deletions src/scss/layout/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,55 +3,96 @@
header {
background-color: $white;

// Styles for the search container
.search-container {
align-items: center;
display: flex;
margin-left: rem(40);

svg {
fill: white;
height: rem(24);
margin: rem(-29);
width: rem(24);
z-index: 1;
}

input[type="search"] {
border: 0;
border-radius: 50%;
outline: none;
padding: rem(8) rem(16);
width: rem(16);

&:focus {
border-radius: rem(28);
padding-left: rem(32);
width: rem(160);
}
}
}

.site-nav-wrapper {
background-color: $navy-light;
width: 100%;

.site-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: auto;
max-width: $max-width-margins;
padding: 0 rem(16);

// Toggle menu button on mobile design
// Override the default button styles from _base.scss and apply the new style
button {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: $white;
font-size: rem(16);
padding: rem(8);

svg {
height: rem(32);
padding: rem(3.2);
pointer-events: none;
width: rem(32);
}
.nav-wideScreen {
display: none;
}

button::before {
content: none;
}
.nav-smallScreen {
display: flex;
flex-direction: column;
position: relative;

.starter-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: auto;
padding: 0 rem(16);
width: 100%;

// Toggle menu button on mobile design
// Override the default button styles from _base.scss and apply the new style
button {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: $white;
font-size: rem(16);
padding: rem(8);

svg {
height: rem(32);
padding: rem(3.2);
pointer-events: none;
width: rem(32);
}
}

button::before {
content: none;
}

button:hover,
button:focus {
background-color: $orange-focus;
color: $navy-light;
button:hover,
button:focus {
background-color: $orange-focus;
color: $navy-light;
}
}
}

// Styles for the navigation menu
nav {
nav.primary-nav {
background: $navy-dark;
display: none;
left: 0;
position: absolute;
top: rem(184);
width: 100%;
top: rem(48);
width: 100vw;
z-index: 2;

a {
border-bottom: solid rem(2);
Expand All @@ -70,64 +111,57 @@ header {
}
}
}

button[aria-expanded="true"] + nav {
display: block;
}

// Styles for the search container
.search-container {
align-items: center;
display: flex;
margin-left: rem(40);

svg {
fill: white;
height: rem(24);
margin: rem(-29);
width: rem(24);
z-index: 1;
}

input[type="search"] {
border: 0;
border-radius: 50%;
outline: none;
padding: rem(8) rem(16);
width: rem(16);

&:focus {
border-radius: rem(28);
padding-left: rem(32);
width: rem(160);
}
}
}
}
}
}

@media screen and (min-width: rem(1024)) {
header {
.search-container {
svg {
margin: rem(-40);
}

input[type="search"],
input[type="search"]:focus {
border-radius: rem(28);
font-size: inherit;
padding: rem(16) rem(48);
width: rem(240);
}
}

.site-nav-wrapper {
.site-nav {
justify-content: space-around;

button {
.nav-smallScreen {
display: none;
}

nav {
.nav-wideScreen {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: auto;
max-width: $max-width-margins;
padding: 0 rem(16);
}

nav.primary-nav {
background-color: transparent;
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-around;
position: inherit;
top: rem(120);
width: auto;
z-index: 0;

a {
border-bottom: none;
float: none;
margin: rem(24);
padding: rem(8) rem(10);
}
Expand All @@ -138,24 +172,6 @@ header {
border-bottom: rem(2) solid $white;
}
}

button[aria-expanded="true"] + nav {
display: flex;
}

.search-container {
svg {
margin: rem(-40);
}

input[type="search"],
input[type="search"]:focus {
border-radius: rem(28);
font-size: inherit;
padding: rem(16) rem(48);
width: rem(240);
}
}
}
}
}
Expand Down

0 comments on commit b2977c3

Please sign in to comment.