HamburgerMenu

// SERVER RESPONSE (items)
{
  "config": [
    { "icon": "fa fa-google", "url": "http://www.google.com"},
    { "icon": "fa fa-windows", "url": "http://www.microsoft.com"},
    { "icon": "fa fa-facebook", "url": "http://www.facebook.com"},
    { "icon": "fa fa-linkedin", "url": "http://www.linkedin.com"},
    { "icon": "fa fa-instagram", "url": "http://www.instagram.com"},
    { "icon": "fa fa-youtube", "url": "http://www.youtube.com"}
  ],
  "configRoutes": [
    { "icon": "fa fa-home", "url": "home"},
    { "icon": "fa fa-list", "url": "catalog"},
    { "icon": "fa fa-envelope", "url": "contacts"},
    { "icon": "fa fa-linkedin", "url": "home"},
    { "icon": "fa fa-instagram", "url": "catalog"},
    { "icon": "fa fa-youtube", "url": "contacts"}
  ]
}


 // App.tsx
export const App: React.FC = () => {
  const [items, setItems] = useState<Item[]>([]);

  // items: populated from http request

  return (
    <div>
      <AnimatedHamburger items={  } iconClick={goto} />
    </div>
  )
};

export default App;


// ===========================
// Hamburger Menu

import React, { useState } from 'react';
import classNames from 'classnames';

export interface Item {
  icon: string;
  url: string;
}

export interface AnimatedHamburgerProps {
  items: Item[];
  iconClick: (url: string) => void;
}

export const AnimatedHamburger: React.FC<AnimatedHamburgerProps> = (props) => {
  const [open, setOpen] = useState<boolean>(false);

  const iconClickHandler = (url: string) => {
    // PROBLEM HERE: menu is not opened!!!
    setOpen(false);
    props.iconClick(url);
  }

  return <nav className="menu">
    <span className={classNames('menu-open', {'opened': open})} />
    <label className="menu-open-button"  onClick={() => setOpen(!open)}  >
      <span className="hamburger hamburger-1" />
      <span className="hamburger hamburger-2" />
      <span className="hamburger hamburger-3" />
    </label>

    {
      props.items.map(item => {
        return <span className="menu-item" key={item.icon} onClick={() => iconClickHandler(item.url)}>
          <i className={item.icon} />
        </span>
      })
    }
  </nav>
};