<div class="side-menu ">
    <button class="button button--icon modal-trigger side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
        <svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
            <title>Mobile-menu</title>
            <use href="/images/icons-sprite.svg#mobile-menu"></use>
        </svg>

    </button>

    <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
        <div role="document" class="modal__container side-menu__container" tabindex="0">
            <div class="modal__content side-menu__content">

                <div class="modal__middle side-menu__content-middle">

                    <div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                                    dropdown title

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </button>

                                <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                                    <div id="" class="dropdown-list dropdown-list--inner">
                                        <ul class="dropdown-list__list">
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
                                                    Item name

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
                                                                    sublist item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sub sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sub sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
                                                    Item name

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                ">
                                                <a class="dropdown-list__label " href="#">
                                                    Item name

                                                </a>

                                            </li>
                                            <li class="
                    dropdown-list__item
                ">
                                                <a class="dropdown-list__label " href="#">
                                                    Item name

                                                </a>

                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </li>
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
                                    dropdown title

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
                                    <div id="" class="dropdown-list dropdown-list--inner">
                                        <ul class="dropdown-list__list">
                                            <li class="
                    dropdown-list__item
                ">
                                                <a class="dropdown-list__label " href="#">
                                                    Item name

                                                </a>

                                            </li>
                                            <li class="
                    dropdown-list__item
                ">
                                                <a class="dropdown-list__label " href="#">
                                                    Item name

                                                </a>

                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </li>
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
                                    dropdown title

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
                                    <div id="" class="dropdown-list dropdown-list--inner">
                                        <ul class="dropdown-list__list">
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
                                                    Item name

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                ">
                                                <a class="dropdown-list__label " href="#">
                                                    Item name

                                                </a>

                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
                                                    Item name

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
                                                    Item name

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
                                                    item name

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    sublist item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('dropdown-default'));
                    </script>

                </div>

                <div class="modal__bottom side-menu__content-bottom">
                    <div class="modal__bottom-actions side-menu__bottom-actions">
                        <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                            <div class="contact-bar contact-bar--vertical">
                                <div class="contact-bar__wrapper">
                                    <div class="contact-bar__container ">
                                        <ul class="list contact-bar__list">
                                            <li class="list-item contact-bar__item">
                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                        Account
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="list-item contact-bar__item">
                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                        Blog
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="list-item contact-bar__item">
                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                        Contact
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                            <li class="list-item contact-bar__item">
                                                <a href="tel:8002669590" class="
                            contact-bar__link
                            
                        ">
                                                    <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                                        <svg class="icon " role="img">
                                                            <title>Phone</title>
                                                            <use href="/images/icons-sprite.svg#phone"></use>
                                                        </svg>

                                                    </span>
                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                        Call us for free 800 - 266 - 9590
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="contact-bar__item">
                                                <a href="mailto:test@test.com" class="
                            contact-bar__link
                            
                        ">
                                                    <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                                        <svg class="icon " role="img">
                                                            <title>Email</title>
                                                            <use href="/images/icons-sprite.svg#envelope"></use>
                                                        </svg>

                                                    </span>
                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                        Email Us
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
                <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                    <title>Close</title>
                    <use href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>

        </div>
    </div>
    <script type="text/javascript">
        new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
    </script>

</div>
<div class="side-menu {{ class }}">
    {{ render '@button--icon' sideMenuTrigger }}
    {{ render '@modal--tertiary' sideMenuModal }}
