Vebego Component Library

Mobile Toggle 

<a id="mol-mobile-toggle">
    <span class="open">
        <span class="atm-icon  far fa-bars   fa-fw"></span>
    </span>
    <span class="close">
        <span class="atm-icon  far fa-times   fa-fw"></span>
    </span>
</a>
 
<a id="mol-mobile-toggle">
    <span class="open">
        {{!-- <span class="text">Menu</span> --}}
        {{render '@icon' iconOpen}}
    </span>
    <span class="close">
        {{!-- <span class="text">Sluiten</span> --}}
        {{render '@icon' iconClose}}
    </span>
</a>
 
{
  "iconOpen": {
    "style": "far",
    "icon": "fa-bars",
    "fixedWidth": true
  },
  "iconClose": {
    "style": "far",
    "icon": "fa-times",
    "fixedWidth": true
  }
}
  • Content: 
    #mol-mobile-toggle
{
    @apply font-display text-md text-gray-500;
    @apply inline-block;
    @apply cursor-pointer;
    @apply select-none;

    .atm-icon
    {
        @apply relative;
        top: 1px;
    }

    .open
    {
        @apply block;
    }

    .close
    {
        @apply hidden;
    }

    &.mobile-nav-opened
    {
        .open
        {
            @apply hidden;
        }
    
        .close
        {
            @apply block;
        }
    }
}
  • URL: /components/raw/mobile-toggle/mobile-toggle.css
  • Filesystem Path: src\components\03-molecules\mobile-toggle\mobile-toggle.css
  • Size: 508 Bytes
  • Content: 
    (function () {


    'use strict';

    $('#mol-mobile-toggle').on('click', function (e) {

        e.preventDefault();
        $('html, #mol-mobile-nav, #mol-mobile-toggle').toggleClass('mobile-nav-opened');
    });

})();
  • URL: /components/raw/mobile-toggle/mobile-toggle.js
  • Filesystem Path: src\components\03-molecules\mobile-toggle\mobile-toggle.js
  • Size: 234 Bytes

No notes defined.