@axeptio/design-system/src/_components/AppSidebar.jsx

Design System for Axeptio

import React, { useContext } from 'react';
import { MenuContext } from '../_contexts/menuContext';
import styled from 'styled-components';
import Link from 'next/link';
import data from './appSidebar.json';

const Root = styled.menu`
  z-index: 1000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: 20px;
  padding-top: 80px;
  background-color: #ffffff;
  overflow-y: auto;
  transform: translateY(-100%);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.87, 0, 0.13, 1);

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    position: sticky;
    top: 105px;
    width: 300px;
    height: auto;
    padding: 20px;
    padding-top: 0;
    flex-shrink: 0;
    transform: translate(0);
  }

  ${props =>
    props.open &&
    `
    transform: translate(0);
  `};

  .sidebar-title {
    margin-top: 10px;
    font-weight: 600;
  }

  > ul {
    & > li {
      margin-bottom: 10px;

      & + li {
        margin-top: 10px;
      }
    }
  }

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

    li > a,
    li > span {
      display: block;
      padding: 6px 8px;
      margin-bottom: 4px;
      font-size: 16px;
      line-height: 1.15;
      border-radius: 4px;

      &:focus {
        outline-offset: 0;
      }

      &:not(.coming-soon, .sidebar-title) {
        cursor: pointer;

        &:hover {
          background-color: rgba(0, 0, 0, 0.04);
        }
      }

      &.coming-soon {
        display: flex;
        align-items: baseline;
        gap: 8px;
        opacity: 0.45;

        &::after {
          content: 'coming soon';
          padding: 4px;
          font-size: 11px;
          line-height: 1;
          font-weight: 600;
          border-radius: 4px;
          text-align: center;
          text-transform: uppercase;
          white-space: nowrap;
          vertical-align: baseline;
          letter-spacing: 0.05em;
          color: rgb(40, 46, 104);
          background-color: rgb(237, 240, 253);
        }
      }
    }

    ul {
      position: relative;
      padding-left: 20px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 12px;
        bottom: 0;
        width: 1px;
        background: rgba(0, 0, 0, 0.05);
      }

      > li {
        text-transform: none;
      }

      li {
        font-weight: 400;
      }
    }
  }
`;

export default function AppSidebar() {
  const { active } = useContext(MenuContext);

  return (
    <Root open={active}>
      <ul>
        {data.map((data, index) => (
          <li key={data.name + index}>
            <span className="sidebar-title">{data.name}</span>
            <ul>
              {data.subCats.map((subMenu, index) => (
                <li key={subMenu.name + index}>
                  {subMenu.subCats?.length > 0 ? (
                    <>
                      <span className="sidebar-title">{subMenu.name}</span>
                      <ul>
                        {subMenu.subCats.map((subSubCat, index) => (
                          <li key={subSubCat.name + index}>
                            {subSubCat.active ? (
                              <Link href={subSubCat.url}>{subSubCat.name}</Link>
                            ) : (
                              <span className="coming-soon">{subSubCat.name}</span>
                            )}
                          </li>
                        ))}
                      </ul>
                    </>
                  ) : (
                    <>
                      {subMenu.active ? (
                        <Link href={subMenu.url}>{subMenu.name}</Link>
                      ) : (
                        <span className="coming-soon">{subMenu.name}</span>
                      )}
                    </>
                  )}
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </Root>
  );
}