From 388cbe3f7f37a4ed5fa1899954e7c483da048e61 Mon Sep 17 00:00:00 2001
From: jeznorth <twenty15creative@gmail.com>
Date: Fri, 27 Oct 2017 09:17:00 -0700
Subject: [PATCH] [MEM-591] Update Header / Footer Components

---
 modules/core/client/scss/global/footer.scss   | 106 +++-
 modules/core/client/scss/global/header.scss   | 471 ++++++++++--------
 modules/core/client/scss/global/layout.scss   |  67 ++-
 modules/core/client/scss/themes/default.scss  |  14 +-
 .../core/client/views/footer.client.view.html |  47 +-
 .../core/client/views/header.client.view.html | 142 +++---
 .../core/client/views/menu.client.view.html   |   9 +-
 modules/users/client/scss/users.scss          |   5 +-
 8 files changed, 514 insertions(+), 347 deletions(-)

diff --git a/modules/core/client/scss/global/footer.scss b/modules/core/client/scss/global/footer.scss
index 502da65fd..6f47374ba 100644
--- a/modules/core/client/scss/global/footer.scss
+++ b/modules/core/client/scss/global/footer.scss
@@ -1,16 +1,102 @@
-tmpl-header {
-	display: block;
-	flex: 0 0 auto;
-}
+$app-footer-font-size-sm: 0.85rem;
+$app-footer-font-size: 1.15rem;
+$app-footer-color: #fff;
 
 .app-footer {
 	padding: 1rem 2rem;
-	border-top: 2px solid $corp-gold;
+	color: $app-footer-color;
+	border-top: 4px solid $corp-gold;
 	background: $corp-blue;
-	color: #FFF;
-	font-size: $footer-font-size;
-	
-	a {
-		color: #FFF;
+	text-align: center;
+	font-size: $app-footer-font-size-sm;
+
+	&__nav {
+		ul {
+			margin: 0;
+			padding: 0;
+			list-style-type: none;
+		}
+		
+        li {
+            display: inline-block;
+            margin: 0.25rem 0;
+			
+			+ li {
+				&:before {
+					position: relative;
+					top: -1px;
+					display: inline-block;
+					margin-left: 0.5rem;
+					margin-right: 0.75rem;
+					content: '|';
+				}
+			}
+        }
+
+		a {
+			color: $app-footer-color;
+			text-decoration: none;
+		}
 	}
+
+}
+
+@media (min-width: 768px) {
+	.app-footer {
+		text-align: left;
+		font-size: $app-footer-font-size;
+	}
+}
+
+.footer-admin {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    text-align: center;
+
+    .gov-links {
+        margin-top: 0;
+        margin-bottom: 1rem;
+        padding: 0;
+
+
+    }
+
+    .connect-links {
+        margin-top: -0.5rem;
+        margin-bottom: 0;
+
+        li {
+            margin: 0.25rem;
+            display: inline-block;
+
+            img {
+                width: 2rem;
+                height: 2rem;
+            }
+        }
+    }
+}
+
+@media (min-width: 760px) {
+    .footer-admin {
+        margin-top: 3rem;
+
+        .gov-links {
+            float: left;
+            margin-bottom: 0;
+        }
+
+        .connect-links {
+            margin-right: 3.5rem;
+            float: right;
+        }
+    }
+}
+
+@media (min-width: 1200px) {
+    .footer-admin {
+        .connect-links {
+            margin-right: 0;
+        }
+    }
 }
\ No newline at end of file
diff --git a/modules/core/client/scss/global/header.scss b/modules/core/client/scss/global/header.scss
index c7acf18c9..a1fe8ee7d 100644
--- a/modules/core/client/scss/global/header.scss
+++ b/modules/core/client/scss/global/header.scss
@@ -1,256 +1,301 @@
-$header-height: 6.2rem;
-$header-height-sm: 5.2rem;
+// Colors
+$primary:              			#003366;
+$gold:                 			#fcba19;
 
-tmpl-header {
-	display: block;
-	flex: 0 0 auto;
-}
+// Header
+$header-height: 	   			64px;
+$header-bg:			   			#003366;
+$header-font-color:	   			#fff;
 
-.app-header {
-	position: relative;
-	margin-bottom: 0;
-	height: $header-height-sm;
-	min-height: $header-height-sm;
-	background-color: $corp-blue;
-	border-bottom: 2px solid $corp-gold;
-	
-	.navbar {
-		border: none;
-		border-radius: 0;
-	}
-	
-	.navbar-header {
-		float: left;
+// Main Navigation
+$mn-font-size:                  1.3rem; //14px
+$mn-dropdown-menu-size:         0.875rem; //13px
+$mn-color:                      #fff;
+$mn-border-color:               #5f79a2;
+$mn-hover-bg:                   #002663;
+$mn-hover-color:                #fff;
+$mn-toggle-color:               $gold;
+$mn-dropdown-bg:                #002663;
+$mn-dropdown-hover-color:		$gold;
+
+header {
+    &.app-header {
+        @include clearfix;
+        border-bottom: 4px solid $gold;
+        background: $header-bg;
+        color: $header-font-color;
 	}
-	
-	.navbar-brand {
-		padding: 0;
-		overflow: hidden;
 
-		a {		
+	.navbar {
+		margin-bottom: 0;
+
+		&-toggle {
+			margin-top: 10px;
+			margin-right: 12px;
+			padding: 9px;
+			width: 41px;
+			height: 36px;
+			border: 2px solid $gold;
+
+			.icon-bar {
+				width: auto;
+				background-color: $gold;
+				
+				+ .icon-bar {
+					margin-top: 3px;
+				}
+			}
+
+			&.collapsed {
+				border: 2px solid transparent;
+
+				.icon-bar {
+					background-color: $mn-color;
+				}
+			}
+		}
+
+		&-brand {
 			display: block;
-			width: 129px;
-			height: 50px;
-			overflow: hidden;
-			border: 1px solid transparent;
-			background-image: url('/modules/core/client/img/brand/mem-logo-inverted-sm.png');
+			padding: 0;
+			width: 155px;
+			height: 55px;
+			background-image: url("/modules/core/client/img/brand/mem-logo-inverted-lg.png");
 			background-position: center;
+			background-repeat: no-repeat;
 		}
 
-	}
-	
-	.navbar-nav {
-		margin: 0;
-		float: right;
-		
-		> li {
-			width: 4rem;
-			display: inline-block;
+		&-collapse {
+			padding: 0;
+			box-shadow: none;
 		}
-		
-		> li > a {
-			width: 4rem;
-			height: 4rem;
-			overflow: hidden;
-		}
-		
-		.glyphicon {
-			color: #FFF;
-			
-			+ span {
-				display: none;
+
+		&-nav {
+			@include flexbox();
+			@include flexflow(column nowrap);
+			margin: 0;
+			margin-top: 0.65rem;
+
+			> li {
+				@include flex(1 1 auto);
+				line-height: auto;	
+	
+				> a {
+					padding: 1.35rem 1.5rem;
+					color: $mn-color;
+					letter-spacing: 0.07rem;
+					text-transform: uppercase;
+					font-size: $mn-font-size;
+					font-weight: 700;
+					cursor: pointer;
+
+					&:hover,
+					&:focus {
+						color: $mn-hover-color;
+						background: $mn-hover-bg; 
+					}
+
+					&.user-details {
+						text-transform: none;
+					}
+				}
+	
+				> .dropdown-menu {
+					padding: 0;
+					border: none;
+					border-radius: 0;
+					background-color: $mn-dropdown-bg;
+
+					> li {
+						a {
+							padding: 1rem 1.25rem;
+							color: $mn-color;
+							white-space: normal;
+	
+							strong {
+								display: block;
+							}
+	
+							&:hover,
+							&:focus {
+								color: $gold;
+								background: $mn-hover-bg; 
+
+								.main-nav__menu-item--description {
+									color: $mn-color;
+								}
+							}
+						}
+					}
+				}
 			}
 		}
+
 	}
-}
 
-@media (min-width: 480px) {
-	.app-header {
-		.navbar-brand {
-			width: auto;
+	.nav {
+		.open {
+			a {
+				background: $mn-hover-bg; 
+
+				&:hover,
+				&:focus {
+					background: $mn-hover-bg; 
+				}
+			}
 		}
 	}
+
 }
 
-@media (min-width: 900px) {
-	.app-header {
-		height: $header-height;
-		
-		.navbar {
-			height: $header-height;
-			margin: 0;
-		}
+.main-nav {
+	&__menu-item {
 
-		.navbar-brand {
-			a {		
-				width: 155px;
-				height: 60px;
-				background-image: url('/modules/core/client/img/brand/mem-logo-inverted-lg.png');
-				background-position: center;
-			}
-		}
-		
-		.navbar-nav {
-			margin: 1rem;
-			float: right;
-			
-			> li > a,
-			> li > a:hover,
-			> li > a:focus {
-				padding: 1rem 1.5rem;
-				color: #FFF;
-				border: none;
-				background: transparent;
-			}
-		}
-		
-		.nav {
-			> .open > a,
-			> .open > a:hover,
-			> .open > a:focus {
-				background: transparent;
-			}
-		}
-		
-		.dropdown-menu {
-			border-radius: 0;
-		}
-		
-		.vert-pipe {
-			border-left: 1px solid #FFF;
-			height: 2.5rem;
-			margin-top: 0.7rem;
+		&--description {
+			display: block;
+			min-width: 24rem;
 			opacity: 0.5;
-			margin-left: 1rem;
-			margin-right: 1rem;
-		}
-		
-		.user-menu {
-			margin-right: 1rem;
+			font-size: 1.2rem;
 		}
 	}
-}
 
-// Custom Navigation
-.custom-nav {
-	float: right;
-	margin-top: 0.7rem;
-	margin-right: 1rem;
-	margin-left: 1rem;
-	margin-bottom: 0;
-	padding: 0;
-	list-style-type: none;
-	
-	.custom-nav-item {
-		display: inline-block;
-		
-		a {
+	&__vert-pipe {
+		div {
+			margin-top: 1.25rem;
+			margin-right: 0.5rem;
+			margin-left: 0.5rem;
 			display: block;
-			min-width: 3.75rem;
-			padding: 0.75rem 0;
-			font-size: 1.3rem;
-			color: #FFF;
-			text-align: center;
-			text-decoration: none;
-			border: 1px solid transparent;
-			border-radius: 0.4rem;
-			cursor: pointer;
-
-			&:focus {
-				border: 1px solid $header-focus-border-color;
-			}
+			width: 1px;
+			height: 40px;
+			background-color: $mn-border-color;
 		}
+	}
+}
 
-		.glyphicon {
-			+ span {
-				display: none;
+@media (max-width: 1199px) {
+	header {
+		.navbar {
+			&-header {
+				float: none;
 			}
-		}
-	}
-	
-	.dropdown-menu {
-		margin-top: 1.5rem;
-		padding: 0;
-		border: none;
-		border-radius: 0;
-		background: #FFF;
-		
-		li {
-			display: block;
-			
-			a {
-				padding: 0.7rem 1.5rem;
-				font-size: 1.3rem;
-				color: #003366;
-				text-align: left;
-				border: 1px solid transparent;
-				border-radius: 0;
 
-				&:focus {
-					text-shadow: 1px 1px #FFF;
-					border: 1px solid transparent;
+			&-nav {
+				float: none;
+
+				> li {
+					> a {
+						border-top: 1px solid $mn-border-color;
+					}
+
+					&.main-nav__vert-pipe {
+						display: none;
+					}
+				}
+
+				.open {
+					.dropdown-toggle {
+						color: $gold;
+					}
+
+
+					> .dropdown-menu {
+						position: static;
+						float: none;
+						margin-top: -0.5rem;
+						padding-bottom: 0.5rem;
+						width: 100%;
+						background-color: $mn-dropdown-bg;
+						
+
+						> li {
+							> a {
+								padding: 1rem 1.35rem;
+							}
+						}
+					}
 				}
 			}
 
-			.glyphicon {
-				display: table-cell;
+			&-toggle {
+				display: block !important;
+			}
 
-				+ span {
-					display: table-cell;
-					padding-left: 1rem;
+			&-collapse {
+				&.collapse {
+					display: none !important;
+					
+					&.in {
+						display: block !important;
+					}	
 				}
 			}
 		}
 	}
-	
-	.open {
-		.dropdown-toggle {
-			background: #1c2b4f;
-			box-shadow: 0 0 1rem #11203a inset;
-		}
-	}
-	
-	.dashboard-item {
-		margin-right: 0.4rem;
-	}
+
 }
 
-@media (min-width: 900px) {
-	.custom-nav {
-		float: right;
-		margin-top: 1.3rem;
-		margin-right: 1rem;
-		margin-left: 1rem;
-		margin-bottom: 0;
-		
-		.custom-nav-item {
-			display: inline-block;
-			
-			a {
-				display: block;
-				padding: 0.75rem;
-				color: #FFF;
-				text-decoration: none;
+@media (min-width: 1200px) {
+	header {
+		.navbar {
+			&-brand {
+				margin-bottom: 2px;
+				margin-left: 2px;
+				width: 155px;
+				height: $header-height;
+				background-image: url('/modules/core/client/img/brand/mem-logo-inverted-lg.png');
 			}
 
-			.glyphicon {
-				display: none;
-				
-				+ span {
-					display: inline;
-				}
-			}
-		}
+			&-nav {
+				@include flexflow(row nowrap);
+				margin-top: 0;
+				float: right;
 		
-		.dropdown-menu {
-			margin: 0;
-			border: none;
-			border-radius: 0;
-			background: #FFF;
-		}
+				> li {
+					@include flex(1 1 auto);
 		
-		.dashboard-item {
-			margin-right: 0;
+					> a {
+						padding-top: 22px;
+						height: 66px;
+						color: $mn-color;
+					}
+
+					> .dropdown-menu {
+						padding: 0.5rem;
+					}
+				}
+
+				.dropdown {
+					&:hover {
+						.dropdown-toggle {
+							background: $mn-hover-bg;  
+						}
+
+						.dropdown-menu {
+							display: block;
+						}
+					}
+
+					&.open {
+						.dropdown-toggle {
+							background: transparent;
+						}
+
+						.dropdown-menu {
+							display: none;
+						}
+
+						&:hover {
+							.dropdown-toggle {
+								background: $mn-hover-bg; 
+							}
+
+							.dropdown-menu {
+								display: block;
+							}
+						}
+					}
+				}
+			}
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/modules/core/client/scss/global/layout.scss b/modules/core/client/scss/global/layout.scss
index a57535dbc..5a6e8d530 100644
--- a/modules/core/client/scss/global/layout.scss
+++ b/modules/core/client/scss/global/layout.scss
@@ -32,18 +32,30 @@ section {
 
 // SIDENAV
 .sidenav {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 22rem;
+    z-index: 2;
+
+    &-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        z-index: 1;
+
+        &.open {
+            visibility: visible;
+            
+            .sidenav {
+                transform: translateX(0);
+            }
+        }
+    }
 
 	.nav-pills {
 		a {
 			padding: 0.8rem 1.5rem;
-			font-size: 1.3rem;
+			font-size: 1.4rem;
 			font-weight: normal;
 			color: $link-color;
-			text-shadow: $sidenav-text-shadow;
 			border: 1px solid transparent;
 			border-radius: 0;
 
@@ -57,8 +69,12 @@ section {
 					padding-left: 0.7rem;
 				}
 			}
+
+			&:hover {
+				background: $sidenav-hover-bg;
+			}
 		}
-	}
+    }
 
 	h4 {
 		margin-left: 1.5rem;
@@ -76,23 +92,22 @@ section {
 
 	.project-home-link {
 		display: block;
-		width: 22rem;
-		min-height: 6.2rem;
-		padding-top: 2.2rem;
-		padding-right: 1.5rem;
-		padding-left: 4.25rem;
-		padding-bottom: 2.2rem;
-		font-weight: bold;
 		color: #1a5a96;
 		text-decoration: none;
-		line-height: 1.5rem;
+		line-height: 1.75rem;
+		font-weight: bold;
 		background: #EEE;
 
-		.glyphicon {
-			position: absolute;
-			top: 1.8rem;
-			left: 1rem;
-			font-size: 2.4rem;
+		&__inner-container {
+			display: table;
+			width: 100%;
+		}
+
+		&__project-name {
+			display: table-cell;
+			padding: 1.5rem;
+			vertical-align: middle;
+			height: 6.4rem;
 		}
 	}
 }
@@ -105,7 +120,7 @@ section {
 }
 
 .view-title-container {
-	height: 6.2rem;
+	height: 6.4rem;
 	padding: 1.5rem 2rem;
 	border-bottom: 1px solid #EEE;
 	background: #FFF;
@@ -218,13 +233,11 @@ section {
             background-color: $view-panel-bg;
             transform: translateX(-22rem);
             transition: all 0.3s ease-out 0.1s;
-        }
+            z-index: 2;
 
-        .sidenav-overlay {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background: transparent;
+            &__inner-container {
+                width: 22rem;
+            }
         }
 
         &.open {
diff --git a/modules/core/client/scss/themes/default.scss b/modules/core/client/scss/themes/default.scss
index 833f9ccc7..ed66ef44d 100644
--- a/modules/core/client/scss/themes/default.scss
+++ b/modules/core/client/scss/themes/default.scss
@@ -54,9 +54,6 @@ $radio-btn-border-color: 	#ccc;
 $radio-btn-active-color: 	#fff;
 $radio-btn-active-bg: 		#5091cd;
 
-// HEADER
-$header-focus-border-color: #5475a7;
-
 // LEFT PANEL
 $left-panel-width: 			19rem;
 $left-panel-bg:				#FFF;
@@ -82,11 +79,12 @@ $view-panel-bg:             #FFF;
 $view-panel-border:         1px solid #EEE;
 
 // SIDE NAVIGATION
-$sidenav-bg: 				                #FFF;
-$sidenav-color: 			                $link-color;
-$sidenav-width:				                18rem;
-$sidenav-shadow:                            0 0 0.4rem #CCC;
-$sidenav-text-shadow:                       0 0 2px #FFF;
+$sidenav-bg: 				#FFF;
+$sidenav-color: 			$link-color;
+$sidenav-width:				18rem;
+$sidenav-shadow:            0 0 0.4rem #CCC;
+$sidenav-text-shadow:       0 0 2px #FFF;
+$sidenav-hover-bg:			#F7F8FA;
 
 // TABLES
 $table-bg: 					#FFF;
diff --git a/modules/core/client/views/footer.client.view.html b/modules/core/client/views/footer.client.view.html
index f50dd912d..b65e8a713 100644
--- a/modules/core/client/views/footer.client.view.html
+++ b/modules/core/client/views/footer.client.view.html
@@ -1,16 +1,33 @@
-<div class="app-footer clearfix" ng-cloak>
-	<div id="main-foot-content">
-		<div class="pull-left">
-				<a href="/" title="Home">Home</a> |
-				<a target="_new" href="http://www.gov.bc.ca/com/copyright.html" title="BC Government Copyright Information">Copyright</a> |
-				<a target="_new" href="http://www.gov.bc.ca/com/disclaimer.html" title="BC Government Warranty Disclaimer and Limitation of Liabilities Information">Disclaimer</a> |
-				<a target="_new" href="http://www.gov.bc.ca/com/privacy.html" title="BC Government Privacy Information">Privacy</a> |
-				<a target="_new" href="http://www.gov.bc.ca/com/accessibility.html" title="BC Government Accessibility Information">Accessibility</a> |
-				<a href ui-sref="contact" title="Contact Us">Contact Us</a> | 
-				<a ng-show="!footer.authentication.user" ui-sref="authentication.signin">Log In (Siteminder)</a>
-        			<span ng-show="!footer.authentication.user"> | </span> <a ng-show="!footer.authentication.user" href ui-sref="authentication.local">Log In (local)</a>
-				<!-- TODO: Siteminder! get the Siteminder logout url and set it here -->
-				<a ng-show="footer.authentication.user" href="/api/auth/signout" target="_self">Logout</a>
-    	</div>
-	</div>
+<div class="app-footer clearfix" id="app-footer" ng-cloak>
+	<nav class="app-footer__nav" aria-controls="footerNav">
+		<ul>
+			<li>
+				<a ui-sref="projects" title="Home">Home</a>
+			</li>
+			<li>
+				<a title="BC Government Copyright Information" href="http://www.gov.bc.ca/com/copyright.html">Copyright</a>
+			</li>
+			<li>
+				<a title="BC Government Warranty Disclaimer and Limitation of Liabilities Information" href="http://www.gov.bc.ca/com/disclaimer.html">Disclaimer</a>
+			</li>
+			<li>
+				<a title="BC Government Privacy Information" href="http://www.gov.bc.ca/com/privacy.html">Privacy</a>
+			</li>
+			<li>
+				<a title="BC Government Accessibility Information" href="http://www.gov.bc.ca/com/accessibility.html">Accessibility</a>
+			</li>
+			<li>
+				<a title="Contact the BC Environmental Assessment Office" ui-sref="contact">Contact Us</a>
+			</li>
+			<li ng-show="!footer.authentication.user">
+				<a ui-sref="authentication.signin">Log In (Siteminder)</a>
+			</li>
+			<li ng-show="!footer.authentication.user">
+				<a href ui-sref="authentication.local">Log In (Local)</a>
+			</li>
+			<li ng-show="footer.authentication.user">
+				<a href="/api/auth/signout" target="_self">Log Out</a>
+			</li>
+		</ul>
+	</nav>
 </div>
\ No newline at end of file
diff --git a/modules/core/client/views/header.client.view.html b/modules/core/client/views/header.client.view.html
index b189baf92..851080cf2 100644
--- a/modules/core/client/views/header.client.view.html
+++ b/modules/core/client/views/header.client.view.html
@@ -1,74 +1,78 @@
-<div class="app-header">
+<header class="app-header">
 	
 	<nav class="navbar">
 		<div class="navbar-header">
-			<div class="navbar-brand">
-				<a ui-sref="projects"></a>
-			</div>
+			<button class="navbar-toggle collapsed" type="button" 
+				data-target="#mainNav"
+				data-toggle="collapse"  
+				aria-expanded="false"
+				aria-label="Toggle navigation">
+				<span class="sr-only">Toggle navigation</span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand" ui-sref="projects"></a>
+		</div>
+		<div class="collapse navbar-collapse" id="mainNav">
+			<ul class="main-nav nav navbar-nav">
+				<li>
+					<a href ui-sref="projects">
+						<span>HOME</span>
+					</a>
+				</li>
+				<li ng-show="authentication.user">
+					<a href ui-sref="activities">
+						<span>DASHBOARD</span>
+					</a>
+				</li>
+				<li class="dropdown" ng-if="'true' === ADMIN_FEATURES.enableSystemMenu && systemMenu.shouldRender(authentication.user)">
+					<a class="dropdown-toggle" title="System Configuration"
+						id="dropdownSystemMenu"  
+						ng-click="$event.preventDefault();"
+						data-toggle="dropdown" 
+						aria-haspopup="true"
+						aria-expanded="true">
+						<span>SYSTEM</span>
+						<span class="caret"></span>
+					</a>
+					<ul class="dropdown-menu pull-right" aria-labelledby="dropdownSystemMenu">
+						<li class="{{item.class}}" ng-class="{ active: $state.includes(item.state) }" 
+							ng-repeat="item in systemMenu.items | orderBy: 'position'" 
+							ng-if="item.shouldRender(authentication.user);">
+							<a ui-sref="{{item.state}}" ng-bind="item.title"></a>
+						</li>
+						<li ng-if="application.userCan.manageRoles">
+							<a href x-role-users-modal x-context="application">Edit System Roles</a>
+						</li>
+						<li ng-if="application.userCan.managePermissions">
+							<a href x-role-permissions-modal x-context="application" x-object="application">Edit System Permissions</a>
+						</li>
+					</ul>
+				</li>
+				<li class="custom-nav-item user-menu" ng-show="!authentication.user">
+					<a ui-sref="authentication.signin">
+						<span>LOG IN</span>
+					</a>
+				</li>
+				<li class="custom-nav-item user-menu dropdown" ng-show="authentication.user">
+					<a class="dropdown-toggle" 
+						ng-click="$event.preventDefault();" 
+						id="userMenu" 
+						data-toggle="dropdown" 
+						aria-haspopup="true"
+						aria-expanded="true">
+						<span>{{ authentication.user.displayName }}</span>
+						<span class="caret"></span>
+					</a>
+					<ul class="dropdown-menu pull-right" aria-labelledby="userMenu">
+						<li><a x-modal-edit-my-profile href>Edit Profile</a></li>
+						<!-- TODO: Siteminder! get the Siteminder logout url and set it here -->
+						<li><a href="/api/auth/signout" target="_self">Logout</a></li>
+					</ul>
+				</li>
+			</ul>
 		</div>
-
-		<ul class="custom-nav">
-			<li class="custom-nav-item">
-				<a href ui-sref="projects">
-					<span class="glyphicon glyphicon-home"></span>
-					<span>HOME</span>
-				</a>
-			</li>
-			<li class="custom-nav-item" ng-show="authentication.user">
-				<a href ui-sref="activities">
-					<span class="glyphicon glyphicon-dashboard"></span>
-					<span>DASHBOARD</span>
-				</a>
-			</li>
-			<li class="custom-nav-item dropdown" ng-if="'true' === ADMIN_FEATURES.enableSystemMenu && systemMenu.shouldRender(authentication.user)">
-				<a class="dropdown-toggle" title="System Configuration"
-					id="dropdownSystemMenu"  
-					ng-click="$event.preventDefault();"
-					data-toggle="dropdown" 
-					aria-haspopup="true"
-				 	aria-expanded="true">
-					<span class="glyphicon glyphicon-cog"></span>
-					<span>SYSTEM</span>
-					<span class="caret"></span>
-				</a>
-				<ul class="dropdown-menu pull-right" aria-labelledby="dropdownSystemMenu">
-					<li class="{{item.class}}" ng-class="{ active: $state.includes(item.state) }" 
-						ng-repeat="item in systemMenu.items | orderBy: 'position'" 
-						ng-if="item.shouldRender(authentication.user);">
-						<a ui-sref="{{item.state}}" ng-bind="item.title"></a>
-					</li>
-					<li ng-if="application.userCan.manageRoles">
-						<a href x-role-users-modal x-context="application">Edit System Roles</a>
-					</li>
-					<li ng-if="application.userCan.managePermissions">
-						<a href x-role-permissions-modal x-context="application" x-object="application">Edit System Permissions</a>
-					</li>
-				</ul>
-			</li>
-			<li class="custom-nav-item user-menu" ng-show="!authentication.user">
-				<a ui-sref="authentication.signin">
-					<span class="glyphicon glyphicon-log-in"></span>
-					<span>LOG IN</span>
-				</a>
-			</li>
-			<li class="custom-nav-item user-menu dropdown" ng-show="authentication.user">
-				<a class="dropdown-toggle" 
-					ng-click="$event.preventDefault();" 
-					id="userMenu" 
-					data-toggle="dropdown" 
-					aria-haspopup="true"
-				 	aria-expanded="true">
-					<span class="glyphicon glyphicon-user"></span>
-					<span>{{ authentication.user.displayName }}</span>
-					<span class="caret"></span>
-				</a>
-				<ul class="dropdown-menu pull-right" aria-labelledby="userMenu">
-					<li><a x-modal-edit-my-profile href>Edit Profile</a></li>
-					<!-- TODO: Siteminder! get the Siteminder logout url and set it here -->
-					<li><a href="/api/auth/signout" target="_self">Logout</a></li>
-				</ul>
-			</li>
-		</ul>
-
 	</nav>
-</div>
\ No newline at end of file
+	
+</header>
\ No newline at end of file
diff --git a/modules/core/client/views/menu.client.view.html b/modules/core/client/views/menu.client.view.html
index cf1d99953..b2837a21f 100644
--- a/modules/core/client/views/menu.client.view.html
+++ b/modules/core/client/views/menu.client.view.html
@@ -34,10 +34,11 @@
 	<!-- PROJECT MENU - AUTHENTICATED -->
 	<div ng-if="(menu.context === 'project' || menu.context === 'activity')">
 
-		<a class="project-home-link" ui-sref="p.detail({projectid: menu.project.code})" title="Project Details">
-			<span class="glyphicon glyphicon-map-marker"></span>
-			<span>{{project.name}}</span>
-			<span ng-if="!project.name">Untitled Project</span>
+		<a class="project-home-link" ui-sref="p.detail({projectid: menu.project.code})" onclick="toggleSideNav();" title="Project Details">
+			<span class="project-home-link__inner-container">
+				<span class="project-home-link__project-name">{{project.name}}</span>
+				<span class="project-home-link__project-name" ng-if="!project.name">Untitled Project</span>
+			</span>
 		</a>
 
 		<!-- PROJECT CLIENT MENUS (project.client.menus.js) -->
diff --git a/modules/users/client/scss/users.scss b/modules/users/client/scss/users.scss
index 12157882c..046dcb9ab 100644
--- a/modules/users/client/scss/users.scss
+++ b/modules/users/client/scss/users.scss
@@ -37,7 +37,10 @@
 }
 
 .permissions-modal {
-	.form-group.manage-permission {
+	.manage-permission {
+		.control-label {
+			display: block;
+		}
 		.btn {
 			margin-bottom: 1rem;
 		}