pkp/pkp-lib#4684 Added mobile nav menu for smaller screens

ajnyga · Nov 17, 2019 · 8cc7aee · 8cc7aee
1 parent 78a3b20
commit 8cc7aee
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 0 deletions.
diff --git a/plugins/themes/default/js/main.js b/plugins/themes/default/js/main.js
@@ -31,6 +31,12 @@
 		$('[data-toggle="dropdown"]').dropdown();
 	}
 
+	// Toggle nav menu on small screens
+	$('.toggle').click(function(e) {
+  		$('.menu').toggleClass('menu--isOpen');
+	});
+
+
 	// Register click handlers for the search panel
 	var headerSearchPanelIsClosing = false,
 	    headerSearchForm = $('#headerNavigationContainer .pkp_search'),

diff --git a/plugins/themes/default/styles/head.less b/plugins/themes/default/styles/head.less
@@ -20,6 +20,89 @@
 	padding-top: @triple * 2; // Make room for the user nav at the top
 }
 
+// Mobile navigation menu
+.toggle {
+	@width: 20px;
+	@menu-colour: #c0c0c0;
+	@thickness: 4px;
+	display: inline-block;
+
+	border: 0;
+	background: none;
+	outline: 0;
+	padding: 0;
+
+	border-bottom: @thickness solid @menu-colour;
+	width: @width;
+
+	&:before {
+		content: "";
+		display: block;
+		border-bottom: @thickness solid @menu-colour;
+		width: 100%;
+		margin-bottom: 5px;
+	}
+
+	&:after {
+		content: "";
+		display: block;
+		border-bottom: @thickness solid @menu-colour;
+		width: 100%;
+		margin-bottom: 5px;
+	}
+}
+
+.menu {
+	display: none;
+}
+
+.menu--isOpen {
+	display: block;
+
+	.pkp_navigation_primary_row {
+
+		ul li {
+			list-style: none;
+			margin-left: 0;
+			margin-right: 0;
+			padding-left: 0;
+			padding-right: 0;
+			display: block;	
+			text-align: left;		
+		}
+
+		.pkp_navigation_primary {
+			> li {
+
+				> a {
+					text-align: left;
+					margin-right: 0;
+					margin-left: 0;
+					padding-left: 0;
+					padding-right: 0;
+				}
+
+			}
+		}
+	}
+}
+
+@media (min-width: @screen-desktop) {
+
+  	.toggle {
+		display: none;
+  	}
+
+  	.pkp_site_name {
+		display: inline-block !important;
+		text-align: left;
+	}
+
+	.menu {
+		display: block;
+  	}
+}
+
 // Site logo/nav on same line on larger screens
 .has_site_logo .pkp_head_wrapper {
 
@@ -424,3 +507,35 @@
 		}
 	}
 }
+
+body.navIsOpen {
+
+	.siteHeader__details {
+		right: 0;
+	}
+
+	.siteHeader__screen {
+		display: block;
+		opacity: 0.5;
+	}
+
+	.siteHeader__navToggleIcon {
+
+		> span {
+
+			&:first-child {
+				transform: rotate(45deg);
+				top: 18px;
+			}
+
+			&:nth-child(2) {
+				opacity: 0;
+			}
+
+			&:last-child {
+				transform: rotate(-45deg);
+				top: 18px;
+			}
+		}
+	}
+}