Responsive nav - wip

nav.html

<header role="banner">
	<div class="wrap wrap--large clearfix">
		<div class="clearfix">
			<a href="/" class="logo">
				<img src="/assets/img/tgdh-logo.svg" alt="" class="logo__site" />
			</a>
			<button class="button--primary toggle--nav--main" data-toggle="nav--main">Menu</button>
		</div>

		<nav class="nav nav--main" role="navigation">
			<ul class="nav__list">
				<li class="nav__item">
					<a href="nav__link">Link</a>
				</li>
				<li class="nav__item">
					<a href="nav__link">Link</a>
				</li>
				<li class="nav__item">
					<a href="nav__link">Link</a>
				</li>
			</ul>
		</nav>
		
	</div>
</header>

nav.scss

/* ===========================================================

	#NAV

=========================================================== */


.nav--main {

	.nav__list {
		padding: 1rem 0;
		list-style: none;
	}

	.nav__link {
		color: #fff;
		display: block;
		padding: 1rem 0;

		&:hover,
		&:focus {
			color: $sec;
		}

		&.active {
			color: $sec;
		}
	}

}

/* NO JS ================================================ */

.no-js {

	.toggle--nav--main {
		display: none;
	}

}

/* JS =================================================== */

.js {

	.page-header {
		transition: transform $speed ease;
		width: 100%;
	}

	.toggle--nav--main {
		float: right;
		margin: 1.5rem 2rem 0;
		padding: .5rem 1rem;
		transition: .3s ease;
		color: #fff;
		border-color: #fff;
	}

	.nav--main {
		background-color: $grey-1;
		left: 0;
		opacity: 0;
		position: absolute;
		transform: translateY( -2rem );
		transition: transform $speed ease, opacity $speed ease, visibility $speed ease;
		visibility: hidden;
		width: 100%;
	}

	&.nav--main--open .nav--main {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.nav--main .nav__link {
		padding: 1rem 2rem;
	}

} 

@include respond-min( $mq-small ) {

	.nav--main {
		float: right;
	}
	.nav--main .nav__list {
		padding: 0;
	}
	.nav--main .nav__item {
		display: inline-block;

		&:last-child {
			.main-nav__link {
				padding-right: 0;
			}
		}
	}
	.nav--main .nav__link {
		padding: 2rem 1.5rem;
	}

	/* JS =================================================== */

	.js {

		.toggle--nav--main {
			display: none;
		}

		.nav--main {
			float: right;
			opacity: 1;
			position: static;
			transform: translateY( 0 );
			visibility: visible;
			width: auto;
		}
		.nav--main .nav__link {
			padding: 2rem 1.5rem;
		}
	}

}