Demo Section

Each variation will be presented in the following section.

Default

Readme

mobileNavToggler (`coreComponent`)

Description

This component contains a button to toggle the navigation on mobile devices.

JIRA

LMU-226

Requirements

@veams/core - Veams Core Framework.
@veams/query or jquery - Veams Query or jQuery.
@veams/component - Veams Component.

Fields

`mobile-nav-toggler.hbs`

Settings

Parameter	Type	Value	Description
settings.mobileNavTogglerClasses	String	`''`	Modifier classes for coreComponent
settings.mobileNavTogglerJsOptions	Object	`null`	JavaScript options object which gets stringified

Content

Parameter	Type	Description
content.list	Object	Navigation list

`mobile-nav-toggler__list.hbs`

Settings

Parameter	Type	Value	Description
settings.listClasses	String	`''`	Modifier classes for list

Content

Parameter	Type	Description
content.items	Array	Array containing n-items

`mobile-nav-toggler__item.hbs`

Settings

Parameter	Type	Value	Description
settings.itemClasses	String	`''`	Modifier classes for this item

Content

Parameter	Type	Description
content.link	Object	Link element (button)

`mobile-nav-toggler__link.hbs`

Settings

Parameter	Type	Value	Description
settings.linkClasses	String	`''`	Modifier classes for this link
settings.linkJsItem	String	`''`	Will add an data-js-item selector

Content

Parameter	Type	Description
content.linkText	String	Text for this link/button
content.linkTextAural	String	Aural text for accessibility
content.linkTextClose	String	Visible close text
content.linkTextCloseAural	String	Aural close text for accessibility

JavaScript Options

The module gives you the possibility to override default JS options:

Option	Type	Default	Description
selectors.stackNavToggler	String	`'[data-js-item="toggle-stack-navigation"]'`	Button that toggles stack navigation state
selectors.stackNavigaton	String	`'[data-js-module="stack-navigation"]'`	Selector for stack navigation component
classes.active	String	`'is-active'`	Class for active component state
classes.expanded	String	`'is-expanded'`	Class for expanded component state

SASS

Variables

Modifier Classes

There are modifier classes you can add to mobile-nav-toggler__list-link:

Modifier	Description
is-active	Will set active styles for this link/button

Templates

mobile-nav-toggler.hbs

