Vechtsport Online Components for Magento 2

Sidebar Nav 

<div class="sidebar-nav">
    <div class="sidebar-nav__mobile">
        Customer Service
    </div>

    <div class="sidebar-nav__content">
        <h3 class="heading heading--fifth-level sidebar-nav__title">
            Customer Service
        </h3>

        <ul class="list sidebar-nav__list">
            <li class="list__item sidebar-nav__item current">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Veelgestelde Vragen
                </a>
            </li>
            <li class="list__item sidebar-nav__item">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Ruilen / Retourneren
                </a>
            </li>
            <li class="list__item sidebar-nav__item">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Garantie
                </a>
            </li>
            <li class="list__item sidebar-nav__item ">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Betaal Mogelijkheden
                </a>
            </li>
            <li class="list__item sidebar-nav__item">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Klachten
                </a>
            </li>
            <li class="list__item sidebar-nav__item">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Privacy &amp; Veiligheid
                </a>
            </li>
            <li class="list__item sidebar-nav__item ">
                <a href="#" class="link sidebar-nav__link link--invert">
                    Contact
                </a>
            </li>
        </ul>
    </div>
</div>

<script src="/components/raw/list/../sidebar-nav/sidebar-nav.js"></script>
 
<div class="sidebar-nav">
    <div class="sidebar-nav__mobile">
        {{ actualPage }}
    </div>

    <div class="sidebar-nav__content">
        <h3 class="heading heading--fifth-level sidebar-nav__title">
            {{ title }}
        </h3>

        {{> '@list--link' list }}
    </div>
</div>

<script src="{{ static '../sidebar-nav/sidebar-nav.js' }}"></script>
 
{
  "title": "Customer Service",
  "actualPage": "Customer Service",
  "list": {
    "class": "sidebar-nav__list",
    "listTag": "ul",
    "elementTag": "li",
    "elements": [
      {
        "text": "Veelgestelde Vragen",
        "class": "sidebar-nav__item current",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Ruilen / Retourneren",
        "class": "sidebar-nav__item",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Garantie",
        "class": "sidebar-nav__item",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Betaal Mogelijkheden",
        "class": "sidebar-nav__item ",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Klachten",
        "class": "sidebar-nav__item",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Privacy & Veiligheid",
        "class": "sidebar-nav__item",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Contact",
        "class": "sidebar-nav__item ",
        "linkClass": "sidebar-nav__link link--invert",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    $sidebar-nav-padding: 15px !default;
$sidebar-nav-margin : 15px !default;

.sidebar-nav {
    margin-bottom: $sidebar-nav-margin;

    &__mobile {
        display: block;
        position: relative;
        border-width: 3px 0;
        border-color: $red;
        border-style: solid;
        padding: $sidebar-nav-padding 0;
        cursor: pointer;

        @include mq($screen-m) {
            display: none;
        }

        &:after {
            content: '\25bc';
            position: absolute;
            width: 15px;
            height: 15px;
            right: 15px;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        &--active {
            &:after {
                content: '\25b2';
            }
        }
    }

    &__content {
        display: none;
        background-color: $gray-lightest;
        padding: $sidebar-nav-padding;
        margin-bottom: $sidebar-nav-margin;
        border-radius: $border-radius;

        &--visible {
            display: block;
        }

        @include mq($screen-m) {
            display: block;
        }
    }

    &__list {
        margin: 0;
    }

    &__item {
        padding: 0;
        &:hover {
            background-color: $red;
            & a {
                color: $white;
            }
        }
        &.current {
            background-color: $gray-lightest;
            &:hover {
                & a {
                    color: $black;
                }
            }
        }
    }

    &__title {
        margin-bottom: $sidebar-nav-margin;
        padding-bottom: 10px;
        color: $red;
        font-size: 14px;
        border-bottom: 2px solid $red;
    }

    &__item > a,
    &__link {
        display: block;
        padding: 15px;
    }

    // This class is changing by Magento
    .current {
        position: relative;
        padding: $sidebar-nav-padding $sidebar-nav-padding $sidebar-nav-padding ($sidebar-nav-padding * 2);
        margin-left: -$sidebar-nav-margin;
        border-left: 2px solid $red;
        color: $red;

        &:hover {
            background-color: initial;
        }

        & > a {
            padding: 0;
        }
    }

    // This classes to disabled links module
    .nav.item {
        @extend .list__item;
        @extend .sidebar-nav__item;
    }

    .nav.item.current {
        @extend .current;
    }

    .nav.item.current {
        & > a {
            color: $red;
        }
    }

    .nav.item > a {
        @extend .link--invert;
    }
}
  • URL: /components/raw/sidebar-nav/_sidebar-nav.scss
  • Filesystem Path: build/components/03-modules/cms/sidebar-nav/_sidebar-nav.scss
  • Size: 2.5 KB
  • Content: 
    'use strict'

const content     = document.querySelector('.sidebar-nav__content'),
      currentItem = content.querySelector('.sidebar-nav__item.current'),
      mobileNav   = document.querySelector('.sidebar-nav__mobile');

mobileNav.innerHTML = currentItem.textContent;

mobileNav.addEventListener('click', () => {
  mobileNav.classList.toggle('sidebar-nav__mobile--active');
  content.classList.toggle('sidebar-nav__content--visible');
});
  • URL: /components/raw/sidebar-nav/sidebar-nav.js
  • Filesystem Path: build/components/03-modules/cms/sidebar-nav/sidebar-nav.js
  • Size: 443 Bytes

There are no notes for this item.