Add responsive navigation

Tom Rutgers committed Aug 19, 2018

commit d2c0ff213ffa47ac961447e6f26f56dd4fbec204

source/images/nav-close.svg +10 -0

@@	@@ -0,0 +1,10 @@
+	<?xml version="1.0" encoding="utf-8"?>
+	<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+	<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	width="80px" height="80px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
+	<style type="text/css">
+	.st0{fill:#5C6066;}
+	</style>
+	<polygon class="st0" points="49.2,47.8 41.4,40 49.2,32.2 47.8,30.8 40,38.6 32.2,30.8 30.8,32.2 38.6,40 30.8,47.8 32.2,49.2
+	40,41.4 47.8,49.2 "/>
+	</svg>

source/images/nav-open.svg +11 -0

@@	@@ -0,0 +1,11 @@
+	<?xml version="1.0" encoding="utf-8"?>
+	<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+	<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	width="80px" height="80px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
+	<style type="text/css">
+	.st0{fill:#5C6066;}
+	</style>
+	<g>
+	<path class="st0" d="M28,32v2h24v-2H28z M28,48h24v-2H28V48z M28,41h24v-2H28V41z"/>
+	</g>
+	</svg>

source/javascripts/main.js +0 -1

source/javascripts/main.js.coffee +10 -0

@@	@@ -0,0 +1,10 @@
+	nav_button = document.querySelector('.nav-button')
+	navigation = document.querySelector('.navigation')
+
+	# Listen for click event
+	nav_button.addEventListener 'click', (->
+
+	# open navigation and change toggle button
+	navigation.classList.toggle 'open'
+	nav_button.classList.toggle 'active'
+	), false
	\ No newline at end of file

source/layouts/layout.slim +3 -1

@@	@@ -10,7 +10,7 @@ html
	title= current_page.data.title \|\| "Middleman"

	= stylesheet_link_tag "all"
-
+
	// Include netlify identity widget for user registration
	script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"
	body
@@	@@ -18,3 +18,5 @@ html

	main.main-content
	= yield
+
+	= javascript_include_tag 'main'
	\ No newline at end of file

source/layouts/news-detail.slim +4 -2

@@	@@ -10,9 +10,9 @@ html
	title= current_page.data.title \|\| "Kaldi - Middleman + Netlify CMS Example"

	= stylesheet_link_tag "all"
-
	// Include netlify identity widget for user registration
	script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"
+
	body
	= partial 'partials/shared/header-primary'

@@	@@ -31,4 +31,6 @@ html

	.row.content

-	= yield
	\ No newline at end of file
+	= yield
+
+	= javascript_include_tag 'main', async: true
	\ No newline at end of file

source/partials/shared/_header-primary.slim +6 -1

@@	@@ -3,8 +3,13 @@ header.header-primary
	= link_to '/'
	= image_tag 'logo.svg', alt: 'Kaldi'

+	a.nav-button href='#'
+	= image_tag 'nav-open.svg', class: 'open'
+	= image_tag 'nav-close.svg', class: 'close'
+
	nav.navigation
	ul
	- data.settings.navigation.nav_items.each do \| nav_item \|
	li
-	= nav_link nav_item.label, nav_item.path
	\ No newline at end of file
+	= nav_link nav_item.label, nav_item.path
+

source/stylesheets/demo/news/_news-detail.scss +1 -0

source/stylesheets/demo/shared/_header-primary.scss +51 -1

@@	@@ -34,9 +34,59 @@
	color: $primary-color;
	}
	}
-
	@media screen and (max-width: $screen-xs-max){
	display: none;
	}
	}
+	.nav-button{
+	display: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 80px;
+	height: 80px;
+
+	img {
+	width: 80px;
+	height: 80px;
+	}
+	.open {
+	display: block;
+	}
+	.close {
+	display: none;
+	}
+	&.active {
+	.open {
+	display: none;
+	}
+	.close {
+	display: block;
+	}
+	}
+	}
+	@media screen and (max-width: $screen-xs-max) {
+	.navigation {
+	display: none;
+	width: 100%;
+	height: auto;
+	top: 80px;
+	right: 0;
+	background: #fff;
+	border-top: 1px solid $background-primary-color;
+	li {
+	display: block;
+	margin: 30px 0;
+	}
+
+	&.open {
+	height: calc(100vh - 80px);
+	display: block
+	}
+	}
+
+	.nav-button {
+	display: block;
+	}
+	}
	}
	\ No newline at end of file