Vebego Component Library

Mobile Nav 

<div id="mol-mobile-nav" class="mobile-nav-opened mobile-nav-has-quicklinks">

    <div class="mobile-nav-panel mobile-nav-panel-active" id="mobile-nav-panel-root">
        <div class='search-block block md:hidden'>
            <div class="mol-inline-search">
                <form action="#" method="get">
                    <div class="atm-form-input  ">
                        <input class="form-input" type="search" id="input" name="input">
                        <label class="atm-form-label form-label " for="input">Verhalen zoeken</label>

                        <span class="atm-icon form-input-error-icon far fa-times   "></span>
                        <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                    </div>

                    <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
                        <span class="button-content">

                            <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
                        </span>
                    </button>

                </form>
            </div>
        </div>
        <ul>
            <li>
                <a class="menu-link active" href="#" title="Impact" data-sub="0">
                    <span class="text">Impact</span>
                    <span class="atm-icon  far fa-chevron-right   "></span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Betekenisvol werk">
                    <span class="text">Betekenisvol werk</span>

                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Diensten en segmenten">
                    <span class="text">Diensten en segmenten</span>

                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Contact">
                    <span class="text">Contact</span>

                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Over Vebego">
                    <span class="text">Over Vebego</span>

                </a>
            </li>

        </ul>
        <div>
            <div class='mol-language-mobile-list'>
                <div>
                    <ul>
                        <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">English (EN)</a>
                        </li>
                        <li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Nederlands (NL)</a>
                        </li>
                        <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Deutsch (DE)</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <div class="mobile-nav-panel" id="mobile-nav-panel-0" data-parent="root">
        <ul>
            <li class="back-button">
                <a class="atm-button atm-button-primary button-sm  button-light">
                    <span class="button-content">
                        <span class="atm-icon  fal fa-angle-left   "></span>
                        <span>Terug</span>
                    </span>
                </a>

                <span class="label">Impact</span>
            </li>
            <li>
                <a class="menu-link active" href="#" title="Impact">
                    <span class="text">Impact</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Mijn project">
                    <span class="text">Mijn project</span>

                </a>
            </li>
            <li>
                <a class="menu-link active" href="#" title="Bouwreizen" data-sub="01">
                    <span class="text">Bouwreizen</span>
                    <span class="atm-icon  far fa-chevron-right   "></span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Partners">
                    <span class="text">Partners</span>

                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Blog" data-sub="03">
                    <span class="text">Blog</span>
                    <span class="atm-icon  far fa-chevron-right   "></span>
                </a>
            </li>
        </ul>
    </div>

    <div class="mobile-nav-panel" id="mobile-nav-panel-01" data-parent="0">
        <ul>
            <li class="back-button">
                <a class="atm-button atm-button-primary button-sm  button-light">
                    <span class="button-content">
                        <span class="atm-icon  fal fa-angle-left   "></span>
                        <span>Terug</span>
                    </span>
                </a>

                <span class="label">Bouwreizen</span>
            </li>
            <li>
                <a class="menu-link active" href="#" title="Bouwreizen">
                    <span class="text">Bouwreizen</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Meld je aan">
                    <span class="text">Meld je aan</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Planning">
                    <span class="text">Planning</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Sri Lanka">
                    <span class="text">Sri Lanka</span>
                </a>
            </li>
            <li>
                <a class="menu-link active" href="#" title="Marokko">
                    <span class="text">Marokko</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Ghana">
                    <span class="text">Ghana</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Zuid-Afrika">
                    <span class="text">Zuid-Afrika</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="mobile-nav-panel" id="mobile-nav-panel-03" data-parent="0">
        <ul>
            <li class="back-button">
                <a class="atm-button atm-button-primary button-sm  button-light">
                    <span class="button-content">
                        <span class="atm-icon  fal fa-angle-left   "></span>
                        <span>Terug</span>
                    </span>
                </a>

                <span class="label">Blog</span>
            </li>
            <li>
                <a class="menu-link " href="#" title="Blog">
                    <span class="text">Blog</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Nieuwste blogs">
                    <span class="text">Nieuwste blogs</span>
                </a>
            </li>
            <li>
                <a class="menu-link " href="#" title="Blog aanmelden">
                    <span class="text">Blog aanmelden</span>
                </a>
            </li>
        </ul>
    </div>

    <div class="mobile-nav-quicklinks">
        <a href="#">
            <span><span class="atm-icon  far fa-chevron-right  fa-xs "></span>Werken bij Hago</span>
        </a>
        <a href="#">
            <span><span class="atm-icon  far fa-chevron-right  fa-xs "></span>Inschrijven nieuwsbrief</span>
        </a>
    </div>
