PDJ Brandbox

nav-in-page (version 2): Version 2 - medium width 

<div class="nav-in-page-v2 nav-in-page-v2--medium">
    <span class="nav-in-page-v2__anchor"></span>
    <div class="nav-in-page-v2__inner">

        <a href="#" class="nav-in-page-v2__label">
            <span class="link__label">Overview</span>
            <div class="link__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                </svg>
            </div>
        </a>

        <nav class="nav-in-page-v2__nav">
            <ul class="nav-in-page-v2__nav-items">
                <li class="nav-in-page-v2__nav-item">
                    <a href="#" class="nav-in-page-v2__link">
                        <span class="link__label">Overview</span>
                    </a>
                </li>
                <li class="nav-in-page-v2__nav-item">
                    <a href="#" class="nav-in-page-v2__link">
                        <span class="link__label">Videos</span>
                    </a>
                </li>
                <li class="nav-in-page-v2__nav-item">
                    <a href="#" class="nav-in-page-v2__link">
                        <span class="link__label">Specifications</span>
                    </a>
                </li>
                <li class="nav-in-page-v2__nav-item">
                    <a href="#" class="nav-in-page-v2__link">
                        <span class="link__label">Downloads</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="nav-in-page-v2__actions">
            <div class="nav-in-page-v2__actions-inner">
                <span>€ 1999</span>
                <a href="#" class="link link--colored">
                    <span class="link__label">Buy now</span>
                </a>

                <a href="#" target="_blank" class="action action--normal action--on-light">
                    <span class="action__label">Buy now</span>
                    <span class="action__bg"></span>
                </a>

            </div>
        </div>

    </div>
</div>
 
