pkp/pkp-lib#4684 Add mobile nav menu to default theme

plugins/themes/default/js/main.js

@@ -9,28 +9,55 @@
  */
 (function($) {
 
-	// Initialize dropdown navigation menus
+	// Initialize dropdown navigation menus on large screens
 	// See bootstrap dropdowns: https://getbootstrap.com/docs/4.0/components/dropdowns/
 	if (typeof $.fn.dropdown !== 'undefined') {
 		var $nav = $('#navigationPrimary, #navigationUser'),
 		$submenus = $('ul', $nav);
+		function toggleDropdowns() {
+			if (window.innerWidth > 992) {
+				$submenus.each(function(i) {
+					var id = 'pkpDropdown' + i;
+					$(this)
+						.addClass('dropdown-menu')
+						.attr('aria-labelledby', id);
+					$(this).siblings('a')
+						.attr('data-toggle', 'dropdown')
+						.attr('aria-haspopup', true)
+						.attr('aria-expanded', false)
+						.attr('id', id)
+						.attr('href', '#');
+				});
+				$('[data-toggle="dropdown"]').dropdown();
 
-		$submenus.each(function(i) {
-			var id = 'pkpDropdown' + i;
-			$(this)
-				.addClass('dropdown-menu')
-				.attr('aria-labelledby', id);
-			$(this).siblings('a')
-				.attr('data-toggle', 'dropdown')
-				.attr('aria-haspopup', true)
-				.attr('aria-expanded', false)
-				.attr('id', id)
-				.attr('href', '#');
+			} else {
+				$('[data-toggle="dropdown"]').dropdown('dispose');
+				$submenus.each(function(i) {
+					$(this)
+						.removeClass('dropdown-menu')
+						.removeAttr('aria-labelledby');
+					$(this).siblings('a')
+						.removeAttr('data-toggle')
+						.removeAttr('aria-haspopup')
+						.removeAttr('aria-expanded',)
+						.removeAttr('id')
+						.attr('href', '#');
+				});
+			}
+		}
+		window.onresize = toggleDropdowns;
+		$().ready(function() {
+			toggleDropdowns();
 		});
-
-		$('[data-toggle="dropdown"]').dropdown();
 	}
 
+	// Toggle nav menu on small screens
+	$('.pkp_site_nav_toggle').click(function(e) {
+  		$('.pkp_site_nav_menu').toggleClass('pkp_site_nav_menu--isOpen');
+  		$('.pkp_site_nav_toggle').toggleClass('pkp_site_nav_toggle--transform');
+	});
+
+
 	// Register click handlers for the search panel
 	var headerSearchPanelIsClosing = false,
 	    headerSearchForm = $('#headerNavigationContainer .pkp_search'),

plugins/themes/default/styles/body.less

@@ -27,9 +27,10 @@ a {
 
 
 // Page container widths
-.pkp_site_name,
+.pkp_site_name_wrapper,
 .pkp_navigation_primary_wrapper,
 .pkp_navigation_user,
+.pkp_search_mobile,
 .pkp_structure_content,
 .pkp_structure_footer {
 	.pkp_helpers_clear;
@@ -65,7 +66,6 @@ a {
 		position: relative;
 		width: 100%;
 		margin: 0 auto;
-		padding-left: @base;
 		padding-right: @base;
 
 		@media( min-width: @screen-tablet ) {

plugins/themes/default/styles/components/nav-toggle.less

@@ -0,0 +1,114 @@
+// Toggle button
+.pkp_site_nav_toggle {
+	@thickness: 3px;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: @nav-menu-height;
+	height: @nav-menu-height;
+	border: 0;
+	background: none;
+	box-shadow: 1px 0 0 rgba(255,255,255,0.2), -1px 0 0 rgba(255,255,255,0.2);
+	z-index: 999;
+
+	&:focus {
+		outline: 1px dotted @text-bg-base;
+		box-shadow: none;
+	}
+
+	> span {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 24px;
+		height: 19px;
+		border-bottom: @thickness solid @text-bg-base;
+		text-indent: -9999px;
+		overflow: hidden;
+
+		&:before,
+		&:after {
+			content: "";
+			position: absolute;
+			left: 0;
+			width: 100%;
+			height: @thickness;
+			background: @text-bg-base;
+		}
+
+		&:before {
+			top: 0;
+		}
+
+		&:after {
+			top: 8px;
+		}
+	}
+}
+
+.pkp_site_nav_toggle--transform {
+	> span {
+
+		border-bottom: 0;
+		overflow: visible;
+
+		&:before {
+			top: 7px;
+			transform: rotate(-405deg) translateY(1px) translateX(-2px);
+			-webkit-transform: rotate(-405deg) translateY(1px) translateX(-2px);
+		}
+
+		&:after {
+			top: 14px;
+			transform: rotate(405deg) translateY(-3px) translateX(-4px);
+			-webkit-transform: rotate(405deg) translateY(-3px) translateX(-4px);
+		}
+	}
+}
+
+// Show/hide the nav  menu
+.pkp_site_nav_menu {
+	display: none;
+}
+
+.pkp_site_nav_menu--isOpen {
+  display: block;
+}
+
+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;
+			}
+		}
+	}
+}
+
+@media (min-width: @screen-desktop) {
+
+	.pkp_site_nav_menu {
+		display: block;
+	}
+}