navbar.js

import React, { useState } from 'react';
import { graphql, Link, useStaticQuery } from "gatsby"
import styled from 'styled-components';
import Img from 'gatsby-image';
import AniLink from "gatsby-plugin-transition-link/AniLink"

export default () => {
  const data = useStaticQuery(graphql`
      query NavbarQueryPL {
          datoCmsHomepage {
              logo {
                  fluid(maxWidth: 240, imgixParams: { fm: "png", auto: "compress" }) {
                      ...GatsbyDatoCmsFluid_noBase64
                  }
              }
          }
          allDatoCmsProduct(sort: {fields: name, order: ASC}, filter: {locale: {eq: "pl"}}) {
              edges {
                  node {
                      name
                      id
                      slug
                  }
              }
              totalCount
          }
      }
  `);

  const [menu, showMenu] = useState(false);
  const [products, showProducts] = useState(false);

  return (
    <StyledNavbar >
      <NavbarContainer>
        <LogoWrapper>
          <Linksy to="/">
            <Img fluid={data.datoCmsHomepage.logo.fluid}/>
          </Linksy>
        </LogoWrapper>
        <Hamburger showNav={menu} onClick={() => showMenu(!menu)}>
          <HamburgerItemsWrapper>
            <TextMenu showNav={menu}>
              <span>MENU</span>
            </TextMenu>
            <HamburgerInner showNav={menu}>
              <span/>
            </HamburgerInner>
          </HamburgerItemsWrapper>
        </Hamburger>
        <NavItems>
          <NavUl showNav={menu} >
            <li onClick={() => showMenu(!menu)}>
              <Linksy fade to="/">
                Home
              </Linksy>
            </li>
            <li onClick={() => showMenu(!menu)}>
              <Linksy fade to="/o-firmie">
                O firmie
              </Linksy>
            </li>
            <LiProducts showProducts={products} onClick={() => showProducts(!products)}>
              <span>
                Produkty
              </span>
              <ProductList showProducts={products}>
                {data.allDatoCmsProduct.edges.map(({ node: product }) => (
                  <ProductListItem key={product.id}>
                        <Link
                          onClick={() => showMenu(!menu)}
                          to={`/produkt/${product.slug}`}>
                          {product.name}
                        </Link>
                  </ProductListItem>
                ))}
                </ProductList>
            </LiProducts>
            <li onClick={() => showMenu(!menu)}>
              <Linksy fade to="/galeria">
                Galeria
              </Linksy>
            </li>
            <li onClick={() => showMenu(!menu)}>
              <Linksy fade to="/dla-projektantow">
                Dla projektantów
              </Linksy>
            </li>
            <li onClick={() => showMenu(!menu)}>
              <Linksy fade to="/dokumenty">
                Dokumenty
              </Linksy>
            </li>
            <li onClick={() => showMenu(!menu)}>
              <Linksy fade to="/kontakt">
                Kontakt
              </Linksy>
            </li>
          </NavUl>
        </NavItems>
      </NavbarContainer>
    </StyledNavbar>
  )
}