Navigation

The Navigation is used on every page, except for the user specific pages, it changes items according to site it is on.

<nav class="nav">
	<ul class="nav__list">
		<li class="nav__list__item">
			<a href="#" class="nav__list__item__link  nav__list__item__link--active">
				<span class="icon nav__list__item__link__icon">
					<svg></svg>
				</span>
				Home
			</a>
		</li>
		<li class="nav__list__item">
			<a href="#" class="nav__list__item__link">
				<span class="icon nav__list__item__link__icon">
					<svg></svg>
				</span>
				Favourites
			</a>
		</li>
		<li class="nav__list__item">
			<a href="#" class="nav__list__item__link">
				<span class="icon nav__list__item__link__icon">
					<svg></svg>
				</span>
				Lists
			</a>
		</li>
	</ul>
</nav>

Notes

To set a link to active use the --active modifier on the navigation link (nav__list__item__link)

SCSS

@mixin link-active {
	.nav__list__item__link__icon {
		color: $secondary;
	}
}

.nav {
	box-shadow: $box-shadow-3;
	padding: em(5) 20%;
	@include media-breakpoint-down(sm) {
        padding: em(5) 10%;
    }

	&__list {
		@include list-unstyled();
		display: flex;
		justify-content: space-between;
		margin-bottom: 0;
		&__item {
			&__link {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $grey-2;
				&:focus {
					outline: none
				}
				&:hover, &:focus {
					color: $grey-2;
					@include link-active();
					text-decoration: none;
				}
				&__icon {
					font-size: em(28);
					transition: all 0.4s ease;
					color: $font-color;
				}
				&--active {
					@include link-active();
				}
			}
		}
	}
}