</div>
{
  "sideMenuTrigger": {
    "tag": "button",
    "class": "modal-trigger side-menu__trigger",
    "attributes": "type=\"button\" data-modal-trigger=\"side-menu\" aria-label=\"Open menu\"",
    "icon": {
      "id": "mobile-menu",
      "title": "Mobile-menu",
      "class": "side-menu__trigger-icon",
      "hidden": true
    }
  },
  "sideMenuModal": {
    "trigger": false,
    "modal": {
      "id": "side-menu",
      "class": "modal--tertiary side-menu__modal"
    },
    "modalContainer": {
      "class": "side-menu__container"
    },
    "modalContent": {
      "class": "side-menu__content"
    },
    "modalMiddle": true,
    "modalMiddleClass": "side-menu__content-middle",
    "modalComponent": {
      "content": "dropdown-list--with-nested"
    },
    "modalBottom": true,
    "modalBottomClass": "side-menu__content-bottom",
    "modalBottomActionsClass": "side-menu__bottom-actions",
    "modalBottomActions": [
      {
        "content": "contact-bar--vertical",
        "class": "side-menu__bottom-action"
      }
    ],
    "buttonClose": {
      "tag": "button",
      "text": "",
      "class": "button--rotate-icon modal__close-button side-menu__close-button",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "button__icon modal__close-button-icon"
      },
      "attributes": "type=\"button\" aria-label=\"click to close the modal\""
    }
  }
}
  • Content:
    $side-menu__bq-visibility-max                  : $screen-l !default;
    
    $side-menu__trigger-bg-color                   : $white !default;
    $side-menu__trigger-padding\@medium            : 0 $spacer 0 0 !default;
    $side-menu__trigger-margin\@medium             : 0 !default;
    $side-menu__trigger-border\@medium             : 1px solid $gray !default;
    $side-menu__trigger-border-width\@medium       : 0 1px 0 0 !default;
    
    $side-menu__bg-color                           : $white !default;
    
    $side-menu__modal-container-top                : 112px !default;
    $side-menu__modal-container-top\@medium        : 82px !default;
    $side-menu__modal-container-padding            : 0 $spacer--semi-medium !default;
    $side-menu__modal-container-max-width          : 100% !default;
    $side-menu__modal-container-max-height         : calc(100vh - #{$side-menu__modal-container-top}) !default;
    $side-menu__modal-container-max-height\@medium : calc(100vh - #{$side-menu__modal-container-top\@medium}) !default;
    $side-menu__modal-container-box-shadow         : none !default;
    
    $side-menu__modal-content-max-width            : 496px !default;
    $side-menu__modal-content-margin               : 0 auto !default;
    
    $side-menu__modal-middle-padding               : $spacer--medium 0 0 !default;
    
    $side-menu__modal-bottom-border                : 0 !default;
    $side-menu__modal-bottom-padding               : $spacer--semi-large 0 0 !default;
    $side-menu__modal-bottom-actions-max-width     : 100% !default;
    $side-menu__modal-bottom-actions-margin        : 0 !default;
    $side-menu__modal-bottom-action-width          : 100% !default;
    
    $side-menu__modal-close-button-top             : -56px !default;
    $side-menu__modal-close-button-right           : unset !default;
    $side-menu__modal-close-button-left            : $spacer !default;
    $side-menu__modal-close-button-top\@medium     : -65px !default;
    $side-menu__modal-close-button-left\@medium    : 12px !default;
    $side-menu__modal-close-button-bg              : $white !default;
    
    $side-menu__modal-close-button-text-z-index    : $z-index-low !default;
    $side-menu__modal-close-button-text-margin     : 0 0 0 $spacer--medium !default;
    $side-menu__modal-close-button-text-color      : $color-primary !default;
    $side-menu__modal-close-button-text-font-family: $font-family-secondary !default;
    $side-menu__modal-close-button-text-font-size  : $font-size-medium !default;
    $side-menu__modal-close-button-text-font-weight: $font-weight-normal !default;
    
  • URL: /components/raw/side-menu/_side-menu-variables.scss
  • Filesystem Path: build/components/Organisms/side-menu/_side-menu-variables.scss
  • Size: 2.5 KB
  • Content:
    @import 'side-menu-variables';
    
    .side-menu {
        @include mq($side-menu__bq-visibility-max) {
            display: none;
        }
    
        &__trigger {
            background-color: $side-menu__trigger-bg-color;
    
            @include mq($screen-m) {
                border: $side-menu__trigger-border\@medium;
                border-width: $side-menu__trigger-border-width\@medium;
                padding: $side-menu__trigger-padding\@medium;
                margin: $side-menu__trigger-margin\@medium;
            }
        }
    
        &__modal {
            background: $side-menu__bg-color;
        }
    
    
        &__container {
            margin-top: $side-menu__modal-container-top;
            max-width: $side-menu__modal-container-max-width;
            box-shadow: $side-menu__modal-container-box-shadow;
            padding: $side-menu__modal-container-padding;
            max-height: $side-menu__modal-container-max-height;
    
            @include mq($screen-m) {
                max-height: $side-menu__modal-container-max-height\@medium;
                margin-top: $side-menu__modal-container-top\@medium;
            }
        }
    
        &__content {
            max-width: $side-menu__modal-content-max-width;
            margin: $side-menu__modal-content-margin;
            overflow-y: auto;
            @include hide-scrollbar();
        }
    
        &__content-middle {
            padding: $side-menu__modal-middle-padding;
            overflow: visible;
        }
    
        &__content-bottom {
            padding: $side-menu__modal-bottom-padding;
            border: $side-menu__modal-bottom-border;
        }
    
        &__bottom-actions {
            max-width: $side-menu__modal-bottom-actions-max-width;
            margin: $side-menu__modal-bottom-actions-margin;
        }
    
        &__bottom-action {
            width: $side-menu__modal-bottom-action-width;
            flex-basis: $side-menu__modal-bottom-action-width;
        }
    
        &__close-button {
            top: $side-menu__modal-close-button-top;
            right: $side-menu__modal-close-button-right;
            left: $side-menu__modal-close-button-left;
            background: $side-menu__modal-close-button-bg;
    
            @include mq($screen-m) {
                top: $side-menu__modal-close-button-top\@medium;
                left: $side-menu__modal-close-button-left\@medium;
            }
        }
    
        &__close-button-text {
            z-index: $side-menu__modal-close-button-text-z-index;
            margin: $side-menu__modal-close-button-text-margin;
            color: $side-menu__modal-close-button-text-color;
            font-family: $side-menu__modal-close-button-text-font-family;
            font-size: $side-menu__modal-close-button-text-font-size;
            font-weight: $side-menu__modal-close-button-text-font-weight;
        }
    }
    
  • URL: /components/raw/side-menu/_side-menu.scss
  • Filesystem Path: build/components/Organisms/side-menu/_side-menu.scss
  • Size: 2.6 KB
  • Content:
    'use strict';
    
    class SideMenu {
      constructor() {
        this.sideMenuContainer = document.querySelector('.side-menu');
        this.sideMenuOverlay = this.sideMenuContainer.querySelector('.side-menu__overlay');
        this.menuTrigger = this.sideMenuContainer.querySelectorAll('.side-menu__trigger');
        this.init();
      }
    
      toggleSideMenu() {
        this.sideMenuContainer.classList.toggle('side-menu--is-open');
    
        if (this.sideMenuContainer.classList.contains('side-menu--is-open')) {
          document.body.style.overflow = 'hidden';
        }
        else {
          document.body.style.overflow = 'auto';
        }
      }
    
      setListeners() {
        this.menuTrigger.forEach(el => {
          el.addEventListener('click', () => {
            this.toggleSideMenu();
          });
        });
    
        this.sideMenuOverlay.addEventListener('click', () => {
          this.toggleSideMenu();
        });
      }
    
      init() {
        this.setListeners();
      }
    }
    
    new SideMenu();
    
  • URL: /components/raw/side-menu/side-menu.js
  • Filesystem Path: build/components/Organisms/side-menu/side-menu.js
  • Size: 907 Bytes

No notes defined.