ar-design/dist/assets/css/components/navigation/menu/styles.css

AR Design is a (react | nextjs) ui library.

.ar-menu {
  width: 100%;
  padding: 0 0.25rem;
  font-family: var(--system);

  > ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;

    li {
      list-style: none;
      height: 2rem;

      > ul.submenu {
        display: grid;
        grid-template-rows: 0fr;
        margin-left: 1.5rem;
        opacity: 0;
        transform: translateY(-4px);
        transition:
          grid-template-rows 250ms ease,
          opacity 200ms ease,
          transform 200ms ease;
        overflow: hidden;

        > .submenu-inner {
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }

        &.opened {
          grid-template-rows: 1fr;
          opacity: 1;
          transform: translateY(0);
        }
      }

      .item-render {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        height: inherit;
        padding: 0.3rem;
        white-space: nowrap;
        cursor: pointer;

        &.align-center {
          justify-content: center;
        }

        &.align-left {
          justify-content: flex-start;
        }

        > hr {
          width: 100%;
          border: none;
          border-bottom: 1px solid currentColor;
          margin: 0.5rem 0;
        }

        > .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 2rem;
          min-height: 2rem;
          border-radius: var(--border-radius-pill);

          svg {
            color: var(--light);
          }

          > .no-icon::before {
            display: inline-block;
            content: "";
            width: 0.75rem;
            height: 0.75rem;
            border: dashed 2px transparent;
            border-top-color: var(--light);
            border-right-color: var(--light);
            border-left-color: rgba(var(--black-rgb), 0.1);
            border-bottom-color: rgba(var(--black-rgb), 0.1);
            transform: rotate(45deg);
          }
        }

        > .item {
          width: 100%;
          height: inherit;

          > * {
            display: flex;
            align-items: center;
            height: inherit;
          }
        }

        > .angel-down {
          position: absolute;
          right: 0.5rem;
          width: 0.75rem;
          height: 0.75rem;

          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px transparent;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: dashed;
            border-left-style: dashed;
            border-top-color: rgba(var(--black-rgb), 0.5);
            border-right-color: rgba(var(--black-rgb), 0.5);
            border-left-color: rgba(var(--black-rgb), 0.1);
            border-bottom-color: rgba(var(--black-rgb), 0.1);
            transform: rotate(45deg);
            transition: transform 200ms ease-in-out;
          }

          &.opened::before {
            transform: rotate(135deg);
          }
        }
      }

      &.divider {
        color: var(--black);
      }

      &.selected {
        color: var(--selected-icon-bg-color);

        .icon {
          background-color: var(--selected-icon-bg-color);
          box-shadow: 0 0 0 5px var(--selected-icon-bg-color-rgb);
          color: var(--white);

          svg {
            color: var(--white);
          }
        }

        .no-icon::before {
          border: solid 2px transparent;
          border-top-color: var(--light);
          border-right-color: var(--light);
          border-left-color: rgba(var(--black-rgb), 0.1);
          border-bottom-color: rgba(var(--black-rgb), 0.1);
        }
      }
    }
  }
}