@axeptio/design-system/src/Core/Menu/Mobile/index.jsx

Design System for Axeptio

/* eslint-disable @next/next/no-img-element */
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const menuColors = ['#fac6a1', '#a9ddd7', '#afc2e7', '#f7daa6', '#f9a6a2', '#f8cfb6'];

const Root = styled.nav`
  margin: 0;
  padding: 120px 20px 80px;
  font-family: ${props => props.theme.fonts.text};

  .sb-show-main.sb-main-padded {
    padding: 0px;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin: 0;
      font-size: 16px;
    }
  }
`;

const Label = styled.span`
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: ${props => props.theme.colors.grey.v500};
  font-family: ${props => props.theme.fonts.text};
`;

const Link = styled.a`
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 30px;
  font-size: 16px;
  font-weight: 700;
  color: ${props => props.theme.colors.secondary};
  text-decoration: none;
  font-family: ${props => props.theme.fonts.text};
`;

const SubMenu = styled.ul`
  display: flex;
  list-style: none;
  flex-direction: column;
  width: 100%;
  margin: 0 0 30px !important;
  padding: 4px 0 !important;
  list-style: none;

  /* 1st level menu in sub */
  > li {
    padding: 0;
    margin: 0;

    /* Last menu items */
    .sub-sub-cats {
      list-style: none;
      margin: 0 0 20px 30px;
      padding: 0;
      list-style: none;

      .sub-sub-cat {
        padding: 0;
        margin: 0;
        list-style: none;
        margin-bottom: 10px;

        a {
          display: flex;
          align-items: center;
          font-size: 15px;

          > span:last-child {
            margin-left: 8px;
          }
        }

        &:not(:last-child) {
          margin-right: 16px;
        }
      }
    }
  }
`;

const MenuItem = styled.li`
  z-index: 10;
  position: ${props => (props.hasGirdMenu ? 'inherit' : 'relative')};
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  margin-bottom: 10px;

  @media (min-width: ${props => props.theme.breakpoints.xlarge}px) {
    padding: 0 20px;
  }
`;

const CategoryItem = styled.li`
  &:not(:last-child) {
    margin-bottom: 8px;
  }

  div {
    > a {
      display: flex;
      align-items: ${props => (props.hasDescription ? 'flex-start' : 'center')};
      padding: 4px 10px;
      height: 100%;
      font-weight: 700;
      color: ${props => props.theme.colors.secondary};
      border-radius: 6px;

      /* CategoryItem with description */
      span {
        span:first-child {
          font-weight: 700;
        }

        span:last-child {
          display: block;
          margin-top: 4px;
          font-size: 14px;
          font-weight: 400;
          color: ${props => props.theme.colors.grey.v500};
        }
      }

      > img {
        margin: 0;
        width: 40px;
      }

      > span:last-child {
        margin-left: 10px;
      }
    }
  }
`;

const Content = styled.div`
  a {
    display: flex;
    flex-direction: row;
    font-family: ${props => props.theme.fonts.text};
    cursor: pointer;
  }

  span {
    display: flex;
    flex-direction: column;
  }
`;

const MenuMobile = ({ menu, open }) => {
  if (!open) return '';
  return (
    <Root>
      <ul>
        {menu.map((item, index) => {
          return (
            <MenuItem key={`${item.name}-${index}`} hasGirdMenu={false} className="sub-sub-cat">
              {!item?.submenu ? (
                <Link tabIndex={item?.tabIndex} id={item.name} href={item.link}>
                  {item.name}
                </Link>
              ) : (
                <Label id={item.name}>{item.name}</Label>
              )}

              {item?.submenu ? (
                <SubMenu isGridMenu={item?.submenu?.img}>
                  {item?.submenu.map((subItem, key) => (
                    <CategoryItem key={`${subItem}-${key}`} hasDescription={subItem?.description} bgColor={menuColors[key]}>
                      <Content>
                        <a tabIndex={subItem?.tabIndex} aria-label="link">
                          {subItem?.img ? <img src={subItem?.img} alt={subItem?.name} width="40" /> : null}
                          {subItem?.description ? (
                            <span>
                              <span>{subItem?.name}</span>
                              <span>{subItem?.description}</span>
                            </span>
                          ) : (
                            <span>
                              <span>{subItem?.name}</span>
                              <span />
                            </span>
                          )}
                        </a>
                      </Content>
                    </CategoryItem>
                  ))}
                </SubMenu>
              ) : null}
            </MenuItem>
          );
        })}
      </ul>
    </Root>
  );
};

MenuMobile.propTypes = {
  menu: PropTypes.array.isRequired,
  open: PropTypes.bool,
  test: PropTypes.bool,
  id: PropTypes.string
};

export default MenuMobile;