</div>
 
<div id="mol-mobile-nav" class="{{#if startOpened}}mobile-nav-opened{{/if}} {{#if quicklinks}}mobile-nav-has-quicklinks{{/if}}"> 

    {{!-- ROOT --}}
    <div class="mobile-nav-panel mobile-nav-panel-active" id="mobile-nav-panel-root">
        <div class='search-block block md:hidden'>{{render '@inline-search'}}</div>
        <ul>
            {{#each items}}
            <li>
                <a class="menu-link {{#if active}}active{{/if}}" href="{{href}}" title="{{text}}" {{#if subitems}}data-sub="{{@index}}" {{/if}}>
                    <span class="text">{{text}}</span>
                    {{#if subitems}}{{render '@icon' @root.chevron}}{{/if}}
                </a>
            </li>
            {{/each}}
          
        </ul>
         {{!-- LANGUAGE SELECT --}}
        <div>
            {{render '@language-mobile-list'}}
        </div>
    </div>

    

    {{!-- SUB LEVEL 1 --}}
    {{#each items}}
    {{#if subitems}}
    <div class="mobile-nav-panel" id="mobile-nav-panel-{{@index}}" data-parent="root">
        <ul>
            <li class="back-button">
                {{render '@button-primary--icon-left-sm' @root.backButton merge=true}}
                <span class="label">{{text}}</span>
            </li>
            <li>
                <a class="menu-link {{#if active}}active{{/if}}" href="{{href}}" title="{{text}}">
                    <span class="text">{{text}}</span>
                </a>
            </li>
            {{#each subitems}}
            <li>
                <a class="menu-link {{#if active}}active{{/if}}" href="{{href}}" title="{{text}}" {{#if subitems}}data-sub="{{@../index}}{{@index}}"
                    {{/if}}>
                    <span class="text">{{text}}</span>
                    {{#if subitems}}{{render '@icon' @root.chevron}}{{/if}}
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
    {{/if}}
    {{/each}}

    {{!-- SUB LEVEL 2 --}}
    {{#each items}}
    {{#if subitems}}
    {{#each subitems}}
    {{#if subitems}}
    <div class="mobile-nav-panel" id="mobile-nav-panel-{{@../index}}{{@index}}" data-parent="{{@../index}}">
        <ul>
            <li class="back-button">
                {{render '@button-primary--icon-left-sm' @root.backButton merge=true}}
                <span class="label">{{text}}</span>
            </li>
            <li>
                <a class="menu-link {{#if active}}active{{/if}}" href="{{href}}" title="{{text}}">
                    <span class="text">{{text}}</span>
                </a>
            </li>
            {{#each subitems}}
            <li>
                <a class="menu-link {{#if active}}active{{/if}}" href="{{href}}" title="{{text}}">
                    <span class="text">{{text}}</span>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
    {{/if}}
    {{/each}}
    {{/if}}
    {{/each}}

    {{!-- QUICK LINKS --}}
    {{#if quicklinks}}
    <div class="mobile-nav-quicklinks">
    {{#each quicklinks}}
    <a href="{{href}}">
        <span>{{render '@icon' @root.chevronSmall}}{{text}}</span>
    </a>
    {{/each}}
    </div>
    {{/if}}
</div>
 
{
  "startOpened": true,
  "chevron": {
    "style": "far",
    "icon": "fa-chevron-right"
  },
  "chevronSmall": {
    "style": "far",
    "icon": "fa-chevron-right",
    "size": "fa-xs"
  },
  "backButton": {
    "showTriangle": false,
    "lightVersion": true,
    "text": "Terug",
    "icon": {
      "style": "fal",
      "icon": "fa-angle-left"
    }
  },
  "items": [
    {
      "text": "Impact",
      "href": "#",
      "active": true,
      "subitems": [
        {
          "text": "Mijn project",
          "href": "#"
        },
        {
          "text": "Bouwreizen",
          "href": "#",
          "active": true,
          "subitems": [
            {
              "text": "Meld je aan",
              "href": "#"
            },
            {
              "text": "Planning",
              "href": "#"
            },
            {
              "text": "Sri Lanka",
              "href": "#"
            },
            {
              "text": "Marokko",
              "href": "#",
              "active": true
            },
            {
              "text": "Ghana",
              "href": "#"
            },
            {
              "text": "Zuid-Afrika",
              "href": "#"
            }
          ]
        },
        {
          "text": "Partners",
          "href": "#"
        },
        {
          "text": "Blog",
          "href": "#",
          "subitems": [
            {
              "text": "Nieuwste blogs",
              "href": "#"
            },
            {
              "text": "Blog aanmelden",
              "href": "#"
            }
          ]
        }
      ]
    },
    {
      "text": "Betekenisvol werk",
      "href": "#"
    },
    {
      "text": "Diensten en segmenten",
      "href": "#"
    },
    {
      "text": "Contact",
      "href": "#"
    },
    {
      "text": "Over Vebego",
      "href": "#"
    }
  ],
  "quicklinks": [
    {
      "text": "Werken bij Hago",
      "href": "#"
    },
    {
      "text": "Inschrijven nieuwsbrief",
      "href": "#"
    }
  ]
}
  • Content: 
    #mol-mobile-nav {
    @apply fixed left-0 right-0;
    @apply flex flex-col;
    @apply bg-white;
    @apply overflow-hidden;
    @apply md:hidden;
    @apply transform-gpu transition-transform -translate-x-full;
    top: 109px;
    bottom: 0;
    z-index: 999;

    &.mobile-nav-opened {
        @apply translate-x-0;
    }

    .mobile-nav-panel {
        @apply absolute w-full top-0 left-0 h-full;
        @apply bg-white;
        @apply px-4 pb-40;
        @apply transform-gpu transition-transform translate-x-full;
        @apply overflow-y-scroll;

        /* Hide scrollbar but keep functionality */
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        &.mobile-nav-panel-active {
            @apply translate-x-0;
        }

        > ul {
            > li {
                + li {
                    @apply mt-6;
                }

                > .menu-link {
                    @apply flex;
                    @apply font-display font-semibold text-lg no-underline;
                    @apply select-none;

                    &.active {
                        @apply text-cta;
                    }

                    .text {
                    }

                    .atm-icon {
                        @apply ml-auto;
                    }
                }

                &.back-button {
                    @apply flex items-center;

                    .atm-button {
                        @apply select-none;
                    }

                    .label {
                        @apply font-display font-medium text-sm ml-4;
                        @apply select-none;
                    }
                }
            }
        }
    }

    &.mobile-nav-has-quicklinks {
        .nav-panel {
            height: calc(100% - 90px);
        }
    }

    .mobile-nav-quicklinks {
        @apply flex absolute bottom-0 w-full;
        @apply border-gray-200 border-solid;
        height: 90px;
        border-top-width: 1px;
        background-color: #fff;

        > a {
            @apply flex w-1/2 items-center justify-center text-center p-2;
            @apply bg-white;

            + a {
                @apply border-gray-200 border-solid;
                border-left-width: 1px;
            }

            .atm-icon {
                @apply mr-1;
            }
        }

        &.mobile-nav-quicklinks.single-item {
            > a {
                @apply flex w-full items-center justify-center text-center p-2;
            }
        }
    }

    .search-block {
        @apply mb-10;
    }
}

.mobile-nav-opened {
    .alert {
        @apply hidden;
    }
}
  • URL: /components/raw/mobile-nav/mobile-nav.css
  • Filesystem Path: src\components\03-molecules\mobile-nav\mobile-nav.css
  • Size: 2.8 KB
  • Content: 
    (function () {


    'use strict';

    var $mobileNav = $('#mol-mobile-nav');

    $mobileNav.find('.menu-link').on('click', function (e) {
       
        var data = $(this).data('sub');

        if (typeof data !== 'undefined')
        {
            // Show nav-panel
            e.preventDefault();
            $('#mobile-nav-panel-' + data).addClass('mobile-nav-panel-active');
        }
    });

    $mobileNav.find('.back-button > a').on('click', function (e) {
       
        e.preventDefault();
        $(this).parents('.mobile-nav-panel').removeClass('mobile-nav-panel-active');
    });

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

No notes defined.