Vechtsport Online Components for Magento 2

Nav 

<div class="dashboard-nav">
    <div class="dashboard-nav__mobile">
        Account Dashboard
    </div>

    <div class="dashboard-nav__content">
        <h1 class="heading heading--fifth-level dashboard-nav__title">
            My Account
        </h1>

        <ul class="list dashboard-nav__list">
            <li class="list__item dashboard-nav__item current">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Account Dashboard
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Account Gegevens
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Adres Gegevens
                </a>
            </li>
            <li class="list__item dashboard-nav__item ">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Mijn Bestellingen
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Mijn Downloadbare Producten
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Bestel met SKU
                </a>
            </li>
            <li class="list__item dashboard-nav__item ">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Mijn Wensenlijst
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Shoptegoed
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Cadeaukaart
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Gift Registry
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Nieuwsbrief Abonnementen
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Mijn Product Reviews
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Reward Points
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="link dashboard-nav__link link--invert">
                    Mijn Uitnodigingen
                </a>
            </li>
        </ul>
    </div>
</div>

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

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

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

<script src="{{ static '../dashboard-nav/nav.js' }}"></script>
 
{
  "title": "My Account",
  "actualPage": "Account Dashboard",
  "list": {
    "class": "dashboard-nav__list",
    "listTag": "ul",
    "elementTag": "li",
    "elements": [
      {
        "text": "Account Dashboard",
        "class": "dashboard-nav__item current",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Account Gegevens",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Adres Gegevens",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Mijn Bestellingen",
        "class": "dashboard-nav__item ",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Mijn Downloadbare Producten",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Bestel met SKU",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Mijn Wensenlijst",
        "class": "dashboard-nav__item ",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Shoptegoed",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Cadeaukaart",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Gift Registry",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Nieuwsbrief Abonnementen",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Mijn Product Reviews",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Reward Points",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      },
      {
        "text": "Mijn Uitnodigingen",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link link--invert",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    $dashboard-nav-padding: 15px !default;
$dashboard-nav-margin : 15px !default;

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

    &__mobile {
        display: block;
        position: relative;
        border-width: 1px 0;
        border-color: $gray-dark;
        border-style: solid;
        padding: $dashboard-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-lighter;
        padding: $dashboard-nav-padding;
        margin-bottom: $dashboard-nav-margin;

        &--visible {
            display: block;
        }

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

    &__list {
        margin: 0;
    }

    &__item {
        padding: 0;
        transition: $transition-base;

        &:hover {
            background-color: $white;
        }
    }

    &__title {
        margin-bottom: $dashboard-nav-margin;
        padding-bottom: 10px;
        border-bottom: 1px solid $gray;
    }

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

        &:hover {
            color: $red;
        }
    }

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

        &:hover {
            background-color: initial;
        }

        & > a {
            padding: 0;
        }
    }

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

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

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

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

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

mobileNav.innerHTML = currentItem.textContent;

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

There are no notes for this item.