Alpaca components for Magento 2

Nav 

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

    <div class="dashboard-nav__content">
        <ul class="list ">
            <li class="list__item dashboard-nav__item current">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    Account Dashboard
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    Account Information
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    Address Book
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    Downloadable Products
                </a>
            </li>
            <li class="list__item dashboard-nav__item ">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    My Orders
                </a>
            </li>
            <li class="list__item dashboard-nav__item ">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    My Credit Cards
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    Newsletter Subscriptions
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    Billing Agreements
                </a>
            </li>
            <li class="list__item dashboard-nav__item">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    My Product Reviews
                </a>
            </li>
            <li class="list__item dashboard-nav__item ">
                <a href="#" class="
                        link
                        dashboard-nav__link
                    ">
                    My Wishlist
                </a>
            </li>
        </ul>

    </div>
    <div class="dashboard-nav__actions">
        <a class="button button--secondary dashboard-nav__button" title="Sign out">
            Sign out
        </a>

    </div>

    <div class="dashboard-nav__section margin-top-xl">
        <div class="sidebar-block">
            <div class="sidebar-block__heading ">
                <h2 class="sidebar-block__title dashboard-nav__title">
                    Compare Products
                </h2>

                <span class="sidebar-block__counter">
                    3 items
                </span>
            </div>
            <ol class="list sidebar-block__list">
                <li class="sidebar-block__item">
                    <button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
                        <svg class="icon icon sidebar-block__remove-icon" role="img">
                            <title>Close</title>
                            <use href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                    <a class="link sidebar-block__link" href="#" title="Chaz Kangeroo Hoodie">
                        Chaz Kangeroo Hoodie
                    </a>

                </li>
                <li class="sidebar-block__item">
                    <button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
                        <svg class="icon icon sidebar-block__remove-icon" role="img">
                            <title>Close</title>
                            <use href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                    <a class="link sidebar-block__link" href="#" title="Bruno Compete Hoodie">
                        Bruno Compete Hoodie
                    </a>

                </li>
                <li class="sidebar-block__item">
                    <button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
                        <svg class="icon icon sidebar-block__remove-icon" role="img">
                            <title>Close</title>
                            <use href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                    <a class="link sidebar-block__link" href="#" title="Hero Hoodie">
                        Hero Hoodie
                    </a>

                </li>
            </ol>
            <div class="sidebar-block__actions">
                <a class="link sidebar-block__action" href="#" title="Compare">
                    Compare
                </a>

                <button class="button button--link sidebar-block__action" type="button">
                    Clear all
                </button>

            </div>
        </div>

    </div>

    <div class="dashboard-nav__section">
        <div class="sidebar-block">
            <div class="sidebar-block__heading ">
                <h2 class="sidebar-block__title dashboard-nav__title">
                    My Wish List
                </h2>

                <span class="sidebar-block__counter">
                    3 items
                </span>
            </div>
            <ol class="list sidebar-block__list">
                <li class="margin-bottom-m">
                    <div class="sidebar-block__item">
                        <div class="sidebar-block__product-image">
                            <a href="#">
                                <div class="lazyload-wrapper ">
                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                                </div>

                            </a>
                        </div>
                        <div class="sidebar-block__product-info">
                            <a href="#" class="link sidebar-block__link">
                                Chaz Kangeroo Hoodie
                            </a>
                            <div class="price ">
                                <span class="price__value ">
                                    $
                                    159.95

                                </span>
                            </div>

                        </div>
                    </div>
                    <div class="sidebar-block__actions">
                        <button class="button button--link sidebar-block__action" type="button">
                            Add to Cart
                        </button>

                        <button class="button button--link sidebar-block__action" type="button">
                            Remove this item
                        </button>

                    </div>
                </li>
                <li class="margin-bottom-m">
                    <div class="sidebar-block__item">
                        <div class="sidebar-block__product-image">
                            <a href="#">
                                <div class="lazyload-wrapper ">
                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                                </div>

                            </a>
                        </div>
                        <div class="sidebar-block__product-info">
                            <a href="#" class="link sidebar-block__link">
                                Bruno Compete Hoodie
                            </a>
                            <div class="price ">
                                <span class="price__value ">
                                    $
                                    159.95

                                </span>
                            </div>

                        </div>
                    </div>
                    <div class="sidebar-block__actions">
                        <button class="button button--link sidebar-block__action" type="button">
                            Add to Cart
                        </button>

                        <button class="button button--link sidebar-block__action" type="button">
                            Remove this item
                        </button>

                    </div>
                </li>
                <li class="margin-bottom-m">
                    <div class="sidebar-block__item">
                        <div class="sidebar-block__product-image">
                            <a href="#">
                                <div class="lazyload-wrapper ">
                                    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                                </div>

                            </a>
                        </div>
                        <div class="sidebar-block__product-info">
                            <a href="#" class="link sidebar-block__link">
                                Hero Hoodie
                            </a>
                            <div class="price ">
                                <span class="price__value ">
                                    $
                                    159.95

                                </span>
                            </div>

                        </div>
                    </div>
                    <div class="sidebar-block__actions">
                        <button class="button button--link sidebar-block__action" type="button">
                            Add to Cart
                        </button>

                        <button class="button button--link sidebar-block__action" type="button">
                            Remove this item
                        </button>

                    </div>
                </li>
            </ol>
            <a class="button button--secondary button--fluid" href="#">
                Go to Wish List
            </a>

        </div>

    </div>
