OFRAG Frontend Components Library v0.0.0

Utility Nav: With Container And Dealer Mode 

<div class="utility-nav--with-container">
    <div class="utility-nav__row">
        <nav class="utility-nav__column">
            <h2 class="visually-hidden">Quick navigation</h2>
            <ul class="utility-nav__link-list">
                <li class="utility-nav__link-list-item">
                    <a class="utility-nav__link" target="_blank" href="#">
                        XXX brand
                    </a>
                </li>
                <li class="utility-nav__link-list-item">
                    <a class="utility-nav__link" target="_blank" href="#">
                        Global Website
                    </a>
                </li>
                <li class="utility-nav__link-list-item">
                    <a class="utility-nav__link" target="_blank" href="#">
                        Hilfe
                    </a>
                </li>
                <li class="utility-nav__link-list-item--toggle">
                    <span class="utility-nav__title">HP</span>
                    <div class="utility-nav__toggle">
                        <div class="toggle">
                            <label class="toggle__switch--small">
                                <input class="toggle__input visually-hidden" type="checkbox" id="toggle-utility-nav" name="dealer-mode" value="1">
                                <span class="toggle__slider--small"></span>
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <nav class="utility-nav__column">
            <h2 class="visually-hidden">Language navigation</h2>
            <ul class="utility-nav__link-list">
                <li class="utility-nav__link-list-item">
                    <a class="utility-nav__link" href="/de" hreflang="de" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
                        Deutsch
                    </a>
                </li>
                <li class="utility-nav__link-list-item">
                    <a class="utility-nav__link" href="/fr" hreflang="fr" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
                        Français
                    </a>
                </li>
                <li class="utility-nav__link-list-item">
                    <a class="utility-nav__link" href="/it" hreflang="it" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
                        Italiano
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
 
{% include '@SharedComponents/modules/page/components/utility-nav/utility-nav.twig' %}
 
{
  "headingLevel": "2",
  "variant": "with-container",
  "languages": {
    "title": "Language navigation",
    "items": [
      {
        "title": "Deutsch",
        "href": "/de",
        "hreflang": "de"
      },
      {
        "title": "Français",
        "href": "/fr",
        "hreflang": "fr"
      },
      {
        "title": "Italiano",
        "href": "/it",
        "hreflang": "it"
      }
    ]
  },
  "navigation": {
    "title": "Quick navigation",
    "items": [
      {
        "title": "XXX brand",
        "href": "#",
        "target": "_blank"
      },
      {
        "title": "Global Website",
        "href": "#",
        "target": "_blank"
      },
      {
        "title": "Hilfe",
        "href": "#",
        "target": "_blank"
      },
      {
        "title": "HP",
        "toggle": {
          "variant": "small",
          "id": "toggle-utility-nav",
          "name": "dealer-mode",
          "value": "1",
          "checked": false
        }
      }
    ]
  }
}
  • Content: 
    import UtilityNavMediator, {name as title} from 'cando-cx-components-library/components/modules/page/components/utility-nav/utility-nav-mediator';

export default UtilityNavMediator;
export const name = title;
  • URL: /components/raw/utility-nav/utility-nav-mediator.js
  • Filesystem Path: src/components/modules/page/components/utility-nav/utility-nav-mediator.js
  • Size: 209 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/utility-nav/utility-nav";
  • URL: /components/raw/utility-nav/utility-nav.scss
  • Filesystem Path: src/components/modules/page/components/utility-nav/utility-nav.scss
  • Size: 122 Bytes

No notes defined.