Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

558 front hamburger menu #799

Merged
merged 23 commits into from
Sep 24, 2020
Merged

558 front hamburger menu #799

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
0d816cb
navbar burger item appears
tan-nate Sep 3, 2020
9685a96
navbar burger menu stubbed
tan-nate Sep 3, 2020
175b2ac
navbar burger is functional
tan-nate Sep 3, 2020
ec4e80c
lint
tan-nate Sep 3, 2020
b4fa5e5
added onKeyDown handler to burger
tan-nate Sep 3, 2020
e10d675
styling
tan-nate Sep 3, 2020
da2f99b
larger burger
tan-nate Sep 3, 2020
f7fe827
disable lint for anchor element not wanted to be used as button becau…
tan-nate Sep 4, 2020
124bc19
trying to fix lint
tan-nate Sep 4, 2020
45a0afa
trying to disable lint for one line
tan-nate Sep 4, 2020
f0b5e71
lint
tan-nate Sep 4, 2020
0c7673c
lint
tan-nate Sep 4, 2020
d4b9771
styling
tan-nate Sep 10, 2020
8e2b893
social links never disappear and "Last Updated" never overlaps other …
tan-nate Sep 10, 2020
5d14869
package-lock.json
tan-nate Sep 10, 2020
5afb9ec
aria-expanded attribute of Hamburger changed to "dynamic"
tan-nate Sep 10, 2020
0c109b7
trying to get cypress to pass
tan-nate Sep 10, 2020
08d4bd4
fix aria-expanded
tan-nate Sep 10, 2020
a2a88cf
Merge branch 'dev' into 558-FRONT-HamburgerMenu
tan-nate Sep 10, 2020
a6d2b20
Merge branch 'dev' into 558-FRONT-HamburgerMenu
tan-nate Sep 10, 2020
e31ea70
"Date Updated Through" doesn't disappear too early, Static Footer res…
tan-nate Sep 15, 2020
72d5f06
aria-expanded={activeBurger} in Header
tan-nate Sep 15, 2020
ce88502
no scroll on footer
tan-nate Sep 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions client/components/main/header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React from 'react';
import React, { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import clx from 'classnames';
import COLORS from '../../../styles/COLORS';

const Header = () => {
const [activeBurger, setActiveBurger] = useState(false);

const cta2Style = {
color: COLORS.BRAND.CTA2,
};
Expand All @@ -15,8 +18,12 @@ const Header = () => {
color: COLORS.BRAND.CTA1,
};

const handleClick = () => {
setActiveBurger(!activeBurger);
};

return (
<header
<nav
className="navbar"
role="navigation"
aria-label="main navigation"
Expand All @@ -31,10 +38,23 @@ const Header = () => {
<span className="beta-tag">BETA</span>
</div>
</Link>
<a // eslint-disable-line
role="button"
tabIndex={0}
className={clx('navbar-burger', { 'is-active': activeBurger })}
aria-label="menu"
aria-expanded="false"
tan-nate marked this conversation as resolved.
Show resolved Hide resolved
onClick={handleClick}
onKeyDown={handleClick}
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
tan-nate marked this conversation as resolved.
Show resolved Hide resolved
</a>
</div>

<div id="navbar" className="navbar-menu">
<div className="navbar-end">
<div id="navbar" className={clx('navbar-menu', { 'is-active': activeBurger })}>
<div className="navbar-start">
tan-nate marked this conversation as resolved.
Show resolved Hide resolved
<div className="navbar-item">
<NavLink exact to="/data" activeClassName="navbar-selected" style={backgroundStyle}>
Explore My Council&apos;s 311 Data
Expand All @@ -45,6 +65,8 @@ const Header = () => {
Compare Different Councils
</NavLink>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<NavLink exact to="/about" activeClassName="navbar-selected" style={backgroundStyle}>
About 311 Data
Expand All @@ -57,7 +79,7 @@ const Header = () => {
</div>
</div>
</div>
</header>
</nav>
);
};

Expand Down
1 change: 1 addition & 0 deletions client/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
$brand-heading-color: #002449; // dark blue
$brand-text-color: #002449; // dark blue
$brand-main-color: #002449; // dark blue
$brand-main-color-light: #113355; // faded dark blue
$brand-cta1-color: #FFB24A; // orange
$brand-cta2-color: #55D4D2; // light blue
$brand-bg-color: #FFFFFF; // white
Expand Down
47 changes: 46 additions & 1 deletion client/styles/main/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,54 @@
font-size: 20px;
}

.navbar-burger {
color: $brand-bg-color;
height: auto;

span {
width: 30px;
height: 2px;
left: 0;
}

span:nth-child(1) {
top: calc(50% - 8px);
}

span:nth-child(3) {
top: calc(50% + 6px);
}
}

.navbar-burger.is-active {
span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
}

@media only screen and (max-width: 1024px) {
.navbar-menu.is-active {
padding: 0;
background: none;
box-shadow: none;
width: 270px;
position: fixed;
right: 0;

.navbar-item {
margin: 0;
background-color: $brand-main-color-light;
}
}
}

.navbar-menu .navbar-item {
font-size: 16px;
margin-right: 46px;
margin-right: 20px;
}

.navbar-selected {
Expand Down