Как сделать dropdown на всю ширину экрана?

  return (
    <Layout>
      <Header headerCategory={ headerCategory } headerArticles={ headerArticles } />
      <Suspense fallback='loading'>
      </Suspense>
      <React.Suspense fallback="Root content suspense">
        <Switch>
          <Route exact path="/">
            <Redirect to="/prams" />
          </Route>
          <Route path="/prams" component={ lazy ( 'Prams' ) } />
        </Switch>
      </React.Suspense>
    </Layout>
  );
};

export default Root;

import React from 'react';
import { NavLink } from 'react-router-dom';
import styled, { css } from 'styled-components';
import { tablet, mobile, desktop } from '@utils/media';
import { styleLink } from '@components/Header/styles';


const styleBurgerMenuWrapper = css`
  display:flex;
  flex: 1;
  justify-content: flex-start;
  height: 100%;
  position: relative;
`;

const BurgerMenuWrapper = styled.div`
  ${ desktop }{
    display:none;
  }
  ${ tablet }{
   ${ styleBurgerMenuWrapper };
  }
  ${ mobile }{
   ${ styleBurgerMenuWrapper };
  }
`;

const BurgerMenuCheckbox = styled.input`
  display:none;
`;

const BurgerMenuLinesWrapper = styled.figure`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: absolute;
  align-items: center;
  height: 3.5rem;
  width: 3.5rem;
  left: 1rem;
`;

const BurgerMenuLine = styled.div`
  width: 3rem;
  height: .2rem;
  background-color:#fff;
  &:nth-child(2),
  &:nth-child(3){
    position: absolute;
    top: 1.65rem;
  }
`;

const styleBurgerMenuLabel = css`
  display: flex;
  justify-content: start;
  align-items: center;
  user-select: none;
  padding-left: 3rem;
  width: 100%;
  height: 100%;
  z-index: 1;
`;


const BurgerMenuLabel = styled.label`
  ${tablet}{
    ${styleBurgerMenuLabel};
    padding-left: 5rem;
    width: 30%;
  }
  ${mobile}{
    ${styleBurgerMenuLabel};
    padding: 0;
    color: transparent;
  } 

`;

const BurgerMenuNav = styled.nav`
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: max-content;
    background: aqua;
    transform: translateY(100%);
`;

const BurgerMenuLink = styled(NavLink)`
  ${styleLink};
  display: block;
   height: 4rem;
   position: relative;
   z-index: 5;
   background: aqua;
`;

const BurgerMenu = () => (
  <BurgerMenuWrapper>
    <BurgerMenuCheckbox type='checkbox' id='burger-menu-checkbox' />

    <BurgerMenuLinesWrapper>
      <BurgerMenuLine />
      <BurgerMenuLine />
      <BurgerMenuLine />
      <BurgerMenuLine />
    </BurgerMenuLinesWrapper>

    <BurgerMenuLabel htmlFor='burger-menu-checkbox'>Menu</BurgerMenuLabel>
    <BurgerMenuNav>
      <BurgerMenuLink to='#'>1</BurgerMenuLink>
      <BurgerMenuLink to='#'>2</BurgerMenuLink>
      <BurgerMenuLink to='#'>3</BurgerMenuLink>
      <BurgerMenuLink to='#'>4</BurgerMenuLink>
      <BurgerMenuLink to='#'>5</BurgerMenuLink>
      <BurgerMenuLink to='#'>6</BurgerMenuLink>
      <BurgerMenuLink to='#'>7</BurgerMenuLink>
    </BurgerMenuNav>
  </BurgerMenuWrapper>
);

export default BurgerMenu;

import React from 'react';
import {
  HeaderNavLink,
  HeaderNav,
  HeaderMainContainer,
  HeaderInfoContainer,
  HeaderItemsWrapperLeft,
  HeaderItemsWrapperRight,
  Dropdown,
  DropdownGroup,
  DropdownGroupArticle,
  DropdownGroupWrapper,
  DropdownLink,
  HeaderItem,
  ShopCartWrapper,
  HeaderNavContainer,
  ListItem,
  LogoDesktopWrapper,
  LogoTabletWrapper,
  List
} from './styles';
import { LogoDesktop, LogoTablet, Search, ShopCart, LoginHeaderLink, LocationMarkerLink, BurgerMenu } from '@components';
import PropTypes from 'prop-types';


const Header = ( props ) => {
  const { headerCategory, headerArticles } = props;
  return (
    <HeaderMainContainer>
      <HeaderInfoContainer>
        <HeaderItemsWrapperLeft>
          { /*desktop*/ }
          <HeaderItem></HeaderItem>
          <HeaderItem>E-MAIL</HeaderItem>
          <HeaderItem>
            <LocationMarkerLink />
          </HeaderItem>
          { /*Laptop and mobile*/ }

          <BurgerMenu/>

        </HeaderItemsWrapperLeft>

        { /*Laptop / mobile*/ }
        <LogoTabletWrapper>
          <LogoTablet />
        </LogoTabletWrapper>

        <HeaderItemsWrapperRight>
          { /*desktop*/ }
          <LoginHeaderLink />
          { /*desktop / laptop / mobile*/ }
          <ShopCartWrapper>
            <ShopCart />
          </ShopCartWrapper>

        </HeaderItemsWrapperRight>
      </HeaderInfoContainer>

      <HeaderNavContainer>
        <HeaderNav>
          <List>
            <ListItem><HeaderNavLink to="#">Главная</HeaderNavLink></ListItem>
            <ListItem><HeaderNavLink to="#">Категории</HeaderNavLink>
              <Dropdown>
                <DropdownGroupWrapper>
                  { headerCategory.map ( item =>
                    <DropdownGroup key={ item.id }>
                      { item.listItems.map ( listItem =>
                        <ListItem key={ listItem.text }><DropdownLink
                          to={ listItem.path }>{ listItem.text }</DropdownLink></ListItem>
                      ) }
                    </DropdownGroup>
                  ) }
                </DropdownGroupWrapper>
              </Dropdown>
            </ListItem>
            <ListItem><HeaderNavLink to="#">О Нас</HeaderNavLink></ListItem>
          </List>

          <LogoDesktopWrapper>
            <LogoDesktop />
          </LogoDesktopWrapper>

          <List>
            <ListItem><HeaderNavLink to="/">Оплата</HeaderNavLink></ListItem>
            <ListItem><HeaderNavLink to="#">Статьи</HeaderNavLink>
              <Dropdown>
                <DropdownGroupWrapper>
                  { headerArticles.map ( item =>
                    <DropdownGroupArticle key={ item.text }>
                      <ListItem key={ item.text }><DropdownLink
                        to={ item.path }>{ item.text }</DropdownLink></ListItem>
                    </DropdownGroupArticle>
                  ) }
                </DropdownGroupWrapper>
              </Dropdown>
            </ListItem>
            <ListItem>
              <Search />
            </ListItem>
          </List>
        </HeaderNav>
      </HeaderNavContainer>
    </HeaderMainContainer>
  );
};
Header.propTypes = {
  headerCategory: PropTypes.array.isRequired,
  headerArticles: PropTypes.array.isRequired
};

export default Header;