Navigation.stories.js

// Navigation.stories.js
import { html } from 'lit-html'

import(
  '../../web-components-toolbox/src/es/components/molecules/navigation/Navigation'
).then((module) => self.customElements.define('m-navigation', module.default))

export default {
  title: 'Molecules/Navigation',
  component: 'm-navigation'
}

export const Default = () =>
  html`
    <m-navigation
      hover="false"
      namespace="navigation-default-"
      namespace-fallback
      hit-area="false"
      focus-lost-close
      no-scroll
      margin-top="0"
    >
      <ul>
        <li>
          <a href="#">Geschäfte</a>
          <section>
            <ul>
              <li>
                <a href="/Thourgh">Though Wazup</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Dienstleistungen">Dienstleistungen</a>
              </li>
              <li>
                <a href="/Offertenanfrage">Offertenanfrage</a>
              </li>
              <li>
                <a href="/Strassentransporte">Strassentransporte</a>
              </li>
              <li>
                <a href="/Bahntransporte">Bahntransporte</a>
              </li>
              <li>
                <a href="/Kombinierter Verkehr">Kombinierter Verkehr</a>
              </li>
              <li>
                <a href="/Gekühlte Transporte">Gekühlte Transporte</a>
              </li>
              <li>
                <a href="/Seefracht">Seefracht</a>
              </li>
              <li>
                <a href="/Sammelkontainer">Sammelkontainer</a>
              </li>
              <li>
                <a href="/Express Sendungen">Express Sendungen</a>
              </li>
              <li>
                <a href="/Migros Office Hongkong">Migros Office Hongkong</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Dienstleistungen">Dienstleistungen</a>
              </li>
              <li>
                <a href="/Offertenanfrage">Offertenanfrage</a>
              </li>
              <li>
                <a href="/Strassentransporte">Strassentransporte</a>
              </li>
              <li>
                <a href="/Bahntransporte">Bahntransporte</a>
              </li>
              <li>
                <a href="/Kombinierter Verkehr">Kombinierter Verkehr</a>
              </li>
              <li>
                <a href="/Gekühlte Transporte">Gekühlte Transporte</a>
              </li>
              <li>
                <a href="/Seefracht">Seefracht</a>
              </li>
              <li>
                <a href="/Sammelkontainer">Sammelkontainer</a>
              </li>
              <li>
                <a href="/Express Sendungen">Express Sendungen</a>
              </li>
              <li>
                <a href="/Migros Office Hongkong">Migros Office Hongkong</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Dienstleistungen">Dienstleistungen</a>
              </li>
              <li>
                <a href="/Offertenanfrage">Offertenanfrage</a>
              </li>
              <li>
                <a href="/Strassentransporte">Strassentransporte</a>
              </li>
              <li>
                <a href="/Bahntransporte">Bahntransporte</a>
              </li>
              <li>
                <a href="/Kombinierter Verkehr">Kombinierter Verkehr</a>
              </li>
              <li>
                <a href="/Gekühlte Transporte">Gekühlte Transporte</a>
              </li>
              <li>
                <a href="/Seefracht">Seefracht</a>
              </li>
              <li>
                <a href="/Sammelkontainer">Sammelkontainer</a>
              </li>
              <li>
                <a href="/Express Sendungen">Express Sendungen</a>
              </li>
              <li>
                <a href="/Migros Office Hongkong">Migros Office Hongkong</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Verzollung">Verzollung</a>
              </li>
              <li>
                <a href="/Zolldienstleistungen">Zolldienstleistungen</a>
              </li>
              <li>
                <a href="/Elektronische Yolltarif Tares"
                  >Elektronische Yolltarif Tares</a
                >
              </li>
              <li>
                <a href="/Freihandelsabkommen">Freihandelsabkommen</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Instruktionen">Instruktionen</a>
              </li>
              <li>
                <a href="/Track & Trace (MTWEB)">Track & Trace (MTWEB)</a>
              </li>
              <li>
                <a href="/Verteilzentren Anlieferungsvorschriften"
                  >Verteilzentren Anlieferungsvorschriften</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Sortiervorschriften"
                  >Verteilzentren Sortiervorschriften</a
                >
              </li>
              <li>
                <a href="/Shipping Guidelines">Shipping Guidelines</a>
              </li>
              <li>
                <a href="/Containertragwagen Handbuch"
                  >Containertragwagen Handbuch</a
                >
              </li>
              <li>
                <a href="/Incoterms">Incoterms</a>
              </li>
              <li>
                <a href="/Seefracht & LKW Abmessungen"
                  >Seefracht & LKW Abmessungen</a
                >
              </li>
            </ul>
            <ul>
              <li class="bold">
                <a href="/Aktuelles">Aktuelles</a>
              </li>
              <li class="bold">
                <a href="/Oft gestellte Fragen">Oft gestellte Fragen</a>
              </li>
              <li class="bold">
                <a href="/Kontakt">Kontakt</a>
              </li>
            </ul>
          </section>
        </li>
        <li>
          <a class="active" href="#">Öffnungszeiten</a>
          <section>
            <ul>
              <li>
                <a href="/Dienstleistungen">National - Dienstleistungen</a>
              </li>
              <li>
                <a href="/Offertenanfrage">National - Offertenanfrage</a>
              </li>
              <li>
                <a class="active" href="/Strassentransporte"
                  >National - Strassentransporte</a
                >
              </li>
              <li>
                <a href="/Bahntransporte">National - Bahntransporte</a>
              </li>
              <li>
                <a href="/Kombinierter Verkehr"
                  >National - Kombinierter Verkehr</a
                >
              </li>
              <li>
                <a href="/Gekühlte Transporte"
                  >National - Gekühlte Transporte</a
                >
              </li>
              <li>
                <a href="/Seefracht">National - Seefracht</a>
              </li>
              <li>
                <a href="/Sammelkontainer">National - Sammelkontainer</a>
              </li>
              <li>
                <a href="/Express Sendungen">National - Express Sendungen</a>
              </li>
              <li>
                <a href="/Migros Office Hongkong"
                  >National - Migros Office Hongkong</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Verzollung">National - Verzollung</a>
              </li>
              <li>
                <a href="/Zolldienstleistungen"
                  >National - Zolldienstleistungen</a
                >
              </li>
              <li>
                <a href="/Elektronische Yolltarif Tares"
                  >National - Elektronische Yolltarif Tares</a
                >
              </li>
              <li>
                <a href="/Freihandelsabkommen"
                  >National - Freihandelsabkommen</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Instruktionen">National - Instruktionen</a>
              </li>
              <li>
                <a href="/Track & Trace (MTWEB)"
                  >National - Track & Trace (MTWEB)</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Anlieferungsvorschriften"
                  >National - Verteilzentren Anlieferungsvorschriften</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Sortiervorschriften"
                  >National - Verteilzentren Sortiervorschriften</a
                >
              </li>
              <li>
                <a href="/Shipping Guidelines"
                  >National - Shipping Guidelines</a
                >
              </li>
              <li>
                <a href="/Containertragwagen Handbuch"
                  >National - Containertragwagen Handbuch</a
                >
              </li>
              <li>
                <a href="/Incoterms">National - Incoterms</a>
              </li>
              <li>
                <a href="/Seefracht & LKW Abmessungen"
                  >National - Seefracht & LKW Abmessungen</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Aktuelles">National - Aktuelles</a>
              </li>
              <li>
                <a href="/Oft gestellte Fragen"
                  >National - Oft gestellte Fragen</a
                >
              </li>
              <li>
                <a href="/Kontakt">National - Kontakt</a>
              </li>
            </ul>
          </section>
        </li>
        <li>
          <a href="#">Services</a>
          <section>
            <ul>
              <li>
                <a href="/Dienstleistungen">Tauschgeräte - Dienstleistungen</a>
              </li>
              <li>
                <a href="/Offertenanfrage">Tauschgeräte - Offertenanfrage</a>
              </li>
              <li>
                <a href="/Strassentransporte"
                  >Tauschgeräte - Strassentransporte</a
                >
              </li>
              <li>
                <a href="/Bahntransporte">Tauschgeräte - Bahntransporte</a>
              </li>
              <li>
                <a href="/Kombinierter Verkehr"
                  >Tauschgeräte - Kombinierter Verkehr</a
                >
              </li>
              <li>
                <a href="/Gekühlte Transporte"
                  >Tauschgeräte - Gekühlte Transporte</a
                >
              </li>
              <li>
                <a href="/Seefracht">Tauschgeräte - Seefracht</a>
              </li>
              <li>
                <a href="/Sammelkontainer">Tauschgeräte - Sammelkontainer</a>
              </li>
              <li>
                <a href="/Express Sendungen"
                  >Tauschgeräte - Express Sendungen</a
                >
              </li>
              <li>
                <a href="/Migros Office Hongkong"
                  >Tauschgeräte - Migros Office Hongkong</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Verzollung">Tauschgeräte - Verzollung</a>
              </li>
              <li>
                <a href="/Zolldienstleistungen"
                  >Tauschgeräte - Zolldienstleistungen</a
                >
              </li>
              <li>
                <a href="/Elektronische Yolltarif Tares"
                  >Tauschgeräte - Elektronische Yolltarif Tares</a
                >
              </li>
              <li>
                <a href="/Freihandelsabkommen"
                  >Tauschgeräte - Freihandelsabkommen</a
                >
              </li>
            </ul>
          </section>
        </li>
        <li>
          <a href="#">Anfahrt</a>
          <section>
            <ul>
              <li>
                <a href="/Verzollung">Über unsVerzollung</a>
              </li>
              <li>
                <a href="/Zolldienstleistungen">Über unsZolldienstleistungen</a>
              </li>
              <li>
                <a href="/Elektronische Yolltarif Tares"
                  >Über unsElektronische Yolltarif Tares</a
                >
              </li>
              <li>
                <a href="/Freihandelsabkommen">Über unsFreihandelsabkommen</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Instruktionen">Über unsInstruktionen</a>
              </li>
              <li>
                <a href="/Track & Trace (MTWEB)"
                  >Über unsTrack & Trace (MTWEB)</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Anlieferungsvorschriften"
                  >Über unsVerteilzentren Anlieferungsvorschriften</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Sortiervorschriften"
                  >Über unsVerteilzentren Sortiervorschriften</a
                >
              </li>
              <li>
                <a href="/Shipping Guidelines">Über unsShipping Guidelines</a>
              </li>
              <li>
                <a href="/Containertragwagen Handbuch"
                  >Über unsContainertragwagen Handbuch</a
                >
              </li>
              <li>
                <a href="/Incoterms">Über unsIncoterms</a>
              </li>
              <li>
                <a href="/Seefracht & LKW Abmessungen"
                  >Über unsSeefracht & LKW Abmessungen</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Aktuelles">Über unsAktuelles</a>
              </li>
              <li>
                <a href="/Oft gestellte Fragen">Über unsOft gestellte Fragen</a>
              </li>
              <li>
                <a href="/Kontakt">Über unsKontakt</a>
              </li>
            </ul>
          </section>
        </li>
        <li>
          <a href="#">Kontakt</a>
          <section>
            <ul>
              <li>
                <a href="/Verzollung">Über unsVerzollung</a>
              </li>
              <li>
                <a href="/Zolldienstleistungen">Über unsZolldienstleistungen</a>
              </li>
              <li>
                <a href="/Elektronische Yolltarif Tares"
                  >Über unsElektronische Yolltarif Tares</a
                >
              </li>
              <li>
                <a href="/Freihandelsabkommen">Über unsFreihandelsabkommen</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Instruktionen">Über unsInstruktionen</a>
              </li>
              <li>
                <a href="/Track & Trace (MTWEB)"
                  >Über unsTrack & Trace (MTWEB)</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Anlieferungsvorschriften"
                  >Über unsVerteilzentren Anlieferungsvorschriften</a
                >
              </li>
              <li>
                <a href="/Verteilzentren Sortiervorschriften"
                  >Über unsVerteilzentren Sortiervorschriften</a
                >
              </li>
              <li>
                <a href="/Shipping Guidelines">Über unsShipping Guidelines</a>
              </li>
              <li>
                <a href="/Containertragwagen Handbuch"
                  >Über unsContainertragwagen Handbuch</a
                >
              </li>
              <li>
                <a href="/Incoterms">Über unsIncoterms</a>
              </li>
              <li>
                <a href="/Seefracht & LKW Abmessungen"
                  >Über unsSeefracht & LKW Abmessungen</a
                >
              </li>
            </ul>
            <ul>
              <li>
                <a href="/Aktuelles">Über unsAktuelles</a>
              </li>
              <li>
                <a href="/Oft gestellte Fragen">Über unsOft gestellte Fragen</a>
              </li>
              <li>
                <a href="/Kontakt">Über unsKontakt</a>
              </li>
            </ul>
          </section>
        </li>
        <li class="search">
          <a-input
            inputid="inputSearch"
            placeholder="Suchen..."
            search="?q="
            type="search"
          ></a-input>
        </li>
      </ul>
      <ul class="language-switcher">
        <li><a href="#">DE</a></li>
        <li><a href="#">FR</a></li>
        <li><a href="#">EN</a></li>
      </ul>
    </m-navigation>
  `