Header index js

import React from 'react';

import PropTypes from 'prop-types';

import Login from '~/pages/Login';

import { Wrap, Container, LogoHeader, User, Nav, Main } from './styles';

import LogoPrimary from '~/assets/img/logo.svg';
import LogoSecondary from '~/assets/img/logo_jetpax_color.svg';
import UserImg from '~/assets/img/menu usuario.svg';

export default function Header({ themesPrimary, themesSecondary }) {
  function showLoginBox() {
    document.getElementById('login').style.display = 'flex';
  }
  return (
    <Wrap>
      <Container
        themesPrimary={themesPrimary}
        themesSecondary={themesSecondary}
      >
        <Nav>
          {themesPrimary && <LogoHeader src={LogoPrimary} />}
          {themesSecondary && <LogoHeader src={LogoSecondary} />}
        </Nav>
        <Main themesPrimary={themesPrimary} themesSecondary={themesSecondary}>
          <nav>
            <ul>
              <li href="#">INÍCIO</li>
              <li href="#">DESCUBRA</li>

              <li href="#"> ENTREGA</li>
              <li href="#">CONTATO</li>
              <li>
                <User src={UserImg} onClick={showLoginBox} />
              </li>
            </ul>
          </nav>
          <Login />
        </Main>
      </Container>
    </Wrap>
  );
}

Header.propTypes = {
  themesPrimary: PropTypes.bool.isRequired,
  themesSecondary: PropTypes.bool.isRequired,
};

Header.defaultPropTypes = {
  themesPrimary: false,
  themesSecondary: false,
  active: false,
};