</div>

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

    <div class="dashboard-nav__content">
        {{ render '@list--link' list }}
    </div>
    <div class="dashboard-nav__actions">
        {{ render '@button' signOutButton }}
    </div>

    {{#if dashboardNavCompare}}
        <div class="dashboard-nav__section margin-top-xl">
            {{ render '@sidebar-block' dashboardNavCompare merge=true}}
        </div>
    {{/if}}

    {{#if dashboardNavWishlist}}
        <div class="dashboard-nav__section">
            {{ render '@sidebar-block--wishlist' dashboardNavWishlist merge=true }}
        </div>
    {{/if}}
</div>

<script src="{{ static '../dashboard-nav/nav.js' }}"></script>
 
{
  "actualPage": "Account Dashboard",
  "list": {
    "class": "",
    "listTag": "ul",
    "elementTag": "li",
    "elements": [
      {
        "text": "Account Dashboard",
        "class": "dashboard-nav__item current",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "Account Information",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "Address Book",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "Downloadable Products",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "My Orders",
        "class": "dashboard-nav__item ",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "My Credit Cards",
        "class": "dashboard-nav__item ",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "Newsletter Subscriptions",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "Billing Agreements",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "My Product Reviews",
        "class": "dashboard-nav__item",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      },
      {
        "text": "My Wishlist",
        "class": "dashboard-nav__item ",
        "linkClass": "dashboard-nav__link",
        "link": "#"
      }
    ]
  },
  "signOutButton": {
    "tag": "a",
    "class": "button--secondary dashboard-nav__button",
    "attributes": "title=\"Sign out\"",
    "text": "Sign out"
  },
  "dashboardNavCompare": {
    "title": {
      "class": "sidebar-block__title dashboard-nav__title"
    }
  },
  "dashboardNavWishlist": {
    "title": {
      "class": "sidebar-block__title dashboard-nav__title"
    }
  }
}
  • Content: 
    $dashboard-nav__mobile-border                     : $border-base !default;
$dashboard-nav__mobile-border-width               : 0 0 $border-width-base !default;
$dashboard-nav__mobile-padding                    : $spacer--semi-medium 0 !default;
$dashboard-nav__mobile-font-weight                : $font-weight-bold !default;

$dashboard-nav__item-padding                      : 0 !default;
$dashboard-nav__item-transition                   : $transition-base !default;
$dashboard-nav__item-font-size\@large             : $font-size-medium !default;

$dashboard-nav__item-link-padding                 : $spacer--medium $spacer--extra-large $spacer--medium $spacer--medium !default;
$dashboard-nav__item-link-transform-after         : rotate(-45deg) translateY(-50%) !default;
$dashboard-nav__item-link-top-after               : 50% !default;

$dashboard-nav__link-padding                      : $spacer--medium !default;
$dashboard-nav__link-text-decoration              : none !default;
$dashboard-nav__link-bg-current                   : $gray-light !default;
$dashboard-nav__link-padding-current              : $spacer--medium calc(#{$spacer--semi-medium} + #{$spacer--extra-small}) $spacer--medium $spacer--medium;
$dashboard-nav__link-font-weight-current          : $font-weight-bold !default;
$dashboard-nav__link-color-current-hover          : initial !default;
$dashboard-nav__link-text-decoration-current-hover: none !default;
$dashboard-nav__link-bg-hover                     : $gray-light !default;
$dashboard-nav__link-font-weight-hover            : $font-weight-base !default;
$dashboard-nav__link-color-hover                  : initial !default;
$dashboard-nav__link-text-decoration-hover        : none !default;
$dashboard-nav__link-font-size                    : $font-size-base !default;

$dashboard-nav__actions-margin                    : $spacer--large 0 0 !default;
$dashboard-nav__actions-margin\@large             : $spacer--medium 0 0 !default;

$dashboard-nav__section-title-margin              : 0 !default;
$dashboard-nav__section-title-letter-spacing      : 1px !default;
$dashboard-nav__section-title-font-family         : $font-family-base !default;
$dashboard-nav__section-title-font-size           : $font-size-medium !default;
$dashboard-nav__section-info-margin               : $spacer--semi-medium 0 0 !default;

$dashboard-nav__button-min-width\@medium          : 320px !default;

%arrow:after {
    content: '';
    position: absolute;
    top: 35%;
    right: 20px;
    height: 10px;
    width: 10px;
    margin-top: 0;
    border-style: solid;
    border-color: transparent $color-secondary $color-secondary transparent;
    border-width: 2px;
    border-radius: 2px;
    pointer-events: none;
    transform: rotate(45deg);
    transition: $select__transition;
}

%arrow-active:after {
    top: 50%;
    border-color: transparent $color-secondary $color-secondary transparent;
    margin-top: 0;
    transform: rotate(225deg);
}
  • URL: /components/raw/dashboard-nav/_nav-variables.scss
  • Filesystem Path: build/components/Organisms/dashboard/nav/_nav-variables.scss
  • Size: 3 KB
  • Content: 
    @import 'nav-variables';

.dashboard-nav {
    &__mobile {
        @extend %arrow;

        display: block;
        position: relative;
        border: $dashboard-nav__mobile-border;
        border-width: $dashboard-nav__mobile-border-width;
        padding: $dashboard-nav__mobile-padding;
        font-weight: $dashboard-nav__mobile-font-weight;
        cursor: pointer;

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

        &--active {
            @extend %arrow-active;
        }
    }

    &__content {
        display: none;

        &--visible {
            display: block;
        }

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

    &__item {
        position: relative;
        padding: $dashboard-nav__item-padding;
        transition: $dashboard-nav__item-transition;
    }

    &__item > a,
    &__link {
        @extend %arrow;
        display: block;
        padding: $dashboard-nav__link-padding;
        text-decoration: $dashboard-nav__link-text-decoration;
        font-size: $dashboard-nav__link-font-size;

        &:after {
            transform: rotate(-45deg);
            @include mq($max-screen: $screen-l - 1px) {
                display: none;
            }
        }

        &:hover {
            background-color: $dashboard-nav__link-bg-hover;
            color: $dashboard-nav__link-color-hover;
            font-weight: $dashboard-nav__link-font-weight-hover;
            text-decoration: $dashboard-nav__link-text-decoration-hover;
        }
    }

    &__actions {
        display: flex;
        justify-content: center;
        margin: $dashboard-nav__actions-margin;

        @include mq($screen-l) {
            margin: $dashboard-nav__actions-margin\@large;
        }
    }

    &__button {
        width: 100%;

        @include mq($screen-m) {
            width: auto;
            min-width: $dashboard-nav__button-min-width\@medium;
        }

        @include mq($screen-l) {
            width: 100%;
            min-width: auto;
        }
    }

    &__logout-button {
        display: none;

        @include mq($screen-l) {
            display: flex;
        }

        &--mobile {
            display: flex;

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

    &__section {
        display: none;

        @include mq($screen-l) {
            display: flex;
            flex-direction: column;
        }
    }

    &__section-title {
        margin: $dashboard-nav__section-title-margin;
        font-family: $dashboard-nav__section-title-font-family;
        font-size: $dashboard-nav__section-title-font-size;
        letter-spacing: $dashboard-nav__section-title-letter-spacing;
    }

    &__section-info {
        margin: $dashboard-nav__section-info-margin;
    }

    // This class is changing by Magento
    .current {
        position: relative;
        background: $dashboard-nav__link-bg-current;

        .dashboard-nav__link {
            font-weight: $dashboard-nav__link-font-weight-current;

            &:hover {
                color: $dashboard-nav__link-color-current-hover;
                text-decoration: $dashboard-nav__link-text-decoration-current-hover;
            }
        }
    }

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

        @include mq($screen-l) {
            font-size: $dashboard-nav__item-font-size\@large;
        }

        &:not(.current) > a {
            padding: $dashboard-nav__item-link-padding;

            &:after {
                transform: $dashboard-nav__item-link-transform-after;
                top: $dashboard-nav__item-link-top-after;
            }
        }
    }

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

    .nav.item.current {
        @extend .dashboard-nav__link;

        padding: $dashboard-nav__link-padding-current;

        & > a {
            padding: 0;
            &:after {
                display: none;
            }
        }
    }

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

const content = document.querySelector('.dashboard-nav__content');
const currentItem = content.querySelector('.dashboard-nav__item.current');
const 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/Organisms/dashboard/nav/nav.js
  • Size: 447 Bytes

No notes defined.