/ M024 Navigation Panel

Default implemention.

Data

{
	"specialNav": {
		"headline": "Leistungen",
		"subline": "und Mitgliedschaft",
		"linkList": [
			{
				"label": "SAC-Tourenportal",
				"url": "/pages/detail/detail.html"
			},
			{
				"label": "Kurse suchen",
				"url": "/pages/detail/detail.html"
			},
			{
				"label": "Shop",
				"url": "/pages/detail/detail.html"
			},
			{
				"label": "DIE ALPEN lesen",
				"url": "/pages/detail/detail.html"
			},
			{
				"label": "Suche & Biete",
				"url": "/pages/detail/detail.html"
			}
		]
	},
	"mainnavList": [
		{
			"link": {
				"label": "Hütten & Touren",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Hütten- & Tourensuche",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Tourenplanung",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Hütteninformationen",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		{
			"link": {
				"label": "Bergsport",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Kursverzeichnis 2017/2018",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Sicher unterwegs",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		{
			"link": {
				"label": "Jugend",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Bergsport für Kids & Teens",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Jugendlager",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Schulen & Partner",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		{
			"link": {
				"label": "Umwelt",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Nutzen & Schützen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Lebenswelt Alpen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "TBD",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		{
			"link": {
				"label": "Leistungssport",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht, Kalender & Aktuelles",
			"subLinkList": [
				{
					"label": "Sportklettern",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Skitourenrennen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Einklettern",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Expeditionsteam",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		{
			"link": {
				"label": "Der SAC",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Über uns",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Sektionen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Kultur",
					"url": "/pages/detail/detail.html"
				}
			]
		}
	],
	"metaLinkList": [
		{
			"label": "Tel +41 31 370 18 18",
			"url": "tel:+41313701818",
			"icon": "phone"
		},
		{
			"label": "Kontakt",
			"url": "/pages/detail/detail.html",
			"icon": "envelope"
		},
		{
			"label": "Medien",
			"url": "/pages/detail/detail.html",
			"icon": "newspaper"
		}
	],
	"membershipButton": {
		"label": "Mitglied werden",
		"url": "#"
	},
	"donateButton": {
		"label": "Jetzt spenden",
		"url": "#"
	},
	"languageSwitchList": [
		{
			"label": "DE",
			"ariaLabel": "Deutsch",
			"url": "/pages/detail/detail.html",
			"isActive": true
		},
		{
			"label": "FR",
			"ariaLabel": "Français",
			"url": "/#fr",
			"isUnavailable": false
		},
		{
			"label": "IT",
			"ariaLabel": "Italiano",
			"url": "/#it",
			"isUnavailable": true,
			"title": "Zur Startseite"
		},
		{
			"label": "EN",
			"ariaLabel": "English",
			"url": "/#en",
			"isUnavailable": true,
			"title": "Zur Startseite"
		}
	]
}

Variant with active mainnav sub lists

Data

{
	"mainnavList": {
		"0": {
			"link": {
				"label": "Hütten & Touren",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Hütten- & Tourensuche",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Tourenplanung",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Hütteninformationen",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		"1": {
			"link": {
				"label": "Bergsport",
				"url": "/pages/detail/detail.html",
				"isActive": true
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Kursverzeichnis 2017/2018",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Sicher unterwegs",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		"2": {
			"link": {
				"label": "Jugend",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Bergsport für Kids & Teens",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Jugendlager",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Schulen & Partner",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		"3": {
			"link": {
				"label": "Umwelt",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Nutzen & Schützen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Lebenswelt Alpen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "TBD",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		"4": {
			"link": {
				"label": "Leistungssport",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht, Kalender & Aktuelles",
			"subLinkList": [
				{
					"label": "Sportklettern",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Skitourenrennen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Einklettern",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Expeditionsteam",
					"url": "/pages/detail/detail.html"
				}
			]
		},
		"5": {
			"link": {
				"label": "Der SAC",
				"url": "/pages/detail/detail.html"
			},
			"overviewLinkLabel": "Übersicht & Aktuelles",
			"subLinkList": [
				{
					"label": "Über uns",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Sektionen",
					"url": "/pages/detail/detail.html"
				},
				{
					"label": "Kultur",
					"url": "/pages/detail/detail.html"
				}
			]
		}
	},
	"metaLinkList": [
		{
			"label": "Tel +41 31 370 18 18",
			"url": "tel:+41313701818",
			"icon": "phone"
		},
		{
			"label": "Kontakt",
			"url": "/pages/detail/detail.html",
			"icon": "envelope"
		},
		{
			"label": "Medien",
			"url": "/pages/detail/detail.html",
			"icon": "newspaper"
		}
	],
	"membershipButton": {
		"label": "Mitglied werden",
		"url": "#"
	},
	"languageSwitchList": [
		{
			"label": "DE",
			"ariaLabel": "Deutsch",
			"url": "/pages/detail/detail.html",
			"isActive": true
		},
		{
			"label": "FR",
			"ariaLabel": "Français",
			"url": "/#fr",
			"isUnavailable": false
		},
		{
			"label": "IT",
			"ariaLabel": "Italiano",
			"url": "/#it",
			"isUnavailable": true,
			"title": "Zur Startseite"
		},
		{
			"label": "EN",
			"ariaLabel": "English",
			"url": "/#en",
			"isUnavailable": true,
			"title": "Zur Startseite"
		}
	]
}

Template

<div class="m-navigation-panel" data-init="NavigationPanel">
	<div class="m-navigation-panel__wrapper">

		<div class="m-navigation-panel__mainnav-wrapper">

			<div class="m-navigation-panel__special">
				<div class="m-navigation-panel__special-inner">
					{{#if specialNav.headline}}
						<div class="m-navigation-panel__special-header">
							<div class="m-navigation-panel__special-headline">
								{{specialNav.headline}}
							</div>
							{{#if specialNav.subline}}
								<div class="m-navigation-panel__special-subline">
									{{specialNav.subline}}
								</div>
							{{/if}}
						</div>
					{{/if}}
					<ul class="m-navigation-panel__special-list o-ui-list fs-copy-note-bold">
						{{#each specialNav.linkList as |link|}}
							<li class="m-navigation-panel__mainnav-sub-item">{{>modules/c018_label_with_icon/c018_label_with_icon link}}</li>
						{{/each}}
					</ul>
					<div class="m-navigation-panel__cta-buttons">
						<a class="c-button" href="{{membershipButton.url}}"{{#if membershipButton.target}} target="{{membershipButton.target}}"{{/if}}>{{membershipButton.label}}</a>
						<a class="c-button c-button--secondary" href="{{donateButton.url}}"{{#if donateButton.target}} target="{{donateButton.target}}"{{/if}}>{{donateButton.label}}</a>
					</div>
				</div>
			</div>

			<div class="m-navigation-panel__main">
				<ul class="m-navigation-panel__mainnav o-ui-list fs-copy-note-bold" data-js-binding="mainnav">
					{{#each mainnavList as |mainnavItem|}}
						{{#with mainnavItem}}
							<li class="m-navigation-panel__mainnav-item">
								<a class="m-navigation-panel__mainnav-button fs-copy-bold" href="{{link.url}}"{{#if link.target}} target="{{link.target}}"{{/if}} data-js-binding="mainnav-button">
									{{link.label}}
									<svg class="m-navigation-panel__mainnav-arrow svg" aria-hidden="true"><use xlink:href="{{@root.global.svgSprite}}#icon-arrow1-down"></use></svg>
								</a>

								<ul class="m-navigation-panel__mainnav-sub o-ui-list{{#if link.isActive}} is-active{{/if}}" id="mainnav-{{@index}}">
									{{#if overviewLinkLabel}}
										<li class="m-navigation-panel__mainnav-sub-item m-navigation-panel__mainnav-sub-item--overview">{{>modules/c018_label_with_icon/c018_label_with_icon link label=overviewLinkLabel}}</li>
									{{/if}}
									{{#each subLinkList as |link|}}
										<li class="m-navigation-panel__mainnav-sub-item">{{>modules/c018_label_with_icon/c018_label_with_icon link}}</li>
									{{/each}}
								</ul>
							</li>
						{{/with}}
					{{/each}}
				</ul>
				<div class="m-navigation-panel__cta-buttons">
					<a class="c-button" href="{{membershipButton.url}}"{{#if membershipButton.target}} target="{{membershipButton.target}}"{{/if}}>{{membershipButton.label}}</a>
					<a class="c-button c-button--secondary" href="{{donateButton.url}}"{{#if donateButton.target}} target="{{donateButton.target}}"{{/if}}>{{donateButton.label}}</a>
				</div>
				<div class="m-navigation-panel__bottom-wrapper">
					<ul class="m-navigation-panel__meta o-ui-list fs-copy-note-bold">
						{{#each metaLinkList as |link|}}
							<li class="m-navigation-panel__meta-item">
								{{>modules/c018_label_with_icon/c018_label_with_icon link}}
							</li>
						{{/each}}
					</ul>

					<ul class="m-navigation-panel__language-switch o-ui-list fs-copy-note-bold">
						{{#each languageSwitchList as |link|}}
							<li class="m-navigation-panel__language-switch-item{{#if isActive}} is-active{{/if}}{{#if isUnavailable}} is-unavailable{{else}} is-available{{/if}}">
								<a class="c-button-text" href="{{link.url}}"{{#if link.target}} target="{{link.target}}"{{/if}}{{#if link.ariaLabel}} aria-label="{{link.ariaLabel}}"{{/if}}{{#if link.title}} title="{{link.title}}" data-tooltip="top"{{/if}}>{{link.label}}</a>
							</li>
						{{/each}}
					</ul>
				</div>
			</div>

		</div>

	</div>
</div>

Global Data

{
	"global": {
		"lang": "de",
		"locale": "de-CH",
		"svgSprite": "/assets/media/svg/svg-sprite.svg",
		"transparentPixel": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
		"season": "summer",
		"api": {
			"suisseAlpine": "https://dev.suissealpine.sac-cas.ch/api",
			"sacRouteDetail": "https://dev.web.sac-cas.ch/de/?type=1567765346410&tx_usersaccas2020_sac2020[routeId]=",
			"sacRoutePassTrough": "https://dev.web.sac-cas.ch/de/?type=1567765346411&tx_usersaccas2020_sac2020[routeId]=",
			"uploadProfileImage": "https://dev.web.sac-cas.ch/?eID=routing&route=usersaccassite/users/current/uploadProfileImage",
			"deleteProfileImage": "https://dev.web.sac-cas.ch/?eID=routing&route=usersaccassite/users/current/deleteProfileImage",
			"aimeosShop": "https://dev.web.sac-cas.ch/de/shop/shopapi/",
			"mailchimpForm": "https://sac-cas.us2.list-manage.com/subscribe/post?u=466a37a029f12e4df9e7a2a1f&id=ee3f0f3cf3",
			"collections": "https://collectionsdev.web.sac-cas.ch/api",
			"hrs": "https://www.alpsonline.org/hut-web-service?wsdl"
		},
		"baseAimeosUploadPath": "https://dev.web.sac-cas.ch/uploads/tx_aimeos/",
		"mapIframeUrl": "/modules/m030_map/media/map_iframe.html",
		"baseDestinationLinkUrl": "/pages/destination_summit/destination_summit.html?",
		"destinationLinkRouteAnchor": "route",
		"baseJourneyLinkUrl": "https://dev.web.sac-cas.ch/de/redirect/google-maps-routing/lv03/",
		"routeCollectionLinkUrl": "https://dev.web.sac-cas.ch/de/mein-sac/uebersicht/",
		"hrsLinkUrl": "https://www.alpsonline.org/reservation/wizard?header=yes&hut_id={{hutId}}&selectedDate={{date}}",
		"schweizMobilImportUrl": "https://map.schweizmobil.ch/?showDialog=importcoordinates&showLogin&coordinates={{coordinates}}",
		"geologyImageUrl": "https://www.sac-cas.ch/fileadmin/Huetten_und_Touren/Tourenportal/Gesteinszonenkarten/Hovercard/{{image}}.jpg",
		"features": {
			"archive": true
		},
		"translations": {
			"disciplines": {
				"mountain_hiking": "Berg- und Alpinwandern",
				"alpine_tour": "Hochtour",
				"climbing": "Klettern",
				"alpine_climbing": "Alpinklettern",
				"via_ferrata": "Klettersteig",
				"ski_tour": "Skitour",
				"snowshoe_tour": "Schneeschuhtour",
				"archive": "Routenarchiv"
			},
			"types": {
				"summit": "Gipfel",
				"hut": "Hütte",
				"traverse": "Übergang",
				"marking_point": "Markanter Punkt",
				"departure_arrival": "Ausgangp./Talort",
				"climbing_area": "Klettergebiet"
			},
			"markingPoints": {
				"lake": "See",
				"catering": "Einkehr",
				"waterfall": "Wasserfall",
				"cave": "Höhle",
				"bridge": "Brücke",
				"alp": "Alpe",
				"other": "Sehenswürdigkeit"
			},
			"difficulties": {
				"alpine_tour": {
					"L": "L",
					"WS": "WS",
					"ZS": "ZS",
					"S": "S",
					"SS": "SS",
					"AS": "AS"
				},
				"ski_tour": {
					"L": "L",
					"WS": "WS",
					"ZS": "ZS",
					"S": "S",
					"SS": "SS",
					"AS": "AS"
				}
			},
			"altitudeSuffix": "m ü.M.",
			"altitudeDifferenceUnit": "hm",
			"hoursUnit": "h",
			"difficulty": "Schwierigkeit",
			"ascent": "Aufstieg",
			"descent": "Abstieg",
			"route": "Route",
			"routes": "Routen",
			"segment": "Routenabschnitt",
			"segments": "Routenabschnitte",
			"approach": "Zustieg",
			"approaches": "Zustiege",
			"sector": "Sektor",
			"sectors": "Sektoren",
			"hut": "Hütte",
			"hutPrivate": "Hütte Privat",
			"hutFilter": "Hüttenfinder",
			"situationWarning": "Zustandswarnung",
			"protectionRule": "Schutzbestimmung",
			"archiveRoute": "Archivroute",
			"archiveRoutes": "Archivrouten",
			"map": {
				"map": "Karte",
				"legend": "Legende",
				"zoomIn": "Reinzoomen",
				"zoomOut": "Rauszoomen",
				"enterFullscreenMode": "Vollbildmodus starten",
				"leaveFullscreenMode": "Vollbildmodus verlassen",
				"searchLabel": "Region, Gipfel, Hütte, Talort, POI, …",
				"disciplineSettings": "Disziplinen Einstellungen",
				"layerSettings": "Ergänzende Kartenebenen",
				"geolocate": "Lokalisieren",
				"searchInView": "In diesem Gebiet suchen",
				"waypointDrawing": "Auf Karte zeichnen",
				"drawWaypoints": "Route zeichnen",
				"removeWaypoints": "Route löschen",
				"exportWaypoints": "GPX downloaden",
				"saveInSchweizMobil": "Speichern|SchweizMobil Plus",
				"moreInFullscreen": "Entdecke weitere Funktionen auf der Vollbildkarte:<br>- Zeichne deine eigenen Tracks",
				"baseLayers": {
					"pois": "Tourenziele, Hütten",
					"routes": "Routen"
				},
				"additionalLayers": {
					"summer": "Sommer",
					"winter": "Winter",
					"hikingTrails": "Wanderwege",
					"closedHikingTrails": "Gesperrte Wanderwege",
					"wildlifeReserves": "Wildschutzgebiete",
					"skiTours": "swisstopo Skitouren",
					"designatedWildlifeAreas": "Wildruhezonen",
					"publicTransportStops": "ÖV-Stationen",
					"slopesOver30": "Hangneigung ab 30°",
					"protectionRules": "Schutzbestimmungen",
					"situationWarnings": "Zustandswarnungen",
					"geology": "Gesteinszonenkarte",
					"alpGuardDogs": "Herdenschutzhunde",
					"armyShooting": "Schiessanzeigen",
					"snowCover": "Schneeabdeckung",
					"snowDepth": "Schneehöhe"
				},
				"layerOpacity": "Deckkraft aktiver Karten",
				"foregroundOpacity": "Deckkraft aktiver Disziplinen und Hütten",
				"backgroundOpacity": "Deckkraft inaktiver Disziplinen und Hütten",
				"reset": "Zurücksetzen"
			},
			"mapHoverCard": {
				"publicTransport": "Öffentlicher Verkehr",
				"parkingInformations": "Parkinformationen",
				"planJourneyPublicTransport": "Anreise",
				"searchPublicTransport": "Verbindung suchen (SBB)",
				"planJourneyCar": "Anreise Google Maps",
				"downloadWaypoint": "Wegpunkt downloaden",
				"routeLinkLabel": "Route ansehen",
				"wildlifeReserve": "Wildschutzgebiet",
				"wildlifeArea": "Wildruhezone",
				"closedHikingTrail": "Sperrung / Umleitung Wanderweg",
				"alpGuardDogs": "Alpweide geschützt durch Herdenschutzhunde",
				"armyShooting": "Schiessanzeige und Gefahrenstelle",
				"legalBasis": "Grundlage",
				"additionalInformation": "Zusatzinformationen",
				"showDetails": "Details anzeigen",
				"moreOnMapAdminCh": "Mehr Informationen auf map.admin.ch",
				"currentSnowDepth": "Aktuelle Schneehöhe"
			},
			"protectionArea": {
				"lastUpdated": "zuletzt aktualisiert am {{lastUpdate}}",
				"validity": "gültig von {{validFrom}} bis {{validUntil}}",
				"validityEstimated": "gültig von {{validFrom}} bis voraussichtlich {{validUntil}}",
				"validFrom": "gültig ab {{validFrom}}",
				"validUntil": "gültig bis {{validUntil}}",
				"validUntilEstimated": "gültig bis voraussichtlich {{validUntil}}",
				"generallyValid": "generell gültig"
			},
			"collections": {
				"addRouteToCollection": "Route merken",
				"selectCollection": "Merkliste auswählen",
				"selectRoute": "Welche Route(n) dieses Tourenziels möchtest du dir merken?",
				"selectRouteError": "Bitte wähle eine Route aus.",
				"addToCollection": "Merken",
				"cancel": "Abbrechen",
				"routeAddedToCollection": "Die ausgewählte Route(n) wurden zu deiner Merkliste hinzugefügt.",
				"createNew": "Neue Liste",
				"close": "Schliessen",
				"goToCollection": "Zur Merkliste",
				"alreadyCollectedIn": "Bereits gemerkt auf"
			}
		},
		"basePublicTransportLinkUrl": "https://www.sbb.ch/en/buying/pages/fahrplan/fahrplan.xhtml?language=en&nach=",
		"snowDepthInfoUrl": "https://www.sac-cas.ch",
		"snowCoverInfoUrl": "https://www.sac-cas.ch",
		"destinationFallbackImages": {
			"summit": {
				"srcset": {
					"sizeList": [
						[
							600
						],
						[
							1200
						],
						[
							2048
						]
					],
					"urlList": [
						"/modules/c015_teaser_destination/media/summit_600.jpg",
						"/modules/c015_teaser_destination/media/summit_1200.jpg",
						"/modules/c015_teaser_destination/media/summit_2048.jpg"
					]
				}
			},
			"hut": {
				"srcset": {
					"sizeList": [
						[
							600
						],
						[
							1200
						]
					],
					"urlList": [
						"/modules/c015_teaser_destination/media/hut_600.jpg",
						"/modules/c015_teaser_destination/media/hut_1200.jpg",
						"/modules/c015_teaser_destination/media/hut_2048.jpg"
					]
				}
			}
		},
		"map": {
			"news": [
				{
					"label": "Neu",
					"copy": "Jetzt auch <b>GPX downloaden</b>",
					"type": "waypointDrawing"
				},
				{
					"label": "Neu",
					"copy": "Jetzt Deckkraft für jede Ebene einstellbar",
					"type": "layerSettings"
				}
			],
			"metaLinkList": [
				{
					"url": "https://www.swisstopo.admin.ch/",
					"label": "© swisstopo (5701325910)"
				},
				{
					"url": "/pages/map_legend/map_legend.html",
					"label": "Hilfe & Legende"
				},
				{
					"url": "#",
					"label": "Haftungsausschluss"
				}
			]
		}
	}
}

Documentation

Description

Integration

Copy HTML.