Vebego Component Library

Header Nav 

<nav class="mol-header-mobile-nav">
    <ul class="-active">
        <li class="active">
            <div class="atm-nav-link" data-nav-trigger="0">
                Opdrachtgevers met extra text
                <i class="atm-icon  far fa-chevron-right  fa-xs "></i>

            </div>
        </li>
        <li class="">
            <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Schoonmaak</a>

        </li>
        <li class="">
            <div class="atm-nav-link" data-nav-trigger="2">
                Branches
                <i class="atm-icon  far fa-chevron-right  fa-xs "></i>

            </div>
        </li>
        <li class="">
            <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>

        </li>
        <li class="">
            <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws uit het niets</a>

        </li>
        <li class="">
            <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>

        </li>
    </ul>
    <ul data-nav="0">
        <li class="subitems-meta">
            <button class='subitems-back'>
                <i class='fal fa-chevron-left'></i>
                Back
            </button>
            <span>Opdrachtgevers met extra text</span>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Mijn project</a>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Bouwreizen</a>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Partners</a>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
        </li>
    </ul>
    <ul data-nav="2">
        <li class="subitems-meta">
            <button class='subitems-back'>
                <i class='fal fa-chevron-left'></i>
                Back
            </button>
            <span>Branches</span>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Mijn project</a>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Bouwreizen</a>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Partners</a>
        </li>
        <li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
        </li>
    </ul>
</nav>
 
<nav class="mol-header-mobile-nav">
    <ul class="-active">
        {{#each items}}
            <li class="{{#if active}}active{{/if}}">
                {{#if subitems}}
                    <div class="atm-nav-link" data-nav-trigger="{{@index}}">
                        {{text}}
                        {{render '@icon' @root.moreIcon}}
                    </div>
                {{else}}
                    {{render '@nav-link' this merge=true}}
                {{/if}}
            </li>
        {{/each}}
    </ul>
    {{#each items}}
        {{#if subitems}}
            <ul data-nav="{{@index}}">
                <li class="subitems-meta">
                    <button class='subitems-back'>
                        <i class='fal fa-chevron-left'></i>
                        Back
                    </button>
                    <span>{{text}}</span>
                </li>
                {{#each subitems}}
                    <li>{{render '@nav-link' this merge=true}}</li>
                {{/each}}
            </ul>
        {{/if}}
    {{/each}}
</nav>
 
{
  "moreIcon": {
    "icon": "fa-chevron-right",
    "style": "far",
    "size": "fa-xs"
  },
  "items": [
    {
      "text": "Opdrachtgevers met extra text",
      "active": true,
      "href": "#",
      "subitems": [
        {
          "text": "Mijn project",
          "active": true,
          "href": "#"
        },
        {
          "text": "Bouwreizen",
          "active": false,
          "href": "#"
        },
        {
          "text": "Partners",
          "active": false,
          "href": "#"
        },
        {
          "text": "Blog",
          "active": false,
          "href": "#"
        }
      ]
    },
    {
      "text": "Schoonmaak",
      "active": false,
      "href": "#"
    },
    {
      "text": "Branches",
      "active": false,
      "href": "#",
      "subitems": [
        {
          "text": "Mijn project",
          "active": true,
          "href": "#"
        },
        {
          "text": "Bouwreizen",
          "active": false,
          "href": "#"
        },
        {
          "text": "Partners",
          "active": false,
          "href": "#"
        },
        {
          "text": "Blog",
          "active": false,
          "href": "#"
        }
      ]
    },
    {
      "text": "Over",
      "active": false,
      "href": "#"
    },
    {
      "text": "Nieuws uit het niets",
      "active": false,
      "href": "#"
    },
    {
      "text": "Vacatures",
      "active": false,
      "href": "#"
    }
  ]
}
  • Content: 
    .mol-header-mobile-nav {
    ul {
        @apply space-y-4 md:space-y-10 transition-transform w-full;

        &:not(.-active) {
            @apply hidden translate-x-1/2;
        }

        /* Main item */
        > li {
            @apply relative block;
            @apply text-h4 lg:text-h2 text-black hover:text-secondary-col-1;
            > .atm-nav-link {
                @apply select-none;
            }

            &.subitems-meta {
                @apply flex items-center space-x-5;

                .subitems-back {
                    @apply bg-secondary-col-1/10 text-secondary-col-1 px-4 py-3 rounded-full flex items-center text-sm;

                    i {
                        @apply text-xs pr-1;
                    }
                }

                span {
                    @apply text-gray-500 text-sm;
                }
            }
        }
    }
}
  • URL: /components/raw/header-mobile-nav/header-mobile-nav.css
  • Filesystem Path: src\components\03-molecules\header-mobile-nav\header-mobile-nav.css
  • Size: 917 Bytes
  • Content: 
    (function () {

    'use strict';

    document
        .querySelectorAll('.mol-header-mobile-nav div.atm-nav-link[data-nav-trigger]')?.forEach((trigger) => {
            trigger.addEventListener('click', (e) => {
                const { navTrigger } = e.currentTarget.dataset;
                const currentNav = trigger.closest('ul');

                currentNav.style.transform = 'translateX(-100%)';

                setTimeout(() => {
                    currentNav.classList.remove('-active');
                    currentNav.style = '';

                    document
                        .querySelector(`[data-nav="${navTrigger}"]`)?.classList.add('-active');
                }, 100);
            });
        });

        document
        .querySelectorAll('.subitems-back')
        ?.forEach((backBtn) => {
            backBtn.addEventListener('click', (e) => {
                const currentNav = e.currentTarget.closest('ul');
    
                currentNav.style.transform = 'translateX(100%)';
    
                setTimeout(() => {
                    currentNav.classList.remove('-active');
                    currentNav.style = '';
    
                    document
                        .querySelector('.mol-header-mobile-nav > ul:nth-child(1)')
                        ?.classList.add('-active');
                }, 100);
            });
        });
})();
  • URL: /components/raw/header-mobile-nav/header-mobile-nav.js
  • Filesystem Path: src\components\03-molecules\header-mobile-nav\header-mobile-nav.js
  • Size: 1.4 KB

No notes defined.