<div class="navigation-a-z__wrapper js-navigation-a-z">
    <div class="navigation-a-z__container">
        <nav class="navigation-a-z">
            <ul class="navigation-a-z__list">
                <li class="navigation-a-z__list-item navigation-a-z__list-item--active"><a class="navigation-a-z__link" href="#">A</a>
                    <div class="navigation-a-z__marker"></div>
                </li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">B</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">C</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">D</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">E</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">F</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">G</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">H</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">I</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">J</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">K</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">L</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">M</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">N</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">O</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">P</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">Q</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">R</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">S</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">T</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">U</a></li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">V</a></li>
                <li class="navigation-a-z__list-item navigation-a-z__list-item--disabled">
                    <div class="navigation-a-z__link">X</div>
                </li>
                <li class="navigation-a-z__list-item navigation-a-z__list-item--disabled">
                    <div class="navigation-a-z__link">Y</div>
                </li>
                <li class="navigation-a-z__list-item"><a class="navigation-a-z__link" href="#">Z</a></li>
            </ul>
        </nav>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render slider
.navigation-a-z__wrapper.js-navigation-a-z
  .navigation-a-z__container
    nav.navigation-a-z&attributes(attr)
      ul.navigation-a-z__list
        if letters
          each letter in letters
            if letter.default
              li.navigation-a-z__list-item.navigation-a-z__list-item--active
                a.navigation-a-z__link(href='#') #{letter.label}
                .navigation-a-z__marker
            else if letter.disabled
              li.navigation-a-z__list-item.navigation-a-z__list-item--disabled
                .navigation-a-z__link #{letter.label}
            else
              li.navigation-a-z__list-item
                a.navigation-a-z__link(href='#') #{letter.label}
{
  "letters": [
    {
      "label": "A",
      "default": true
    },
    {
      "label": "B"
    },
    {
      "label": "C"
    },
    {
      "label": "D"
    },
    {
      "label": "E"
    },
    {
      "label": "F"
    },
    {
      "label": "G"
    },
    {
      "label": "H"
    },
    {
      "label": "I"
    },
    {
      "label": "J"
    },
    {
      "label": "K"
    },
    {
      "label": "L"
    },
    {
      "label": "M"
    },
    {
      "label": "N"
    },
    {
      "label": "O"
    },
    {
      "label": "P"
    },
    {
      "label": "Q"
    },
    {
      "label": "R"
    },
    {
      "label": "S"
    },
    {
      "label": "T"
    },
    {
      "label": "U"
    },
    {
      "label": "V"
    },
    {
      "label": "X",
      "disabled": true
    },
    {
      "label": "Y",
      "disabled": true
    },
    {
      "label": "Z"
    }
  ]
}
  • Content:
    class NavigationAZ {
      constructor($el) {
        this.$el = $el;
        this.$container = this.$el.querySelector('.navigation-a-z__container');
        this.$selectedLetter = this.$el.querySelector('.navigation-a-z__list-item--active');
    
        this.centerSelectedLetter();
      }
    
      centerSelectedLetter() {
        if (!this.isLetterInViewport()) {
          this.$container.scrollLeft = this.$selectedLetter.getBoundingClientRect().left;
        }
      }
    
      isLetterInViewport() {
        const rect = this.$selectedLetter.getBoundingClientRect();
    
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    }
    
    document
      .querySelectorAll('.js-navigation-a-z')
      .forEach($nav => new NavigationAZ($nav));
    
  • URL: /components/raw/navigation-a-z/navigation-a-z.js
  • Filesystem Path: src/components/organisms/navigation-a-z/navigation-a-z.js
  • Size: 852 Bytes
  • Content:
    $navigation-a-z-border-radius: 2px;
    $navigation-a-z-marker-size: 8px;
    $navigation-a-z-breakpoint: l;
    
    .navigation-a-z__wrapper {
      overflow: visible;
      width: 100%;
    
      @include mq($until: $navigation-a-z-breakpoint) {
        bottom: 0;
        left: 0;
        position: fixed;
        z-index: z('header');
      }
    }
    
    .navigation-a-z__container {
      overflow-x: scroll;
      overflow-y: hidden;
      padding-top: 10px;
      width: 100%;
    
      @include mq($from: $navigation-a-z-breakpoint) {
        overflow-x: visible;
        padding-bottom: 10px;
        padding-top: 0;
      }
    }
    
    .navigation-a-z {
      background-color: $color-blue-light;
      color: #fff;
      font-size: 1.3rem;
      height: 4rem;
    
      @include mq($until: $navigation-a-z-breakpoint) {
        width: 1000px;
      }
    
      @include mq($from: $navigation-a-z-breakpoint) {
        border-radius: $navigation-a-z-border-radius;
      }
    }
    
    .navigation-a-z__list {
      @include list-reset();
    
      display: flex;
      height: 100%;
      justify-content: space-between;
      width: 100%;
    }
    
    .navigation-a-z__list-item {
      border-right: 1px solid $color-blue;
      flex-grow: 1;
      position: relative;
    
      &:first-child {
        @include mq($from: $navigation-a-z-breakpoint) {
          border-radius: $navigation-a-z-border-radius 0 0 $navigation-a-z-border-radius;
        }
      }
    
      &:last-child {
        border-right: 0;
    
        @include mq($from: $navigation-a-z-breakpoint) {
          border-radius: 0 $navigation-a-z-border-radius $navigation-a-z-border-radius 0;
        }
      }
    }
    
    .navigation-a-z__list-item--active {
      background-color: $color-blue;
    }
    
    .navigation-a-z__list-item--disabled {
      color: $color-blue;
      pointer-events: none;
    }
    
    .navigation-a-z__link {
      bottom: 0;
      left: 0;
      padding: 10px 15px;
      position: absolute;
      right: 0;
      top: 0;
    
      @include mq($from: l) {
        padding: 10px;
      }
    }
    
    .navigation-a-z__marker {
      border-color: $color-blue transparent transparent transparent;
      border-style: solid;
      border-width: $navigation-a-z-marker-size $navigation-a-z-marker-size 0;
      bottom: 5 * $navigation-a-z-marker-size;
      height: 0;
      left: 50%;
      position: absolute;
      transform: translate(-50%, 0%) rotate(180deg);
      width: 0;
    
      @include mq($from: $navigation-a-z-breakpoint) {
        bottom: -$navigation-a-z-marker-size;
        transform: translate(-50%, 0%);
      }
    }
    
  • URL: /components/raw/navigation-a-z/navigation-a-z.scss
  • Filesystem Path: src/components/organisms/navigation-a-z/navigation-a-z.scss
  • Size: 2.2 KB
  • Handle: @navigation-a-z
  • Preview:
  • Filesystem Path: src/components/organisms/navigation-a-z/navigation-a-z.pug

There are no notes for this item.