const primaryLinks = [
  {
    href: "/",
    text: "Item1"
  },
  {
    href: "#header",
    text: "Item2"
  },
  {
    href: "#about",
    text: "Item3"
  },
  {
    href: "#about",
    text: "Item4"
  },
  {
    href: "#about",
    text: "Item5"
  },
  {
    href: "#about",
    text: "Item6"
  }
]

const secondaryLinks = [
  {
    href: "/contact",
    text: "Contact"
  },
  {
    href: "/jobs",
    text: "Jobs"
  }
]


const MobileMenu = (props) => (
  <nav className='main-menu' role='navigation'>
    <header>
      <a className='logo' href='/'></a>
      <a className='close-menu' onClick={props.handleMainMenu}></a>
    </header>
    <ul className='primary-links'>
      {primaryLinks.map((link, i) => {
        return (
          <li key={i}>
            <a onClick={props.handleActiveLink(link.text)} className={`menu-link ${props.activeLink === link.text ? ' active' : ''}`}>{link.text}</a>
          </li>
        )
      })}
    </ul>
    <ul className='secondary-links'>
      {secondaryLinks.map((link, i) => {
        return (
          <li key={i}>
            <a onClick={props.handleActiveLink(link.text)} className={`menu-link ${props.activeLink === link.text ? ' active' : ''}`}>{link.text}</a>
          </li>
        )
      })}
    </ul>
    <style>{`
      .main-menu {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        padding: 24px;
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        background-color: var(--white);
        overflow-y: auto;
      }

      header {
        display: flex;
        justify-content: space-between;
        flex: none;
      }

      .logo {
        margin: 6px 8px 8px 0;
        width: 135px;
        height: 35px;
        background-image: url('/static/assets/logo-mobile.svg');
        background-size: contain;
        background-repeat: no-repeat;
        flex: none;
      }

      .close-menu {
        display: inline-block;
        width: 20px;
        height: 20px;
        flex: none;
        background-image: url('/static/assets/close-menu.svg');
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
      }

      .primary-links, .secondary-links {
        display: inline-block;
        margin: 24px 0 0 4em;
        width: fit-content;
        padding-top: 24px;
        border-top: solid 2px var(--dark-accent);
      }

      .primary-links li, .secondary-links li {
        padding: 8px 0;
      }

      .menu-link {
        margin: 16px 0;
        color: var(--dark-gray);
        font-family: var(--regular);
        font-size: 2.4rem;
        text-transform: uppercase;
      }

      .active, .menu-link:hover {
        color: var(--dark-accent);
      }
    `}</style>
  </nav>
)

export default MobileMenu
@@ -50,13 +50,16 @@
 t: %22
-Item1
+About us
 %22%0A  
@@ -101,13 +101,20 @@
 t: %22
-Item2
+Case studies
 %22%0A  
@@ -155,13 +155,19 @@
 t: %22
-Item3
+Collaborate
 %22%0A  
@@ -208,13 +208,20 @@
 t: %22
-Item4
+Transparency
 %22%0A  
@@ -262,13 +262,20 @@
 t: %22
-Item5
+Publications
 %22%0A  
@@ -316,13 +316,114 @@
 t: %22
-Item6
+E-books%22%0A  %7D,%0A  %7B%0A    href: %22#about%22,%0A    text: %22Media%22%0A  %7D,%0A  %7B%0A    href: %22#about%22,%0A    text: %22Who we are
 %22%0A  
@@ -1200,32 +1200,49 @@
 %3E%0A            %3Ca
+ href=%7Blink.href%7D
  onClick=%7Bprops.

Work in progress