@axeptio/design-system/build/src/Core/Menu/Desktop/dropDown.jsx

Design System for Axeptio

import React from 'react';
import styled from 'styled-components';
import Icon from '../../Icon';

const NavItemDropDownListItem = styled.li`
  position: relative;
  margin: 0px;
  margin-bottom: ${props => (props.margin ? '30px' : '10px')};
`;

const NavItemDropDownListContentArrow = styled.span`
  display: flex;
  opacity: 0;
  visibility: hidden;
  left: 5px;
  position: relative;
`;

const NavItemDropDownListContainer = styled.a`
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: start;
  align-items: center;
  cursor: pointer;

  &:link {
    text-decoration: none;
  }
  &:visited {
    text-decoration: none;
  }
  &:hover {
    text-decoration: none;
  }
  &:active {
    text-decoration: none;
  }

  & :hover ${NavItemDropDownListContentArrow} {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: all 0.25s cubic-bezier(0.5, 0, 0, 1);
  }
`;

const NavItemDropDownListImage = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
`;

const NavItemDropdownListImageContent = styled.img`
  object-fit: contain;
  margin-right: 10px;
`;

const NavItemDropDownListContent = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
`;

const NavItemDropDownListContentName = styled.span`
  font-weight: 600;
  font-style: normal;
  font-family: inherit;
  font-size: 17px;
  color: ${props => (props.color ? props.color : props.theme.colors.secondary)};
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
`;

const NavItemDropDownListContentDescription = styled.span`
  font-weight: 400;
  font-style: normal;
  font-family: inherit;
  font-size: 15px;
  color: ${props => (props.color ? props.color : props.theme.colors.grey.v400)};
`;

const NavItemDropdown = styled.div`
  width: 450px;
  padding: 30px 20px;
  background: #fff;
  border-radius: 16px;
`;

const NavItemDropDownList = styled.ul`
  display: flex;
  flex-direction: column;
  justify-content: start;
  list-style: none;
  margin: 0px;
  padding: 0px;
`;

const generateNavBar = (menu, test) => {
  let navbar = [];

  menu.forEach(one => {
    const obj = {
      title: one.name,
      dropdown: null
    };

    if (one?.submenu) {
      obj.dropdown = () => {
        let index = 0;
        let drop = [];
        for (let sub of one.submenu) {
          drop.push(
            <NavItemDropDownListItem margin={index !== one.submenu.length - 1} key={index * 10}>
              <NavItemDropDownListContainer href={sub?.link}>
                <NavItemDropDownListImage>
                  {sub?.img ? <NavItemDropdownListImageContent src={sub.img} /> : null}
                </NavItemDropDownListImage>
                <NavItemDropDownListContent>
                  <NavItemDropDownListContentName color={sub?.colorName}>
                    {sub.name}
                    <NavItemDropDownListContentArrow>
                      <Icon iconSize={20} name={test ? sub?.icon : 'ArrowNext'} />
                    </NavItemDropDownListContentArrow>
                  </NavItemDropDownListContentName>
                  <NavItemDropDownListContentDescription color={sub?.colorDescription}>
                    {sub.description}
                  </NavItemDropDownListContentDescription>
                </NavItemDropDownListContent>
              </NavItemDropDownListContainer>
            </NavItemDropDownListItem>
          );
          index += 1;
        }
        return (
          <NavItemDropdown>
            <NavItemDropDownList>{drop}</NavItemDropDownList>
          </NavItemDropdown>
        );
      };
    } else {
      obj.link = one.link;
    }

    navbar.push(obj);
  });

  return navbar;
};

export default generateNavBar;