full-height flex-nav

client/stylesheets/base.less

@@ -885,9 +885,9 @@ a.github-fork {
 .flex-nav {
 	background-color: @primary-background-color;
 	position: fixed;
-	top: @header-min-height;
+	top: 0;
 	left: 0;
-	.calc(height, ~"100% - " @header-min-height + @footer-min-height);
+	height: 100%;
 	padding-top: 15px;
 	z-index: 1000;
 	overflow-y: auto;
@@ -899,6 +899,21 @@ a.github-fork {
 	&.hidden {
 		.transform(translateX(-100%));
 	}
+	.close-flex {
+		float: right;
+		margin-top: 4px;
+		margin-right: 6px;
+		cursor: pointer;
+		position: relative;
+
+		&:hover {
+			.arrow {
+				&:before, &:after {
+					background-color: rgba(255, 255, 255, 0.85);
+				}
+			}
+		}
+	}
 	header {
 		padding: 0 20px;
 		margin-bottom: 30px;
@@ -1003,7 +1018,7 @@ a.github-fork {
 				color: @tertiary-font-color;
 				font-size: 90%;
 				display: block;
-				padding-left: 27px;
+				padding-left: 10px;
 				margin-top: 5px;
 				cursor: pointer;
 				text-decoration: underline;
@@ -1188,7 +1203,7 @@ a.github-fork {
 		a {
 			display: block;
 			border-radius: 2px 0 0 2px;
-			padding: 6px 25px 7px 8px;
+			padding: 6px 25px 7px 6px;
 			font-size: 15px;
 			position: relative;
 			line-height: 16px;

client/views/app/sideNav/sideNav.coffee

@@ -4,5 +4,9 @@ Template.sideNav.helpers
 	flexData: ->
 		return SideNav.getFlex().data
 
-Template.sideNav.rendered = ->
-	SideNav.init()
+Template.sideNav.events
+	'click .close-flex': ->
+		SideNav.closeFlex()
+
+Template.sideNav.onRendered ->
+	SideNav.init()

client/views/app/sideNav/sideNav.html

@@ -17,6 +17,7 @@
 				</div>
 			</div>
 			<div class="flex-nav hidden">
+				<a class="close-flex"><span class="arrow left"></span></a>
 				<section>
 					{{> UI.dynamic template=flexTemplate data=flexData}}
 				</section>