<div class="nav-in-page-v2{{#if modifier }} nav-in-page-v2--{{ modifier }}{{/if}}">
  <span class="nav-in-page-v2__anchor"></span>
  <div class="nav-in-page-v2__inner">

    {{#if items }}
      <a href="#" class="nav-in-page-v2__label">
        <span class="link__label">{{#if activeNav }}{{ activeNav }}{{else}}{{ label }}{{/if}}</span>
        <div class="link__icon">{{render '@icon-chevron' }}</div>
      </a>

      <nav class="nav-in-page-v2__nav">
        <ul class="nav-in-page-v2__nav-items">
          {{#each items }}
            <li class="nav-in-page-v2__nav-item{{#if (eq ../activeNav label) }} active{{/if}}">
              <a href="{{ href }}" class="nav-in-page-v2__link">
                <span class="link__label">{{ label }}</span>
              </a>
            </li>
          {{/each}}
        </ul>
      </nav>
    {{/if}}

    {{#if action}}
      <div class="nav-in-page-v2__actions">
        <div class="nav-in-page-v2__actions-inner">
          <span>{{#if outofstock}}Out of stock{{else}}€ 1999{{/if}}</span>
          {{render '@link--colored' actionMobile merge=true }}
          {{render '@action' action merge=true }}
        </div>
      </div>
    {{/if}}

  </div>
</div>
 
modifier: medium
label: Overview
items:
  - href: '#'
    label: Overview
  - href: '#'
    label: Videos
  - href: '#'
    label: Specifications
  - href: '#'
    label: Downloads
action:
  label: Buy now
  url: '#'
  • Content: 
    const NAVINPAGE_V2 = (function(window, undefined) {
  const settings = {
    mobileMaxWidth: 768,
    observer: { threshold: [0, .5, 1] },
  };

  const selectors = {
    wrapper: '.nav-in-page-v2',
    anchor: '.nav-in-page-v2__anchor',
    nav: '.nav-in-page-v2__nav',
    hero: '.hero-product__actions',
    label: '.nav-in-page-v2__label',
    header: '.header',
    stickyHero: '.js-sticky',
  };

  const classNames = {
    navMobile: 'nav-in-page-v2__nav--mobile',
    navDesktop: 'nav-in-page-v2__nav--desktop',
    noHeroAvailable: 'nav-in-page-v2--no-hero',
    noHeaderAvailable: 'nav-in-page-v2--no-header',
    isSticky: 'nav-in-page-v2--is-sticky',
    isStickySmall: 'nav-in-page-v2--is-sticky-small',
    isScroll: 'nav-in-page-v2--is-scroll',
    open: 'nav-in-page-v2--open',
    showActions: 'hero-is-out-view',
    hidden: 'hidden',
    stickyHeroCompact: 'hero-compact',
  }

  const el = {};
  const observer = {};

  const init = () => {
    getElements();

    if (!el.wrapper) {
      return;
    }

    if (!document.querySelectorAll(selectors.header).length) {
      el.wrapper.classList.add(classNames.noHeaderAvailable);
    }

    addEvents();
  };

  const getElements = () => {
    el.wrapper = document.querySelector(selectors.wrapper);

    if (!el.wrapper) {
      return;
    }

    el.anchor = el.wrapper.querySelector(selectors.anchor);
    el.label = el.wrapper.querySelector(selectors.label);
    el.hero = document.querySelector(selectors.hero);
    el.stickyHero = document.querySelector(selectors.stickyHero);
  };

  const addEvents = () => {
    window.addEventListener('resize', onResize);

    if (el.label) {
      el.label.addEventListener('click', e => {
        e.preventDefault();
        toggle();
      });
    }

    if (el.anchor) {
      el.wrapper.classList.add(classNames.isScroll);

      if (el.hero) {
        observer.anchorObserver = new window.IntersectionObserver(entries => {
          el.wrapper.classList.toggle(classNames.isSticky, !entries[0]?.isIntersecting);
          if (window.innerWidth < settings.mobileMaxWidth) {
            el.wrapper.classList.toggle(classNames.isScroll, !!entries[0]?.isIntersecting);
          } else {
            el.wrapper.classList.add(classNames.isScroll);
          }
        }, settings.observer);

        observer.anchorObserver.observe(el.anchor);
      } else {
        el.wrapper.classList.add(classNames.isScroll);
      }
    }

    if (el.hero) {
      observer.heroObserver = new window.IntersectionObserver(entries => {
        el.wrapper.classList.toggle(classNames.showActions, !entries[0]?.isIntersecting);
      }, settings.observer);

      observer.heroObserver.observe(el.hero);
    } else {
      el.wrapper.classList.add(classNames.noHeroAvailable);
    }

    if (el.stickyHero) {
      window.addEventListener('scroll', onScroll);
    }
  };

  const toggle = () => {
    if (el.wrapper.classList.contains(classNames.open)) {
      close();
    } else {
      open();
    }
  };

  const open = () => {
    el.wrapper.classList.add(classNames.open);
  };

  const close = () => {
    el.wrapper.classList.remove(classNames.open);
  };

  const onResize = () => {
    close();
    if (!observer.anchorObserver) {
      return;
    }
    observer.anchorObserver.unobserve(el.anchor);
    observer.anchorObserver.observe(el.anchor);
  };

  const onScroll = () => {
    if (el.wrapper && el.stickyHero) {
      const add = el.stickyHero.classList.contains(classNames.stickyHeroCompact);
      let top = el.stickyHero.getBoundingClientRect()?.height || 0;

      if (add) {
        el.wrapper.style.top = `${top}px`;
        el.wrapper.classList.add(classNames.isStickySmall);
      } else {
        el.wrapper.style.removeProperty('top');
        el.wrapper.classList.remove(classNames.isStickySmall);
      }
    }
  };

  document.addEventListener('DOMContentLoaded', init);
}(window));
  • URL: /components/raw/nav-in-page-v2/nav-in-page-v2.js
  • Filesystem Path: ../src/04_organisms/nav-in-page-v2/nav-in-page-v2.js
  • Size: 3.9 KB
  • Content: 
    .nav-in-page-v2 {
  $blockHeight: 56px;
  $blockHeightLarge: 56px;
  $transition: 250ms;
  $easing: ease-out;
  $maxWidth: 1140px + 16 + 16;
  $maxWidthSmall: 1000px + 8 + 8;
  $scrollGradientSize: 50px;

  position: sticky;
  top: var(--header-height);
  z-index: 998;
  transform: translateY(-1px);
  background-color: var(--color--neutrals-1);

  @media screen and (min-width: 768px) {
    background-color: var(--color--neutrals-0);
  }

  &--is-sticky,
  &--no-hero {
    border-bottom: var(--divider);
  }

  &.nav-in-page-v2--no-header {
    top: 0;
  }

  &:before {
    content: '';

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;

    display: block;
    height: 0;

    background-color: rgba(black, .2);
    opacity: 0;
    transition: opacity $transition $easing;
  }

  &.nav-in-page-v2--is-sticky.nav-in-page-v2--open:before {
    height: 100vh;
    opacity: 1;
  }

  &__anchor {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;

    display: block;
    height: 1px;

    transform: translateY(calc((var(--header-height) * -1) - 3px));

    .nav-in-page-v2--no-header & {
      transform: translateY(-3px);
    }
  }

  &__inner {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    min-height: $blockHeight;
    max-width: var(--section--9);
    margin: 0 auto;

    background-color: var(--color--neutrals-1);

    .nav-in-page-v2--medium & {
      max-width: calc(var(--section--8) + var(--gutter--bucket) + var(--gutter--bucket));
    }

    .nav-in-page-v2--small & {
      max-width: $maxWidthSmall;
    }

    @media screen and (min-width: 768px) {
      background-color: var(--color--neutrals-0);
      min-height: $blockHeightLarge;
    }

    .nav-in-page-v2--is-scroll &:after {
      content: '';

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;

      display: block;
      width: $scrollGradientSize;
      background: linear-gradient(-90deg, var(--color--neutrals-1) 10%, transparent 100%);
      pointer-events: none;

      @media screen and (min-width: 768px) {
        background: linear-gradient(-90deg, var(--color--neutrals-0) 10%, transparent 100%);
      }
    }

    .nav-in-page-v2--is-sticky {
      &:after {
        @media screen and (max-width: 767px) {
          display: none;
        }
      }
    }

    .nav-in-page-v2--is-sticky {
      max-width: $maxWidth;
    }
    .nav-in-page-v2--is-sticky-small {
      max-width: $maxWidthSmall;
    }
  }

  &__label {
    display: none;

    @media screen and (max-width: 767px) {
      justify-content: flex-start;
      align-items: center;

      height: $blockHeight;
      padding: var(--gap--1) var(--gutter--bucket);

      font-size: var(--h--7);
      font-weight: bold;
      line-height: 1;
      text-decoration: none !important;
      word-break: keep-all;
      color: inherit;

      transition: opacity 300ms;
      opacity: .6;

      cursor: pointer;

      html[lang="ja-JP"] & {
        font-size: 14px;
      }

      .link__icon {
        display: inline-flex;
        width: var(--p--2);
        height: var(--p--2);

        margin-left: var(--gap--2);
        color: var(--color--action);

        transition: transform 300ms;
        transform: rotate(90deg);

        .nav-in-page-v2--open & {
          transform: rotate(-90deg);
        }
      }

      &:active,
      &:focus,
      &:hover {
        opacity: 1;
        color: inherit;
      }

      .nav-in-page-v2--is-sticky & {
        display: flex;
      }
    }
  }

  &__nav {
    position: relative;
    display: none;

    .nav-in-page-v2--is-scroll & {
      position: relative;
      display: block;

      max-width: $maxWidth;
      overflow-x: auto;

      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      &::-webkit-scrollbar {
        display: none;
      }

      .nav-in-page-v2__nav-items {
        position: relative;
        z-index: 1;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        height: $blockHeight;

        @media screen and (min-width: 768px) {
          height: $blockHeightLarge;
        }
      }

      .nav-in-page-v2__nav-item {
        flex: 0 0 auto;

        @media screen and (min-width: 768px) {
          padding-right: var(--gap--2);
        }

        @media screen and (min-width: 940px) {
          padding-right: var(--gap--4);
        }

        &:last-child {
          padding-right: $scrollGradientSize;
        }
      }

      .nav-in-page-v2__link {
        position: relative;

        display: flex;
        justify-content: center;
        align-items: center;

        height: $blockHeight;
        padding: var(--gap--4) var(--gap--4) var(--gap--2) var(--gap--4);

        text-decoration: none;
        white-space: nowrap;
        color: var(--color--neutrals-6);
        transition: color 15ms ease-out;

        &:after {
          content: '';

          position: absolute;
          right: var(--gap--4);
          bottom: 0;
          left: var(--gap--4);
          z-index: 1;

          display: block;
          height: 4px;
          background: var(--color--action);

          transform: scale3d(1, 0, 1);
          transform-origin: center bottom;
        }

        @media screen and (max-width: 767px) {
          //&:active,
          //&:focus,
          &:hover {
            color: var(--color--hover);
          }
        }

        @media screen and (min-width: 768px) {
          height: $blockHeightLarge;
          background-color: transparent;

          &:after {
            transition: transform 150ms ease-out;
          }

          // &:active,
          // &:focus,
          &:hover {
            color: var(--color--neutrals-10);

            &:after {
              transform: scale3d(1, 1, 1);
            }
          }
        }
      }

      .nav-in-page-v2__nav-item.active .nav-in-page-v2__link {
        color: var(--color--neutrals-10);

        &:after {
          transform: scale3d(1, .8, 1);

          @media screen and (min-width: 768px) {
            transform: scale3d(1, 1, 1);
          }
        }
      }
    }

    .nav-in-page-v2--is-sticky & {
      @media screen and (max-width: 767px) {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1;

        display: block;
        padding: 0 var(--gutter--bucket);
        background-color: var(--color--neutrals-1);

        height: 0;
        overflow: hidden;

        opacity: 0;
        transition: opacity $transition $easing;

        .nav-in-page-v2__nav-item {
          padding: var(--gap--3) 0;
          border-bottom: var(--divider);

          &.active {
            display: none;
          }

          &:last-child {
            border-bottom: none;
          }
        }

        .nav-in-page-v2__link {
          color: inherit;
          text-decoration: none !important;
          font-size: var(--p--2);

          opacity: .6;
          transition: opacity 300ms;

          &:active,
          &:focus,
          &:hover,
          .active & {
            color: inherit;
            opacity: 1;
          }
        }
      }
    }

    .nav-in-page-v2--open & {
      height: auto;
      opacity: 1 !important;
    }
  }

  &__nav-items {
    margin: 0 !important;
    padding: 0;

    list-style: none;
  }

  &__actions {
    position: relative;
    z-index: 2;

    display: none;

    .nav-in-page-v2--is-sticky & {
    // .nav-in-page-v2--no-hero & {
      display: block;

      @media screen and (max-width: 767px) {
        html[lang="ja-JP"] & {
          font-size: 14px;
        }
      }
    }

    @media (min-width: 768px) {
      .nav-in-page-v2--no-hero & {
        display: block;
      }
      .nav-in-page-v2--is-sticky-small & {
        display: none;
      }
    }

    &:before {
      content: '';

      position: absolute;
      top: 0;
      right: 100%;
      bottom: 0;
      z-index: 1;

      display: block;
      width: $scrollGradientSize;
      background: linear-gradient(-90deg, var(--color--neutrals-1) 10%, transparent 100%);
      pointer-events: none;

      @media screen and (min-width: 768px) {
        background: linear-gradient(-90deg, var(--color--neutrals-0) 10%, transparent 100%);
      }
    }

    &-inner {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      padding-right: var(--gutter--bucket);
      height: $blockHeight;

      transition: opacity $transition $easing;
      opacity: 0;

      @media screen and (min-width: 768px) {
        height: $blockHeightLarge;
      }

      .hero-is-out-view & {
        opacity: 1;
      }

      .nav-in-page-v2--no-hero & {
        // display: none;
        opacity: 1;
      }

      & > * {
        white-space: nowrap;
        margin-left: var(--gap--4);
      }

      .link {
        display: inline-block;

        @media screen and (min-width: 768px) {
          display: none;
        }
      }

      .action {
        display: none;

        @media screen and (min-width: 768px) {
          display: inline-flex;
        }
      }

      .action--icon {
        min-width: 30px !important;
      }

      &:has(.action--icon.action--wheretobuy) {
        .action:not(.action--icon).action--wheretobuy {
          display: none;

          @media screen and (min-width: 1024px) {
            display: inline-flex;
          }
        }
        .action--icon.action--wheretobuy {
          display: inline-flex;

          @media screen and (min-width: 1024px) {
            display: none;
          }
        }
      }

      &:has(.action--icon.action--notifyme) {
        .action:not(.action--icon).action--notifyme {
          display: none;

          @media screen and (min-width: 1024px) {
            display: inline-flex;
          }
        }
        .action--icon.action--notifyme {
          display: inline-flex;

          @media screen and (min-width: 1024px) {
            display: none;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/nav-in-page-v2/nav-in-page-v2.scss
  • Filesystem Path: ../src/04_organisms/nav-in-page-v2/nav-in-page-v2.scss
  • Size: 10.2 KB

No notes defined.