website/src/_sass/_section-nav.sass

/*!
 *  Licensed to the Apache Software Foundation (ASF) under one or more
 *  contributor license agreements.  See the NOTICE file distributed with
 *  this work for additional information regarding copyright ownership.
 *  The ASF licenses this file to You under the Apache License, Version 2.0
 *  (the "License"); you may not use this file except in compliance with
 *  the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

.section-nav
  max-width: 250px
  position: fixed
  width: 100%
  overflow-y: auto
  background-color: #F7F7F7

  nav
    padding: 15px
    max-height: calc(100vh - 130px)

    ul
      list-style: none

    li
      margin-bottom: 5px

      &:last-child
        margin-bottom: 0

    .section-nav-list
      padding-left: 16px

    a
      font-size: 12px

    @media (max-width: $ak-breakpoint-lg)
      background-color: $color-white
      max-height: 100vh

    .active
      text-decoration: underline
      color: #0f3556

  &-back
    display: none
    padding: 15px

    @media (max-width: $ak-breakpoint-lg)
      display: block

  &-list-title
    display: block
    font-size: 12px
    position: relative
    margin-bottom: 5px

    &--collapsible
      cursor: pointer

  &-list-main-title
    display: block
    font-size: 12px
    font-weight: bold
    margin-bottom: 15px
    text-transform: uppercase

  &-item--collapsible
    cursor: pointer

    .section-nav-list
      display: none

    span:before
      content: ""
      position: absolute
      top: 2px
      left: -16px
      border-style: solid
      border-width: 5px 0 5px 8px
      border-color: transparent transparent transparent #3371e3
      transform: rotate(0deg)
      transition: 0.3s

  .expanded
    > span:before
      transform: rotate(90deg)


  @media (max-width: $ak-breakpoint-lg)
    background-color: $color-light-gray
    bottom: 0
    left: 0
    max-width: 256px
    position: fixed
    top: 0
    transition: transform 100ms linear
    width: calc(100% - 32px)
    z-index: 10000

    nav
      height: calc(100vh - 44px)
      overflow-y: auto

    &.closed
      transform: translateX(-100%)

    &.open
      transform: translateX(0)