Merge pull request #261 from futurice/move-navigation-to-hamburger-menu

Move navigation to hamburger menu
futurice · Apr 23, 2020 · 464c339 · 464c339
2 parents 121b3d2 + 25b906a
commit 464c339
Show file tree

Hide file tree

Showing 15 changed files with 382 additions and 119 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "normalize.css": "^8.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-responsive": "^8.0.3",
     "react-scripts": "3.4.1",
     "styled-components": "^5.0.1",
     "topojson": "^3.0.2",
@@ -62,6 +63,7 @@
     "@types/reach__router": "^1.3.1",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
+    "@types/react-responsive": "^8.0.2",
     "@types/styled-components": "^5.0.1",
     "@types/uuid": "^7.0.2",
     "aws-sdk": "^2.642.0",

diff --git a/public/index-main.html b/public/index-main.html
@@ -20,28 +20,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/frontend/main/App.test.tsx b/src/frontend/main/App.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { App } from './App';
 
-it('renders the map link element', () => {
+it('renders the menu button element', () => {
   const { getByText } = render(<App />);
-  expect(getByText('Kartta')).toBeInTheDocument();
+  expect(getByText('Menu')).toBeInTheDocument();
 });
diff --git a/src/frontend/main/App.tsx b/src/frontend/main/App.tsx
@@ -7,6 +7,7 @@ import MapView from './MapView';
 import About from './About';
 import Survey from './Survey';
 import Privacy from './Privacy';
+import Menu from './Menu';
 
 import RobotoEot from './assets/fonts/roboto-v20-latin-ext_latin-regular.eot';
 import RobotoSvg from './assets/fonts/roboto-v20-latin-ext_latin-regular.svg';
@@ -100,6 +101,7 @@ export const App = () => {
   const [data, setData] = useState<'FETCHING' | 'ERROR' | object>('FETCHING');
   const dataEndpoint = process.env.REACT_APP_DATA_ENDPOINT;
   const [username, password] = (process.env.REACT_APP_DATA_AUTH || '').split(':');
+  const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
     axios(`${dataEndpoint}city_level_general_results.json`, {
@@ -116,9 +118,10 @@ export const App = () => {
         <GlobalStyles />
         <Location>
           {({ location }) => {
-            return <Header location={location.pathname} />;
+            return <Header location={location.pathname} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />;
           }}
         </Location>
+        <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}></Menu>
         <main>
           <Router>
             {<MapView path="/" responseData={data} />}

diff --git a/src/frontend/main/FilterToggle.tsx b/src/frontend/main/FilterToggle.tsx
@@ -16,6 +16,7 @@ const FilterButton = styled(PrimaryButton)`
   padding: 5px 16px;
   display: flex;
   justify-content: center;
+  align-items: center;
   margin-right: 8px;
 
   svg {

diff --git a/src/frontend/main/Header.tsx b/src/frontend/main/Header.tsx
@@ -1,33 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link, Match } from '@reach/router';
+import { Link } from '@reach/router';
 import Logo from './assets/oiretutka-logo-gradient.svg';
-import AboutIcon from './assets/AboutIcon';
-import MapIcon from './assets/MapIcon';
-import SurveyIcon from './assets/SurveyIcon';
-
-type LinkProps = {
-  to: string;
-  linkText: string;
-  icon: (match: { uri: string; path: string } | null) => void;
-};
+import MenuButton from './MenuButton';
+import { HEADERHEIGHT } from './constants';
 
 type HeaderProps = {
   location: string;
+  menuOpen: boolean;
+  setMenuOpen: (value: boolean) => void;
 };
 
-interface activeLinkProps {
-  readonly isActive: boolean;
-}
-
 const AppHeader = styled.header`
-  padding: 24px 16px 10px 16px;
+  padding: 16px 16px 10px 16px;
   background-color: ${props => props.theme.white};
   border-bottom: 1px solid ${props => props.theme.black};
-  height: 130px;
+  height: ${HEADERHEIGHT}px;
 `;
 
 const HeaderContainer = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -41,86 +33,18 @@ const LogoImage = styled.img`
   width: 154px;
 `;
 
-const Nav = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-`;
-
-const LinkContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-const RouterLink = styled(Link)`
-  padding: 6px 6px 6px 0;
-  text-decoration: none;
-  color: inherit;
-  display: flex;
-  align-items: center;
-
-  &:not(:last-child) {
-    margin-right: 10px;
-  }
-
-  svg {
-    flex: 1 0 16px;
-  }
-
-  &:active {
-    color: inherit;
-  }
-`;
-
-const LinkText = styled.span<activeLinkProps>`
-  margin-left: 4px;
-  font-weight: bold;
-  color: ${props => (props.isActive ? props.theme.black : props.theme.blue)};
-  text-decoration: ${props => (props.isActive ? 'none' : 'underline')};
-  flex: 0 0 auto;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-const LinkItem = ({ to, linkText, icon }: LinkProps) => {
-  return (
-    <Match path={to}>
-      {({ match }) => (
-        <RouterLink to={to}>
-          {icon(match)}
-          <LinkText isActive={match ? true : false}>{linkText}</LinkText>
-        </RouterLink>
-      )}
-    </Match>
-  );
-};
-
-const Header = ({ location }: HeaderProps) => {
+const Header = ({ location, menuOpen, setMenuOpen }: HeaderProps) => {
   const isEmbedView = location === '/map-embed';
   if (!isEmbedView) {
     return (
       <AppHeader>
         <HeaderContainer>
           <div>
-            <LogoImage src={Logo} alt="Oiretutka. Helsingin Sanomat ja Futurice." />
+            <Link to={'/'}>
+              <LogoImage src={Logo} alt="Oiretutka. Helsingin Sanomat ja Futurice." />
+            </Link>
           </div>
-          <Nav>
-            <LinkContainer>
-              <LinkItem to="/" linkText="Kartta" icon={match => <MapIcon fillColor={match ? '#000' : '#0047FF'} />} />
-              <LinkItem
-                to="survey"
-                linkText="Kyselylomake"
-                icon={match => <SurveyIcon fillColor={match ? '#000' : '#0047FF'} />}
-              />
-              <LinkItem
-                to="about"
-                linkText="Info"
-                icon={match => <AboutIcon fillColor={match ? '#000' : '#0047FF'} />}
-              />
-            </LinkContainer>
-          </Nav>
+          <MenuButton menuOpen={menuOpen} setMenuOpen={setMenuOpen}></MenuButton>
         </HeaderContainer>
       </AppHeader>
     );

diff --git a/src/frontend/main/MapView.tsx b/src/frontend/main/MapView.tsx
@@ -9,7 +9,7 @@ import PrimaryButton from './PrimaryButton';
 import MapContainer from './map/MapContainer';
 import useModal from './useModal';
 import CloseIcon from './assets/CloseIcon';
-import { FILTERS } from './constants';
+import { FILTERS, HEADERHEIGHT, NAVHEIGHT } from './constants';
 
 type FilterKey = keyof typeof FILTERS;
 
@@ -59,7 +59,7 @@ interface mapProperties {
 const cartogramData: mapProperties[] = require('./assets/data/cartogram-coordinates.json');
 
 const MapNav = styled.div`
-  height: 55px;
+  height: ${NAVHEIGHT}px;
   padding: 0 16px;
   border-bottom: 1px solid ${props => props.theme.black};
 `;
@@ -87,7 +87,7 @@ const Label = styled.label`
 const MapWrapper = styled.div`
   text-align: center;
   position: relative;
-  height: calc(100vh - 185px);
+  height: calc(100vh - (${HEADERHEIGHT}px + ${NAVHEIGHT}px));
 `;
 
 const FilterWrapper = styled.div`
@@ -170,11 +170,11 @@ const CloseButton = styled.button`
 const MapView = (props: MapViewProps) => {
   const currentPath = props.location!.pathname;
   const isEmbed = currentPath === '/map-embed';
-  const topPartHeight = isEmbed ? 80 : 225;
+  const topPartHeight = isEmbed ? NAVHEIGHT : HEADERHEIGHT + NAVHEIGHT;
   const { isShowing, toggleModal } = useModal();
   const [showMapInfo, setShowMapInfo] = useState(true);
   const [selectedFilter, setSelectedFilter] = useState<FilterKey>(FILTERS.corona_suspicion_yes.id as FilterKey);
-  const [mapHeight, setMapHeight] = useState(window.innerHeight - topPartHeight);
+  const [mapHeight, setMapHeight] = useState(window.innerHeight - topPartHeight - 10);
   const [activeCityData, setActiveCityData] = useState({});
   const data = props.responseData.data;
 
@@ -201,7 +201,7 @@ const MapView = (props: MapViewProps) => {
   }, 0);
 
   window.addEventListener('resize', () => {
-    setMapHeight(window.innerHeight - topPartHeight);
+    setMapHeight(window.innerHeight - topPartHeight - 10);
   });
   let dataForMap: mapProperties[] = cartogramData.map((d: mapProperties) => {
     let index = data.findIndex((el: mapProperties) => d.city === el.city);