Navigation WIP

Added potentially redundant navbar and started with normal nav.

src/stylesheets/_bootstrap.scss

@@ -26,5 +26,6 @@
 @import 'components/buttons';
 @import 'components/footer';
 @import 'components/phase';
+@import 'components/navbar';
 @import 'components/breadcrumbs';
 @import 'components/tables';

src/stylesheets/components/_navbar.scss

@@ -0,0 +1,27 @@
+.navbar {
+	background-color: get-colour(grey);
+
+	&__inner {
+		@extend .container;
+		overflow: hidden;
+	}
+
+	&__brand {}
+	&__nav {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+	}
+
+	&__item {
+		display: inline-block;
+
+		a {
+			display: block;
+			padding: 20px 15px;
+		}
+		&--active {
+			border-bottom: 5px solid get-colour(orange);
+		}
+	}
+}

web/server/views/layouts/_layout.njk

@@ -53,16 +53,17 @@
 		</div>
 	{% endif %}
 
-	<header>
-		<nav role="nav">
-			<ul>
-				<li><a href="/">NICE Experience</a></li>
-				<li><a href="/style-guide/">Style guide</a></li>
-				<li><a href="/sass/">SASS</a></li>
-				<li><a href="/javascript/">JavaScript</a></li>
+	<nav class="navbar" role="nav">
+		<div class="navbar__inner">
+			<a class="navbar__inner__brand"></a>
+			<ul class="navbar__inner__nav">
+				<li class="navbar__inner__nav__item navbar__inner__nav__item--active"><a href="/">NICE Experience</a></li>
+				<li class="navbar__inner__nav__item"><a href="/style-guide/">Style guide</a></li>
+				<li class="navbar__inner__nav__item"><a href="/sass/">SASS</a></li>
+				<li class="navbar__inner__nav__item"><a href="/javascript/">JavaScript</a></li>
 			</ul>
-		</nav>
-	</header>
+		</div>
+	</nav>
 
 	{% block body %}
 		This is the default body content

web/server/views/style-guide/navigation.njk

@@ -0,0 +1,48 @@
+{% extends "../layouts/_sidebar.njk" %}
+{% set title = "Navigation" %}
+
+{% block main %}
+
+	<h1>Navigation</h1>
+
+	<ul>
+		<li><a href="#nav">Nav</a></li>
+		<li><a href="#navbar">Navbar</a></li>
+	</ul>
+
+	<section id="nav">
+
+		<h2>Nav</h2>
+
+		{% example -%}
+		<nav class="nav" role="nav">
+			<ul class="nav__pills nav__pills-justified">
+				<li>One</li>
+				<li>Two</li>
+				<li>Three</li>
+			</ul>
+		</nav>
+		{%- endexample %}
+
+	</section>
+
+	<section id="navbar">
+
+		<h2>Navbar</h2>
+
+		{% example -%}
+			<nav class="navbar" role="nav">
+				<div class="navbar__inner">
+					<a class="navbar__brand"></a>
+					<ul class="navbar__nav">
+						<li class="navbar__item navbar__item--active"><a href="/">NICE Experience</a></li>
+						<li class="navbar__item"><a href="/style-guide/">Style guide</a></li>
+						<li class="navbar__item"><a href="/sass/">SASS</a></li>
+						<li class="navbar__item"><a href="/javascript/">JavaScript</a></li>
+					</ul>
+				</div>
+			</nav>
+		{%- endexample %}
+	</section>
+
+{% endblock %}