global layout and menu refactor

src/components/Layout.module.css

@@ -12,10 +12,7 @@
 }
 
 .main {
-  padding: calc(var(--spacer) * 2) calc(var(--spacer) / 1.5);
+  padding: calc(var(--spacer) * 2) 0;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--layout-max-width);
 
   /* sticky footer technique */
   flex: 1;

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 && (
+        <Container>
-          <PageHeader title={title} description={description} />
+          {title && !noPageHeader && (
-        )}
+            <PageHeader title={title} description={description} />
-        {children}
+          )}
+          {children}
+        </Container>
       </main>
       <Footer />
     </div>

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;
+}

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>
+  )
+}

src/components/molecules/Menu.module.css

@@ -1,12 +1,91 @@
 .menu {
+  width: 100%;
 }
 
-.menu > div,
+.menu > div {
-.link {
+  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;
 }

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() {
+export default function Menu(): ReactElement {
-  const { menu } = useSiteMetadata()
+  const { menu, siteTitle } = useSiteMetadata()
 
   return (
     <nav className={styles.menu}>
-      <Wallet />
+      <Container>
-      {menu.map((item: MenuItem) => (
+        <Link to="/" className={styles.logoUnit}>
-        <MenuLink key={item.name} item={item} />
+          <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>
   )
 }

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);

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);
   }
 }

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);
-  }
-}

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}>
+      <Menu />
-        <Link to="/" className={styles.logoUnit}>
-          <Logo />
-          <h1 className={styles.title}>{siteTitle}</h1>
-        </Link>
-
-        <Menu />
-      </div>
     </header>
   )
 }

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;