From 8159b66a52bf4fd644b5ed8fe81d51c623a23af1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 9 Jul 2020 13:20:50 +0200
Subject: [PATCH] global layout and menu refactor

---
 src/components/Layout.module.css              |  5 +-
 src/components/Layout.tsx                     | 11 ++-
 src/components/atoms/Container.module.css     | 12 +++
 src/components/atoms/Container.tsx            | 22 +++++
 src/components/molecules/Menu.module.css      | 95 +++++++++++++++++--
 src/components/molecules/Menu.tsx             | 29 ++++--
 .../molecules/Wallet/Account.module.css       |  2 +-
 src/components/organisms/AssetList.module.css |  2 +-
 src/components/organisms/Header.module.css    | 52 ----------
 src/components/organisms/Header.tsx           | 14 +--
 src/global/styles.css                         |  6 ++
 11 files changed, 159 insertions(+), 91 deletions(-)
 create mode 100644 src/components/atoms/Container.module.css
 create mode 100644 src/components/atoms/Container.tsx

diff --git a/src/components/Layout.module.css b/src/components/Layout.module.css
index e91512d78..609f8ad4d 100644
--- a/src/components/Layout.module.css
+++ b/src/components/Layout.module.css
@@ -12,10 +12,7 @@
 }
 
 .main {
-  padding: calc(var(--spacer) * 2) calc(var(--spacer) / 1.5);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--layout-max-width);
+  padding: calc(var(--spacer) * 2) 0;
 
   /* sticky footer technique */
   flex: 1;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 3066cafc1..b7b54e29c 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -5,6 +5,7 @@ import Footer from './organisms/Footer'
 import PageHeader from './molecules/PageHeader'
 import styles from './Layout.module.css'
 import Seo from './atoms/Seo'
