Add mobile menu, finetune logic

0is1 · Oct 4, 2019 · 15c5856 · 15c5856
1 parent e6fba2b
commit 15c5856
Showing 1 changed file with 48 additions and 18 deletions.
diff --git a/components/Container/index.js b/components/Container/index.js
@@ -23,7 +23,7 @@ type Props = {
 };
 
 const {
-  Container, Footer, HeaderLink, Tab,
+  Container, Footer, HeaderLink, Tab, MobileMenuUL, MobileMenu, MobileNav, DesktopNav,
 } = Styles;
 
 class ContainerComponent extends Component<Props> {
@@ -41,33 +41,63 @@ class ContainerComponent extends Component<Props> {
     router.events.off('routeChangeComplete', this.handleRouteChange);
   }
 
-  handleRouteChange = (url) => {
+  handleRouteChange = (url: string) => {
     gtag.pageview(url);
   };
 
+  getHeaderLink = (translationKey: string) => {
+    const { t } = this.props;
+    return <HeaderLink fontSize={['1rem', '1rem', '.7rem', '1rem']}>{t(translationKey)}</HeaderLink>;
+  };
+
+  getTab = ({ activeRoute, translationKey, href }: { activeRoute: string, translationKey: string, href: string }) => (
+    <Tab borderColor={activeRoute === href ? `${colors.border}` : 'transparent'} px={3}>
+      <Link href={href}>{this.getHeaderLink(translationKey)}</Link>
+    </Tab>
+  );
+
   render() {
     const {
       activeRoute, children, currentLanguage, t,
     } = this.props;
+    const homeLink = this.getTab({
+      activeRoute,
+      href: '/',
+      translationKey: 'menu-text-search',
+    });
+    const advancedSearchLink = this.getTab({
+      activeRoute,
+      href: '/advanced_search',
+      translationKey: 'menu-text-advanced-search',
+    });
+    const infoLink = this.getTab({
+      activeRoute,
+      href: '/info',
+      translationKey: 'menu-text-info',
+    });
     return (
       <>
         <header>
-          <Tabs px={4} pt={2}>
-            <Tab borderColor={activeRoute === '/' ? `${colors.border}` : 'transparent'} px={3}>
-              <Link href="/">
-                <HeaderLink fontSize={['0.65rem', '0.75rem', '1rem', '1rem']}>{t('menu-text-search')}</HeaderLink>
-              </Link>
-            </Tab>
-            <Tab borderColor={activeRoute === '/advanced_search' ? `${colors.border}` : 'transparent'} px={3}>
-              <Link href="/advanced_search">
-                <HeaderLink fontSize={['0.65rem', '0.75rem', '1rem', '1rem']}>{t('menu-text-advanced-search')}</HeaderLink>
-              </Link>
-            </Tab>
-            <Tab borderColor={activeRoute === 'info' ? `${colors.border}` : 'transparent'} px={3}>
-              <Link href="/info">
-                <HeaderLink fontSize={['0.65rem', '0.75rem', '1rem', '1rem']}>{t('menu-text-info')}</HeaderLink>
-              </Link>
-            </Tab>
+          <Tabs px={4} py={2}>
+            <DesktopNav>
+              {homeLink}
+              {advancedSearchLink}
+              {infoLink}
+            </DesktopNav>
+            <MobileNav role="navigation">
+              <MobileMenu>
+                <input type="checkbox" />
+                <span />
+                <span />
+                <span />
+
+                <MobileMenuUL>
+                  <li>{homeLink}</li>
+                  <li>{advancedSearchLink}</li>
+                  <li>{infoLink}</li>
+                </MobileMenuUL>
+              </MobileMenu>
+            </MobileNav>
             <LanguageSelector currentLanguage={currentLanguage} />
           </Tabs>
         </header>