tachybase_todo/.dumi/theme/components/SideMenu.less

@import (reference) '../style/variables.less';

.@{prefix}-menu {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  width: @s-menu-width;
  background-color: #f2f5fa;
  box-sizing: border-box;
  transition: left 0.3s;

  &[data-hidden] {
    display: none;
  }

  @media @mobile {
    left: -@s-menu-mobile-width;
    top: @s-mobile-nav-height;
    display: block !important;
    width: @s-menu-mobile-width;
    background-color: #fff;

    &[data-mobile-show] {
      left: 0;
    }
  }

  // shadow
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 20px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
    pointer-events: none;

    // use border on mobile devices
    @media @mobile {
      width: 1px;
      background: @c-border;
    }
  }

  &-header {
    position: relative;
    padding-top: 40px;
    text-align: center;
    border-bottom: 1px solid @c-border;

    @media @mobile {
      display: none;
    }

    .@{prefix}-menu-logo {
      display: inline-block;
      width: 66px;
      height: 65px;
      background: url(@img-logo) no-repeat 0 / contain;
    }

    h1 {
      margin: 10px 0 0;
      color: @c-heading;
      font-weight: 500;
      line-height: 1.40625;
    }

    p {
      margin: 0 0 5px;
      color: lighten(@c-secondary, 10%);

      // badges
      > object[data^='https://img.shields.io'] {
        max-height: 20px;
      }

      + p {
        margin-bottom: 10px;
      }
    }
  }

  &-doc-locale {
    padding: 16px 0;
    text-align: center;
    border-bottom: 1px solid @c-border;

    &:empty {
      display: none;
    }
  }

  &-inner {
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;

    // common list styles
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 16px;

      li {
        color: @c-text;
        a,
        > span {
          position: relative;
          display: block;
          padding-right: 24px;
          color: @c-heading;
          line-height: 2.4;
          text-decoration: none;
          outline: none;
          transition: color 0.3s, background 0.3s;

          span {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          &:hover,
          &.active {
            color: @c-primary;
          }

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -10px;
            margin-top: -2.5px;
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: @c-primary;
            border-radius: 50%;
            opacity: 0;
            transition: transform 0.2s, opacity 0.2s;
            transform: scale(0) translateX(-10px);
          }
        }

        &.active a,
        a.active {
          &::before {
            opacity: 1;
            transform: scale(1) translateX(0);
          }
        }

        // level larger, offset larger, font size smaller
        ul {
          font-size: 0.9em;
          padding-left: 1em;
        }
      }
    }

    // 1-level list styles
    > ul {
      > li > a {
        line-height: 2.875;

        &:not([href]) {
          padding-top: 24px;
          line-height: 1;
          font-weight: 500;
          color: @c-heading !important;
          background: transparent !important;
          cursor: default;
        }
      }

      > li:first-child > a:not([href]) {
        padding-top: 0;
      }
    }

    // n-level list styles
    > ul ul {
      a {
        color: @c-secondary;

        &.active {
          color: @c-primary;
        }
      }
    }

    .@{prefix}-menu-mobile-area {
      display: none;
      padding-bottom: 16px;
      margin-bottom: 16px;
      text-align: center;
      border-bottom: 1px solid @c-border;

      @media @mobile {
        display: block;
      }
    }

    // mobile nav list
    .@{prefix}-menu-nav-list {
      padding: 16px 0;

      > li,
      > li > a {
        padding-right: 0;
        line-height: 2.4;

        ul {
          padding-left: 0;

          a {
            padding-right: 0;
            font-size: 90%;
          }
        }
      }
    }

    // menu list
    .@{prefix}-menu-list {
      padding: 8px 0;
      margin-bottom: 40px;

      > li > a {
        @c-active-bg: #e8ecf4;

        padding-left: 28px;

        &.active {
          background: linear-gradient(to left, #e8ecf4, rgba(232, 236, 244, 0));
        }

        ~ ul {
          margin-top: 8px;
          margin-left: 28px;
        }

        @media @mobile {
          padding-left: 16px;

          ~ ul {
            margin-left: 16px;
          }
        }
      }
    }
  }

  &[data-mode='site'] {
    &::after {
      width: 1px;
      background: @c-border;
    }

    .@{prefix}-menu-list {
      padding: 0;

      > li > a {
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          display: block;
          width: 3px;
          background-color: @c-primary;
          visibility: hidden;
          opacity: 0;
          transition: all 0.3s;
          border-radius: 1px;
        }

        &.active {
          z-index: 1;
          background: linear-gradient(to left, #f8faff, rgba(248, 250, 255, 0));

          &::after {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }

    @media @desktop {
      top: @s-nav-height;
      width: @s-site-menu-width;
      padding-top: 50px;
      background: transparent;

      .@{prefix}-menu-nav,
      .@{prefix}-menu-header {
        display: none;
      }

      .@{prefix}-menu-list > li > a {
        padding-left: 58px;

        ~ ul {
          margin-left: 58px;
        }
      }
    }
  }
}