IRMA

Secondary Nav 

<div class="secondary-nav" data-nav-type="">
    <div class="inner">
        <ul class="nav-list">
        </ul>

        <button type="button" class="btn btn-more js-hidden-nav js-btn-modal" data-modal="secondary-nav">
			<svg viewBox="0 0 50 50">
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-ellipsis"></use>
			</svg>
		</button>

        <div class="secondary-nav-modal js-modal" data-modal="secondary-nav">
            <div class="secondary-modal-inner">
                <ul class="modal-list">

                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="secondary-nav" data-nav-type="{{ navType }}">
	<div class="inner">
		<ul class="nav-list">
			{{#each pageSections }}
				<li class="list-item {{#if ( eq title ../pageTitle )}}-active{{/if}}">
					<a href="{{ @root.basePath }}{{ ../pageClass }}--{{ slug }}{{ @root.baseExtension }}" title="pageTitle" {{#if ( eq title ../pageTitle )}}tabindex="-1"{{/if}} >{{ title }}</a>
				</li>
			{{/each}}
		</ul>

		<button type="button" class="btn btn-more js-hidden-nav js-btn-modal" data-modal="secondary-nav">
			<svg viewBox="0 0 50 50">
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-ellipsis"></use>
			</svg>
		</button>

		<div class="secondary-nav-modal js-modal" data-modal="secondary-nav">
			<div class="secondary-modal-inner">
				<ul class="modal-list">

				</ul>
			</div>
		</div>
	</div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .secondary-nav {
	position: relative;

	width: 100%;
	height: calc(10rem + 5px);
	margin-top: 6rem;

	@include font-size-small;

	transition: {
		property: height, visibility, opacity, padding-top;
		duration: $transition;
		timing-function: linear;
	}

	body:not(.-search-results) .page-container &.-fixed {
		position: fixed;
		top: 45rem;
		z-index: 1;

		margin-top: 0;

		// background: $color-irma-white;
		box-shadow: 0 0 10px 0 rgba(black, 0.075);

		&::before {
			opacity: 1;
			visibility: visible;
		}

		.nav-list {
			// background: $color-irma-white;
		}

		& + .content {
			margin-top: calc(22rem + 5px);
		}
	}

	&.-collapsed {
		.inner {
			padding-right: 12.5rem;
		}

		.nav-list {
			justify-content: space-between;
		}

		.btn-more {
			visibility: visible;
		}
	}

	&::before {
		content: '';

		position: absolute;

		display: block;
		width: 100%;
		height: 100%;

		background: white;
		opacity: 0;
		visibility: hidden;

		transition: all $transition;
	}

	.inner {
		position: relative;

		height: 100%;
	}

	.nav-list {
		display: flex;
		overflow: hidden;
		justify-content: flex-start;
		height: 100%;
		@include max-width;

		background: white;

		transition: background $transition;
	}

	.list-item {
		position: relative;

		display: flex;
		flex: 0;
		align-items: center;
		height: 100%;
		max-width: 30rem;

		@include font-primary-bold;
		text-align: center;
		text-transform: uppercase;

		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
			flex: none;
		}

		&.-inactive {
			display: none;
		}

		&.-active {
			color: $color-irma-slate;

			&::after {
				content: '';

				position: absolute;
				left: 0;
				bottom: 0;

				display: block;
				width: 100%;
				height: 5px;

				background: $color-irma-primary;
			}
		}

		a {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			height: 100%;
			padding: 0 5rem;

			color: rgba($color-irma-slate, 0.7);

			text-decoration: none;

			transition: $transition;

			&:focus, &:hover {
				color: $color-irma-slate;
			}
		}
	}

	.btn-more {
		position: absolute;
		top: 0;
		right: 0;

		justify-content: center;
		align-items: center;
		width: 12.5rem;
		height: 100%;

		visibility: hidden;
		background: white;

		svg {
			width: 100%;
			height: 100%;

			opacity: 0.7;

			transition: all $transition;

			* {
				fill: currentColor;
			}
		}		
	}

	&[data-nav-type='ordered'] {
		.nav-list {
			overflow-x: hidden;

			a {
				.list-item {
					&.-active {
						&::after {
							width: calc(100% + 1rem);
						}
					}
				}

				&:not(:last-child) {
					.list-item {
						padding-right: 6rem;
						
						&::before {
							content: '';

							position: absolute;
							right: 0;
							top: 0;
							transform: translateX(100%);
							z-index: 2;

							display: block;
							width: 4.25rem;
							height: 100%;

							background: {
								image: url('../img/chevron.svg');
								size: 100%;
								position: center;
								repeat: no-repeat;
							}
						}
					}
				}

				&:not(:first-child) {
					.list-item {
						padding-left: 9rem;
					}
				}
			}
		}
	}

	.secondary-nav-modal {
		position: absolute;
		bottom: 0;
		right: 0;
		transform: translateY(100%);
		z-index: 10;

		visibility: hidden;
		opacity: 0;

		transition: all $transition;

		&.-active:not(.-empty) {
			visibility: visible;
			opacity: 1;
		}

		.modal-list {
			transform: translateY(2.8rem);

			width: 50rem;
			padding: 3rem;

			background: white;
			box-shadow: 0 1rem 3rem 0 rgba(black, 0.075);

			&::before {
				content: '';

				position: absolute;
				top: 0;
				right: 6.25rem;
				transform: translate(50%, -50%) rotate(45deg);

				display: block;
				width: 4rem;
				height: 4rem;

				background: white;
			}

			.list-item {
				a {
					padding: 3rem;

					text-align: left;
				}
			}
		}
	}
}
  • URL: /components/raw/secondary-nav/_secondary-nav.scss
  • Filesystem Path: components/01-components/secondary-nav/_secondary-nav.scss
  • Size: 3.9 KB
  • Content: 
    /* 
 *	_secondary-nav.js
 */

irma.secondaryNav = (function () {
	'use strict';	

	var $nav, $inner, $page, $body, $items, $btnMore, scrollTop, currentWidth,	
		lastScroll = 0,
		lastWidth = 0,
		navLimit = 0;

	var update = function () {
		requestAnimationFrame(update);

		if (lastScroll != scrollTop) {
			lastScroll = scrollTop;

			if ($page.is('.-search-results')) {
				$nav.removeClass('-fixed');
				$body.removeClass('-nav-fixed');
			}
			else if ($nav.length > 0) {

				if (scrollTop < irma.rem * 6) {
					$nav.removeClass('-fixed');
					$body.removeClass('-nav-fixed');
				}
				else {
					$nav.css({
						'transition': 'none'
					});
					$nav.addClass('-fixed');
					$body.addClass('-nav-fixed');
					setTimeout(function () {
						$nav.removeAttr('style');
					}, 10);
				}
			}
		}
	};

	var resize = function () {
		requestAnimationFrame(resize);

		if (lastWidth != currentWidth) {
			lastWidth = currentWidth;

			var totalWidth = 0,
				maxWidth = $inner.outerWidth() - $btnMore.width();

			navLimit = 0;

			$items.removeClass('-inactive');

			$items.each(function (i) {
				totalWidth += $(this).width();

				if (totalWidth > maxWidth && navLimit === 0) {
					if (i + 1 == $items.length && totalWidth <= $inner.outerWidth()) {
						navLimit = 0;
					}
					else {
						navLimit = i;
					}
				}
			});

			if (navLimit > 0) {
				$items.filter(function (i) {
					return i >= navLimit;
				}).addClass('-inactive');

				if ($items.filter('.-active.-inactive').length) {
					$items.filter('.-active.-inactive').removeClass('-inactive');
					$items.eq(navLimit - 1).addClass('-inactive');
				}

				$nav.find('.modal-list').html($items.filter('.-inactive').clone().removeClass('-inactive'));

				$nav.addClass('-collapsed');
				$nav.find('.secondary-nav-modal').removeClass('-empty');
			}
			else {
				$nav.removeClass('-collapsed');

				$nav.find('.modal-list').empty();
				$nav.find('.secondary-nav-modal').addClass('-empty').removeClass('-active');
			}
		}
	};

	var init = function () {
		$nav = $('.secondary-nav');
		$inner = $nav.find('.inner');
		$page = $('.page-container');
		$body = $('body');
		$items = $nav.find('.list-item');
		$btnMore = $nav.find('.btn-more');
		scrollTop = $('body').scrollTop();
		currentWidth = $nav.width();

		update();

		setTimeout(function () {
			resize();
		}, 100);

		$(window).on('scroll', function () {
			scrollTop = $('body').scrollTop();
		}).on('resize', function () {
			currentWidth = $nav.width();
		});
	};

	return {
		init: init,
		update: update
	};

}());
  • URL: /components/raw/secondary-nav/secondary-nav.js
  • Filesystem Path: components/01-components/secondary-nav/secondary-nav.js
  • Size: 2.6 KB

There are no notes for this item.