<nav class="c-mobile-nav-toggler{{#if settings.mobileNavTogglerClasses}} {{settings.mobileNavTogglerClasses}}{{/if}}"
    data-js-module="mobile-nav-toggler"{{#if settings.mobileNavTogglerJsOptions}}
    data-js-options='{{stringify settings.mobileNavTogglerJsOptions}}'{{/if}}>
	{{#with content.list}}
		{{> mobile-nav-toggler__list}}
	{{/with}}
</nav>

mobile-nav-toggler__item.hbs

<li class="mobile-nav-togler__list-item{{#if settings.itemClasses}} {{settings.itemClasses}}{{/if}}">
	{{#with content.link}}
		{{> mobile-nav-toggler__link }}
	{{/with}}
</li>

mobile-nav-toggler__link.hbs

<button class="mobile-nav-toggler__list-link{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}"
    {{#if settings.linkJsItem}} data-js-item="{{settings.linkJsItem}}" {{/if}}><span
        class="mobile-nav-toggler__link-content{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}"><span
            class="mobile-nav-toggler__link-extra{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}"></span></span><span
        class="mobile-nav-toggler__link-text{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}">{{content.linkText}}<span
            class="mobile-nav-toggler__link-text-aural is-aural"> {{content.linkTextAural}}</span></span><span
        class="mobile-nav-toggler__link-text-close{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}"><span
            class="mobile-nav-toggler__link-text-close-aural is-aural">{{content.linkTextCloseAural}}
        </span>{{content.linkTextClose}}</span></button>

mobile-nav-toggler__list.hbs

<ul class="mobile-nav-toggler__list{{#if settings.listClasses}} {{settings.listClasses}}{{/if}}">
	{{#each content.items}}
		{{> mobile-nav-toggler__item }}
	{{/each}}
</ul>

Data File

mobile-nav-toggler.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"mobileNavTogglerClasses": "",
				"mobileNavTogglerJsOptions": null
			},
			"content": {
				"list": {
					"settings": {
						"listClasses": ""
					},
					"content": {
						"items": [
							{
								"settings": {
									"itemClasses": "is-back"
								},
								"content": {
									"link": {
										"settings": {
											"linkClasses": "is-back",
											"linkJsItem": "level-up-navigation"
										},
										"content": {
											"linkText": "Zurück",
											"linkTextAural": "zur vorherigen Ebene"
										}
									}
								}
							},
							{
								"settings": {
									"itemClasses": ""
								},
								"content": {
									"link": {
										"settings": {
											"linkClasses": "is-burger",
											"linkJsItem": "toggle-stack-navigation"
										},
										"content": {
											"linkText": "Menü",
											"linkTextAural": "öffnen",
											"linkTextCloseAural": "Menü",
											"linkTextClose": "Schließen"
										}
									}
								}
							}
						]
					}
				}
			}
		}
	}
}

Styles

mobile-nav-toggler.scss

/* ===================================================
coreComponent: mobile-nav-toggler
=================================================== */

.c-mobile-nav-toggler {
	position: fixed;
	z-index: 1000;
	left: 0;
	bottom: 0;
	display: block;
	width: 100vw;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .36);

	@include bp($bp-tablet-p) {
		display: none;
	}
	
	@include bp($bp-mobile-s) {
		width: 100%;
	}

	@include print() {
		display: none;
	}

	/*
	MODIFIERS
	----------------------- */
	&.is-multi {

		.mobile-nav-togler__list-item {
			flex: 1 1 50%;
			display: block;

			/*
			MODIFIERS
			----------------------- */
			&.is-back {
				display: block;
			}
		}
	}

	.mobile-nav-toggler__list {
		display: flex;
		width: 100%;
	}

	.mobile-nav-togler__list-item {
		flex: 1 1;
		min-width: 60px;
		display: block;

		/*
		MODIFIERS
		----------------------- */
		&.is-back {
			display: none;
			border-right: 1px solid $color-green;
		}
	}

	.mobile-nav-toggler__list-link {
		@include reset-btn();
		@include hidden-text();

		position: relative;
		width: 100%;
		height: 60px;
		background-color: $color-white;
		display: block;
		cursor: pointer;

		&:hover,
		&.a11y-focus-key {

			&.is-burger {
				
				.mobile-nav-toggler__link-content {

					&::before,
					&::after {
						background-color: $color-green;
					}
				}

				.mobile-nav-toggler__link-extra {
					background-color: $color-green;
				}
			}
		}

		&:focus {
			outline: none;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-active {

			&.is-burger {

				.mobile-nav-toggler__link-content {

					&.is-burger {
						margin-right: 5px;
					}

					&::before {
						transform: translateX(-3px) rotate(-45deg);
						width: 21px;
					}

					&::after {
						transform: translateX(-3px) rotate(45deg);
						width: 21px;
					}
				}

				.mobile-nav-toggler__link-extra {
					opacity: 0;
					transform: translateX(-100px);
				}

				.mobile-nav-toggler__link-text {
					display: none;
				}

				.mobile-nav-toggler__link-text-close,
				.mobile-nav-toggler__link-text-close-aural {
					display: inline-block;
				}
			}
		}
	}

	.mobile-nav-toggler__link-content {
		position: relative;
		display: inline-block;
		vertical-align: middle;

		/*
		MODIFIERS
		----------------------- */
		&.is-burger {
			width: 25px;
			height: 18px;
			display: inline-block;
			margin-right: 15px;

			&::before,
			&::after {
				@include pseudo();

				width: 25px;
				height: 3px;
				background-color: $color-green;
				position: absolute;
				left: 0;
				transition: background-color $animation-duration-std $animation-easing-std, transform $animation-duration-std $animation-easing-std, width $animation-duration-std $animation-easing-std;
			}

			&::before {
				top: 0;
				transform-origin: right top;
			}

			&::after {
				bottom: 1px;
				transform-origin: right bottom;
			}
		}

		&.is-back {

			&::before {
				@include pseudo();
				@include sprites-icon-arrow-green100;

				position: relative;
				margin-right: 10px;
				display: inline-block;
				vertical-align: middle;
				transform: rotate(180deg);
			}
		}
	}

	.mobile-nav-toggler__link-text {
		position: relative;
		color: $color-green;
		font-size: 1.5rem;
		font-family: $font-bold;
		letter-spacing: .3px;
		line-height: (22/15);
		display: inline-block;
		vertical-align: middle;

		.mobile-nav-toggler__link-text-aural {
			display: inline-block;
		}
	}

	.mobile-nav-toggler__link-text-close {
		position: relative;
		color: $color-green;
		font-size: 1.5rem;
		font-family: $font-bold;
		letter-spacing: .3px;
		line-height: (22/15);
		vertical-align: middle;
		display: none;
	}

	.mobile-nav-toggler__link-text-close-aural {
		display: none;
	}

	.mobile-nav-toggler__link-extra {
		position: relative;

		/*
		MODIFIERS
		----------------------- */
		&.is-burger {
			position: absolute;
			font-size: .000001rem;
			color: transparent;
			left: 0;
			top: 50%;
			margin-top: -2px;
			display: block;
			width: 25px;
			height: 3px;
			background-color: $color-green;
			transition: background-color $animation-duration-std $animation-easing-std, opacity $animation-duration-std $animation-easing-std, transform $animation-duration-std $animation-easing-std;
		}
	}
}

Scripts

mobile-nav-toggler.js

/**
 * MobileNavToggler toggles state of stack navigation on mobile devices.
 * Class properties and decorators are supported.
 *
 * @module MobileNavToggler
 * @version v1.0.0
 *
 * @author Christian Rohowski, Oliver Broad
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class MobileNavToggler extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);

	/**
	 * Event & subscribe handling
	 */

	// Local Handlers
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.stackNavToggler}}':
				'stackTogglerClick',
			'{{context.EVENTS.click}} {{this.options.selectors.levelUpNavigation}}':
				'triggerBackEvent'
		};
	}

	// global Handlers
	get subscribe() {
		return {
			'{{context.EVENTS.mobileNavToggler.addBackButton}}': 'addBackButton',
			'{{context.EVENTS.mobileNavToggler.removeBackButton}}': 'removeBackButton'
		};
	}

	addBackButton() {
		this.$el.addClass(this.options.classes.multi);
	}

	triggerBackEvent() {
		this.context.Vent.trigger(this.context.EVENTS.stackNavigation.closePresentLevel);
	}

	removeBackButton() {
		this.$el.removeClass(this.options.classes.multi);
	}

	/**
	 * Handle click on navigation toggler icon
	 *
	 * @param {Object} e - Event object
	 */
	stackTogglerClick(e) {
		e.preventDefault();

		this.context.Vent.trigger(this.context.EVENTS.stackNavigation.toggle);
	}

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				stackNavToggler: '[data-js-item="toggle-stack-navigation"]',
				stackNavigation: '[data-js-module="stack-navigation"]',
				levelUpNavigation: '[data-js-item="level-up-navigation"]'
			},
			classes: {
				active: 'is-active',
				expanded: 'is-expanded',
				multi: 'is-multi'
			}
		};

		super(obj, options);
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default MobileNavToggler;