+import Container from './atoms/Container'
 
 export interface LayoutProps {
   children: ReactNode
@@ -33,10 +34,12 @@ export default function Layout({
 
       <Header />
       <main className={styles.main}>
-        {title && !noPageHeader && (
-          <PageHeader title={title} description={description} />
-        )}
-        {children}
+        <Container>
+          {title && !noPageHeader && (
+            <PageHeader title={title} description={description} />
+          )}
+          {children}
+        </Container>
       </main>
       <Footer />
     </div>
diff --git a/src/components/atoms/Container.module.css b/src/components/atoms/Container.module.css
new file mode 100644
index 000000000..d644cdf34
--- /dev/null
+++ b/src/components/atoms/Container.module.css
@@ -0,0 +1,12 @@
+.container {
+  max-width: var(--break-point--large);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: calc(var(--spacer) / 1.2);
+  padding-right: calc(var(--spacer) / 1.2);
+  width: 100%;
+}
+
+.container.narrow {
+  max-width: 42rem;
+}
diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx
new file mode 100644
index 000000000..1d80a1167
--- /dev/null
+++ b/src/components/atoms/Container.tsx
@@ -0,0 +1,22 @@
+import React, { ReactElement, ReactNode } from 'react'
+import styles from './Container.module.css'
+
+export default function Container({
+  children,
+  narrow,
+  className
+}: {
+  children: ReactNode
+  narrow?: boolean
+  className?: string
+}): ReactElement {
+  return (
+    <div
+      className={`${styles.container} ${narrow && styles.narrow} ${
+        className && className
+      }`}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css
index 50dd4df3c..5a279c27a 100644
--- a/src/components/molecules/Menu.module.css
+++ b/src/components/molecules/Menu.module.css
@@ -1,12 +1,91 @@
 .menu {
+  width: 100%;
 }
 
-.menu > div,
-.link {
+.menu > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: calc(var(--spacer) / 2);
+  padding-bottom: calc(var(--spacer) / 2);
+}
+
+.logoUnit {
+  display: flex;
+  align-items: center;
+}
+
+.logoUnit svg {
+  fill: var(--color-primary);
+  width: 4rem;
+  height: 4rem;
+  margin-left: -0.5rem;
+}
+
+.logoUnit path {
+  fill: var(--brand-black);
+}
+
+.logoUnit:hover path {
+  fill: var(--brand-pink);
+}
+
+.title {
+  display: none;
+}
+
+@media screen and (min-width: 40rem) {
+  .title {
+    margin: 0;
+    display: block;
+    color: var(--color-secondary);
+    font-size: var(--font-size-base);
+  }
+
+  .logoUnit svg {
+    margin-top: -0.4rem;
+  }
+}
+
+@media screen and (min-width: 60rem) {
+  .title {
+    font-size: var(--font-size-large);
+  }
+}
+
+.navigation {
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.navigation::-webkit-scrollbar,
+.navigation::-moz-scrollbar {
+  display: none;
+}
+
+.navigation li {
   display: inline-block;
+}
+
+.navigation button,
+.link {
+  display: block;
+  padding: calc(var(--spacer) / 2);
+  margin-left: var(--spacer);
+  text-transform: uppercase;
   color: var(--brand-grey);
   font-weight: var(--font-weight-bold);
-  margin: calc(var(--spacer) / 4) var(--spacer);
+  font-size: var(--font-size-small);
+  position: relative;
+  z-index: 1;
+}
+
+.navigation button {
+  text-transform: none;
+  padding-top: calc(var(--spacer) / 4);
+  padding-bottom: calc(var(--spacer) / 4);
 }
 
 .link:hover,
@@ -15,14 +94,12 @@
   color: var(--brand-pink);
 }
 
-.link.active {
+.link[aria-current],
+.link[aria-current]:hover,
+.link[aria-current]:focus {
   color: var(--brand-pink);
 }
 
-.link:first-child {
-  margin-left: 0;
-}
-
 .link:last-child {
-  margin-right: 0;
+  padding-right: 0;
 }
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
index 15648f0bd..5d841a5ad 100644
--- a/src/components/molecules/Menu.tsx
+++ b/src/components/molecules/Menu.tsx
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import { useLocation } from '@reach/router'
 import styles from './Menu.module.css'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import Wallet from './Wallet'
+import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
+import Container from '../atoms/Container'
 
 declare type MenuItem = {
   name: string
@@ -25,15 +27,28 @@ function MenuLink({ item }: { item: MenuItem }) {
   )
 }
 
-export default function Menu() {
-  const { menu } = useSiteMetadata()
+export default function Menu(): ReactElement {
+  const { menu, siteTitle } = useSiteMetadata()
 
   return (
     <nav className={styles.menu}>
-      <Wallet />
-      {menu.map((item: MenuItem) => (
-        <MenuLink key={item.name} item={item} />
-      ))}
+      <Container>
+        <Link to="/" className={styles.logoUnit}>
+          <Logo />
+          <h1 className={styles.title}>{siteTitle}</h1>
+        </Link>
+
+        <ul className={styles.navigation}>
+          <li>
+            <Wallet />
+          </li>
+          {menu.map((item: MenuItem) => (
+            <li key={item.name}>
+              <MenuLink item={item} />
+            </li>
+          ))}
+        </ul>
+      </Container>
     </nav>
   )
 }
diff --git a/src/components/molecules/Wallet/Account.module.css b/src/components/molecules/Wallet/Account.module.css
index 69ab4740e..8952d5ed2 100644
--- a/src/components/molecules/Wallet/Account.module.css
+++ b/src/components/molecules/Wallet/Account.module.css
@@ -5,7 +5,7 @@
   text-transform: uppercase;
   border: 1px solid var(--brand-grey-lighter);
   border-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 4);
+  padding: calc(var(--spacer) / 4);
   white-space: nowrap;
   background: none;
   color: var(--brand-grey);
diff --git a/src/components/organisms/AssetList.module.css b/src/components/organisms/AssetList.module.css
index f67d2424e..9d860bfaf 100644
--- a/src/components/organisms/AssetList.module.css
+++ b/src/components/organisms/AssetList.module.css
@@ -6,7 +6,7 @@
 
 @media screen and (min-width: 25rem) {
   .assetList {
-    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     gap: var(--spacer);
   }
 }
diff --git a/src/components/organisms/Header.module.css b/src/components/organisms/Header.module.css
index 064018783..a31e4e918 100644
--- a/src/components/organisms/Header.module.css
+++ b/src/components/organisms/Header.module.css
@@ -1,55 +1,3 @@
 .header {
   background-color: var(--brand-white);
 }
-
-.content {
-  padding: calc(var(--spacer) / 2) var(--spacer);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--layout-max-width);
-}
-
-.logoUnit {
-  display: flex;
-  align-items: center;
-}
-
-.logoUnit svg {
-  fill: var(--color-primary);
-  width: 4rem;
-  height: 4rem;
-  margin-right: calc(var(--spacer) / 2);
-}
-
-.logoUnit path {
-  fill: var(--brand-black);
-}
-.logoUnit:hover path {
-  fill: var(--brand-pink);
-}
-
-.title {
-  display: none;
-}
-
-@media screen and (min-width: 40rem) {
-  .title {
-    margin: 0;
-    display: block;
-    color: var(--color-secondary);
-    font-size: var(--font-size-base);
-  }
-
-  .logoUnit svg {
-    margin-top: -0.4rem;
-  }
-}
-
-@media screen and (min-width: 60rem) {
-  .title {
-    font-size: var(--font-size-large);
-  }
-}
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
index f0fea3b3a..30a8994b8 100644
--- a/src/components/organisms/Header.tsx
+++ b/src/components/organisms/Header.tsx
@@ -1,23 +1,11 @@
 import React, { ReactElement } from 'react'
-import { Link } from 'gatsby'
 import Menu from '../molecules/Menu'
 import styles from './Header.module.css'
-import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
-import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 export default function Header(): ReactElement {
-  const { siteTitle } = useSiteMetadata()
-
   return (
     <header className={styles.header}>
-      <div className={styles.content}>
-        <Link to="/" className={styles.logoUnit}>
-          <Logo />
-          <h1 className={styles.title}>{siteTitle}</h1>
-        </Link>
-
-        <Menu />
-      </div>
+      <Menu />
     </header>
   )
 }
diff --git a/src/global/styles.css b/src/global/styles.css
index 1fc5be14c..aba9e86e5 100644
--- a/src/global/styles.css
+++ b/src/global/styles.css
@@ -6,6 +6,12 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
 html {
   font-size: var(--font-size-root);
   scroll-behavior: smooth;