Merge pull request #10 from nhsevidence/feature/navigation

Feature navigation
nice-digital · Jul 25, 2016 · b86d53c · b86d53c
2 parents bf56c5f + 069eedd
commit b86d53c
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 13 deletions.
diff --git a/src/stylesheets/_bootstrap.scss b/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';
diff --git a/src/stylesheets/components/_breadcrumbs.scss b/src/stylesheets/components/_breadcrumbs.scss
@@ -6,7 +6,7 @@
 	&__crumb {
 		display: inline-block;
 
-		&.active {
+		&--active {
 			color: get-colour(grey);
 		}
 

diff --git a/src/stylesheets/components/_navbar.scss b/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);
+		}
+	}
+}
diff --git a/web/server/views/layouts/_layout.njk b/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

diff --git a/web/server/views/style-guide/breadcrumbs.njk b/web/server/views/style-guide/breadcrumbs.njk
@@ -8,14 +8,14 @@
 	<section id="breadcrumbs">
 
 		<ul>
-			<li>Use <code>class="active"</code> for current page</li>
+			<li>Use <code>class="breadcrumbs__crumb--active"</code> for current page</li>
 		</ul>
 
 		{% example -%}
 			<ol class="breadcrumbs">
 				<li class="breadcrumbs__crumb"><a href="#">Home</a></li>
 				<li class="breadcrumbs__crumb"><a href="#">Nice Guidance</a></li>
-				<li class="breadcrumbs__crumb active">Conditions and diseases</li>
+				<li class="breadcrumbs__crumb breadcrumbs__crumb--active">Conditions and diseases</li>
 			</ol>
 		{%- endexample %}
 
@@ -27,7 +27,7 @@
 			<ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
 				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Home</a></li>
 				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Nice Guidance</a></li>
-				<li class="breadcrumbs__crumb active" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">Population groups</li>
+				<li class="breadcrumbs__crumb breadcrumbs__crumb--active" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">Population groups</li>
 			</ol>
 		{%- endexample %}
 	</section>

diff --git a/web/server/views/style-guide/navigation.njk b/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 %}