HTML Output

Default

<nav class="c-mobile-nav-toggler" data-js-module="mobile-nav-toggler">
	<ul class="mobile-nav-toggler__list">
		<li class="mobile-nav-togler__list-item is-back">
			<button class="mobile-nav-toggler__list-link is-back" data-js-item="level-up-navigation"><span class="mobile-nav-toggler__link-content is-back"><span class="mobile-nav-toggler__link-extra is-back"></span></span><span class="mobile-nav-toggler__link-text is-back">Zurück<span class="mobile-nav-toggler__link-text-aural is-aural"> zur vorherigen Ebene</span></span><span class="mobile-nav-toggler__link-text-close is-back"><span class="mobile-nav-toggler__link-text-close-aural is-aural">
					</span></span></button></li>
		<li class="mobile-nav-togler__list-item">
			<button class="mobile-nav-toggler__list-link is-burger" data-js-item="toggle-stack-navigation"><span class="mobile-nav-toggler__link-content is-burger"><span class="mobile-nav-toggler__link-extra is-burger"></span></span><span class="mobile-nav-toggler__link-text is-burger">Menü<span class="mobile-nav-toggler__link-text-aural is-aural"> öffnen</span></span><span class="mobile-nav-toggler__link-text-close is-burger"><span class="mobile-nav-toggler__link-text-close-aural is-aural">Menü
					</span>Schließen</span></button></li>
	</ul>
</nav>

MOBILE-NAV-TOGGLER (Globale Elemente )

src/app/core/components/mobile-nav-toggler/templates

Demo Section

Default

Readme

mobileNavToggler (`coreComponent`)

Description

JIRA

Requirements

Fields

`mobile-nav-toggler.hbs`

Settings

Content

`mobile-nav-toggler__list.hbs`

Settings

Content

`mobile-nav-toggler__item.hbs`

Settings

Content

`mobile-nav-toggler__link.hbs`

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

mobile-nav-toggler.hbs

mobile-nav-toggler__item.hbs

mobile-nav-toggler__link.hbs

mobile-nav-toggler__list.hbs

Data File

mobile-nav-toggler.hjson

Styles

mobile-nav-toggler.scss

Scripts

mobile-nav-toggler.js

HTML Output

Default

Wonach suchst du?

MOBILE-NAV-TOGGLER (Globale Elemente )

src/app/core/components/mobile-nav-toggler/templates

Demo Section

Default

Readme

mobileNavToggler (coreComponent)

Description

JIRA

Requirements

Fields

mobile-nav-toggler.hbs

Settings

Content

mobile-nav-toggler__list.hbs

Settings

Content

mobile-nav-toggler__item.hbs

Settings

Content

mobile-nav-toggler__link.hbs

Settings

Content

JavaScript Options

SASS

Variables

Modifier Classes

Templates

mobile-nav-toggler.hbs

mobile-nav-toggler__item.hbs

mobile-nav-toggler__link.hbs

mobile-nav-toggler__list.hbs

Data File

mobile-nav-toggler.hjson

Styles

mobile-nav-toggler.scss

Scripts

mobile-nav-toggler.js

HTML Output

Default

Wonach suchst du?

mobileNavToggler (`coreComponent`)

`mobile-nav-toggler.hbs`

`mobile-nav-toggler__list.hbs`

`mobile-nav-toggler__item.hbs`

`mobile-nav-toggler__link.hbs`