Merge pull request #2891 from Automattic/update/mobile-on-side

Update mobile nav to be on the side

alves/functions.php

@@ -102,6 +102,11 @@ if ( ! function_exists( 'alves_setup' ) ) :
 				),
 			)
 		);
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'alves_setup', 12 );

alves/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "alves",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

alves/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alves",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "description": "Alves",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

alves/sass/_extra-child-theme.scss

@@ -572,3 +572,6 @@ body:not(.fse-enabled) {
 		}
 	}
 }
+
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

alves/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.4.11
+Version: 1.4.12
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

alves/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.4.11
+Version: 1.4.12
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4446,6 +4446,122 @@ body:not(.fse-enabled) #masthead {
 	text-decoration: underline;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.86806rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #ffffff;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

alves/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.4.11
+Version: 1.4.12
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4475,6 +4475,122 @@ body:not(.fse-enabled) #masthead {
 	text-decoration: underline;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.86806rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: #ffffff;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

barnsbury/functions.php

@@ -102,6 +102,11 @@ if ( ! function_exists( 'barnsbury_setup' ) ) :
 				),
 			)
 		);
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'barnsbury_setup', 12 );
@@ -186,4 +191,3 @@ function barnsbury_editor_styles() {
 	}
 }
 add_action( 'enqueue_block_editor_assets', 'barnsbury_editor_styles' );
-

barnsbury/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "barnsbury",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

barnsbury/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barnsbury",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Barnsbury",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

barnsbury/sass/_extra-child-theme.scss

@@ -393,3 +393,5 @@ a {
 		margin-top: $spacing_unit;
 	}
 }
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

barnsbury/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

barnsbury/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4390,3 +4390,119 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	margin-top: 16px;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.71818rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #FFFDF6;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}

barnsbury/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4419,3 +4419,119 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	margin-top: 16px;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.71818rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: #FFFDF6;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}

dalston/functions.php

@@ -119,6 +119,11 @@ if ( ! function_exists( 'dalston_setup' ) ) :
 				'header-text' => array( 'site-title' ),
 			)
 		);
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'dalston_setup', 12 );
@@ -256,4 +261,3 @@ add_action( 'enqueue_block_assets', 'dalston_block_extends' );
 function dalston_is_amp() {
 	return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
 }
-

dalston/header.php

@@ -10,6 +10,11 @@
  * @subpackage Varia
  * @since 1.0.0
  */
+$has_primary_nav = has_nav_menu( 'menu-1' );
+$header_classes  = 'site-header';
+$header_classes .= has_custom_logo() ? ' has-logo' : '';
+$header_classes .= 1 === get_theme_mod( 'header_text', 1 ) ? ' has-title-and-tagline' : '';
+$header_classes .= $has_primary_nav ? ' has-menu' : '';
 ?><!doctype html>
 <html <?php language_attributes(); ?>>
 <head>
@@ -41,11 +46,11 @@
 
 	<?php else : // Otherwise we'll fallback to the default Varia header below. ?>
 
-		<header id="masthead" class="site-header">
+		<header id="masthead" class="<?php echo $header_classes; ?>" role="banner" >
 
 			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 
-			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+			<?php if ( $has_primary_nav) : ?>
 				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
 					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
 					<label for="toggle" id="toggle-menu" class="button">
@@ -56,13 +61,15 @@
 						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
 					</label>
 					<?php
-					wp_nav_menu(
-						array(
-							'theme_location' => 'menu-1',
-							'menu_class'     => 'main-menu',
-							'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
-						)
+					 $main_nav_args = array(
+						'theme_location'  => 'menu-1',
+						'menu_class'      => 'main-menu',
+						'items_wrap'      => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
 					);
+					if ( get_theme_mod( 'enable_side_menu' ) === 1 ) {
+						$main_nav_args[ 'container_class' ] = 'main-menu-container';
+					}
+					wp_nav_menu( $main_nav_args );
 					?>
 				</nav><!-- #site-navigation -->
 			<?php endif; ?>

dalston/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dalston",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

dalston/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalston",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Dalston",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

dalston/sass/_extra-child-theme.scss

@@ -317,3 +317,27 @@ a {
 .footer-navigation .footer-menu a {
 	font-size: map-deep-get($config-global, "font", "size", "xs");
 }
+
+
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
+
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.has-menu {
+			.site-branding {
+				display: contents;
+			}
+		}
+		.main-navigation {
+			.dropdown-icon {
+				/* This is fixed the issue when the button changes widths */
+				font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+			}
+		}
+		.site-description.site-description {
+			font-size: map-deep-get($config-global, "font", "size", "root" );
+		}
+	}
+
+}

dalston/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.2.9
+Version: 1.2.10
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

dalston/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.2.9
+Version: 1.2.10
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4267,3 +4267,132 @@ a {
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #FFFFFF;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		display: contents;
+	}
+	.mobile-nav-side .main-navigation .dropdown-icon {
+		/* This is fixed the issue when the button changes widths */
+		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+	}
+	.mobile-nav-side .site-description.site-description {
+		font-size: 19px;
+	}
+}

dalston/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.2.9
+Version: 1.2.10
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4296,3 +4296,132 @@ a {
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: #FFFFFF;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		display: contents;
+	}
+	.mobile-nav-side .main-navigation .dropdown-icon {
+		/* This is fixed the issue when the button changes widths */
+		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+	}
+	.mobile-nav-side .site-description.site-description {
+		font-size: 19px;
+	}
+}

hever/functions.php

@@ -99,6 +99,11 @@ if ( ! function_exists( 'hever_setup' ) ) :
 				),
 			)
 		);
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'hever_setup', 12 );

hever/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

hever/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "description": "Hever",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

hever/sass/_extra-child-theme.scss

@@ -491,3 +491,6 @@ article .entry-header .entry-title,
 		width: 100%;
 	}
 }
+
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

hever/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.4.11
+Version: 1.4.12
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

hever/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.4.11
+Version: 1.4.12
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4468,6 +4468,122 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	width: 100%;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

hever/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.4.11
+Version: 1.4.12
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4497,6 +4497,122 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	width: 100%;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: white;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

mayland/functions.php

@@ -102,6 +102,11 @@ if ( ! function_exists( 'mayland_setup' ) ) :
 				),
 			)
 		);
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'mayland_setup', 12 );

mayland/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mayland",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

mayland/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayland",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "mayland",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

mayland/sass/_extra-child-theme.scss

@@ -309,3 +309,17 @@ a {
 	font-family: inherit;
 	font-family: var( --font-base, inherit );
 }
+
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
+
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.has-menu {
+			.site-branding {
+				display: contents;
+			}
+
+		}
+	}
+}

mayland/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio wonderfully uncluttered with Mayland. Gracefully highlight your photography and other projects. Mayland is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

mayland/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio wonderfully uncluttered with Mayland. Gracefully highlight your photography and other projects. Mayland is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4296,3 +4296,125 @@ strong {
 	font-family: inherit;
 	font-family: var(--font-base, inherit);
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.69444rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #ffffff;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		display: contents;
+	}
+}

mayland/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio wonderfully uncluttered with Mayland. Gracefully highlight your photography and other projects. Mayland is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4325,3 +4325,125 @@ strong {
 	font-family: inherit;
 	font-family: var(--font-base, inherit);
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.69444rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: #ffffff;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		display: contents;
+	}
+}

morden/functions.php

@@ -99,6 +99,11 @@ if ( ! function_exists( 'morden_setup' ) ) :
 				),
 			)
 		);
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'morden_setup', 12 );

morden/header.php

@@ -62,13 +62,15 @@ if ( function_exists( 'wp_body_open' ) ) {
 						</label>
 
 						<?php
-						wp_nav_menu(
-							array(
-								'theme_location' => 'menu-1',
-								'menu_class'     => 'main-menu',
-								'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
-							)
+						$main_nav_args = array(
+							'theme_location'  => 'menu-1',
+							'menu_class'      => 'main-menu',
+							'items_wrap'      => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
 						);
+						if ( get_theme_mod( 'enable_side_menu' ) === 1 ) {
+							$main_nav_args[ 'container_class' ] = 'main-menu-container';
+						}
+						wp_nav_menu( $main_nav_args );
 						?>
 					</nav><!-- #site-navigation -->
 				<?php endif; ?>

morden/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "morden",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

morden/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morden",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "description": "Morden",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

morden/sass/_extra-child-theme.scss

@@ -609,3 +609,21 @@ article .entry-header .entry-title,
 		width: 100%;
 	}
 }
+
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
+
+@include media(mobile-only) {
+	.mobile-nav-side {
+		#masthead .site-header-wrap > *:not(.site-logo) {
+			margin: 0;
+		}
+
+		.site-header #site-navigation.main-navigation {
+			.woocommerce-menu-container,
+			.main-menu-container {
+				background: #{map-deep-get($config-global, "color", "foreground", "default")};
+			}
+		}
+	}
+}

morden/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business's online presence.
 Requires at least: WordPress 4.9.6
-Version: 1.5.13
+Version: 1.5.14
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

morden/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business's online presence.
 Requires at least: WordPress 4.9.6
-Version: 1.5.13
+Version: 1.5.14
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4561,6 +4561,132 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	width: 100%;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		background: #303030;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

morden/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Morden is a functional and responsive multi-purpose theme that is the perfect solution for your business's online presence.
 Requires at least: WordPress 4.9.6
-Version: 1.5.13
+Version: 1.5.14
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4590,6 +4590,132 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	width: 100%;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: white;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		background: #303030;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

rivington/functions.php

@@ -111,6 +111,11 @@ if ( ! function_exists( 'rivington_setup' ) ) :
 
 		// Remove footer menu
 		unregister_nav_menu( 'menu-2' );
+
+		// Setup nav on side toggle support.
+		if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
+			varia_mobile_nav_on_side_setup();
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'rivington_setup', 12 );

rivington/header.php

@@ -10,6 +10,12 @@
  * @subpackage Rivington
  * @since 1.0.0
  */
+
+$has_primary_nav = has_nav_menu( 'menu-1' );
+$header_classes  = 'site-header responsive-max-width';
+$header_classes .= has_custom_logo() ? ' has-logo' : '';
+$header_classes .= 1 === get_theme_mod( 'header_text', 1 ) ? ' has-title-and-tagline' : '';
+$header_classes .= $has_primary_nav ? ' has-menu' : '';
 ?><!doctype html>
 <html <?php language_attributes(); ?>>
 <head>
@@ -41,10 +47,10 @@
 
 	<?php else : // Otherwise we'll fallback to the default header below. ?>
 
-		<header id="masthead" class="site-header responsive-max-width">
+		<header id="masthead" class="<?php echo $header_classes; ?>" role="banner">
 			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 
-			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+			<?php if ( $has_primary_nav ) : ?>
 				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'rivington' ); ?>">
 					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
 					<label for="toggle" id="toggle-menu" class="button">
@@ -57,9 +63,10 @@
 					<?php
 					wp_nav_menu(
 						array(
-							'theme_location' => 'menu-1',
-							'menu_class'     => 'main-menu',
-							'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
+							'container_class' => 'main-menu-container',
+							'theme_location'  => 'menu-1',
+							'menu_class'      => 'main-menu',
+							'items_wrap'      => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
 						)
 					);
 					?>

rivington/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rivington",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

rivington/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rivington",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Rivington",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

rivington/sass/_extra-child-theme.scss

@@ -457,3 +457,16 @@ a {
 		justify-content: center;
 	}
 }
+
+// Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
+
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.has-menu {
+			.site-branding {
+				display: contents;
+			}
+		}
+	}
+}

rivington/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rivington is a robust theme designed for single property real estate.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

rivington/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rivington is a robust theme designed for single property real estate.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4423,3 +4423,125 @@ p:not(.site-title) a:hover {
 		justify-content: center;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		left: 16px;
+		z-index: 20000;
+		margin-left: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-left: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.64rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #060f29;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		display: contents;
+	}
+}

rivington/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Rivington is a robust theme designed for single property real estate.
 Requires at least: WordPress 4.9.6
-Version: 1.2.10
+Version: 1.2.11
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -4452,3 +4452,125 @@ p:not(.site-title) a:hover {
 		justify-content: center;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu {
+		position: relative;
+		display: grid;
+		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+	}
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
+		align-self: end;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
+		align-self: start;
+	}
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation {
+		margin: 0;
+		justify-self: end;
+		display: flex;
+		align-items: flex-start;
+		justify-content: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 18px;
+		right: 16px;
+		z-index: 20000;
+		margin-right: 0;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		order: 2;
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		order: 1;
+		grid-area: cart-toggle;
+		margin-right: 8px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		line-height: 1.55;
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		justify-self: end;
+		font-size: 0.64rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
+		margin-top: -2px;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
+	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
+		grid-area: dropdown-menu;
+		margin-top: 16px;
+		position: fixed;
+		z-index: 100;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		background: #060f29;
+		padding: 48px 16px 8px;
+		overflow-y: auto;
+		white-space: normal;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 64px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		display: contents;
+	}
+}

varia/functions.php

@@ -184,9 +184,9 @@ if ( ! function_exists( 'varia_setup' ) ) :
 		// Add support for Global Styles.
 		add_theme_support(
 			'jetpack-global-styles',
-			[
+			array(
 				'enable_theme_default' => true,
-			]
+			)
 		);
 
 	}
@@ -247,9 +247,19 @@ function varia_scripts() {
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
 	}
+
 }
 add_action( 'wp_enqueue_scripts', 'varia_scripts' );
 
+
+function varia_add_mobile_nav_on_side_scripts() {
+	if ( get_theme_mod( 'enable_side_menu' ) !== 1 ) {
+		return;
+	}
+
+	// Main navigation scripts
+	wp_enqueue_script( 'varia-primary-navigation-script', get_template_directory_uri() . '/js/primary-navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
+}
 /**
  * Fix skip link focus in IE11.
  *
@@ -285,6 +295,68 @@ function varia_editor_content_width() {
 }
 add_action( 'enqueue_block_editor_assets', 'varia_editor_content_width' );
 
+// This makes it possible to define the function in earlier to alter in one way or another.
+if ( ! function_exists( 'varia_mobile_nav_on_side' ) ) {
+	function varia_mobile_nav_on_side( $classes ) {
+		if ( get_theme_mod( 'enable_side_menu' ) === 1 ) {
+			return array_merge( $classes, array( 'mobile-nav-side' ) );
+		}
+		return $classes;
+	}
+}
+
+if ( ! function_exists( 'varia_enable_mobile_nav_on_side' ) ) {
+	function varia_enable_mobile_nav_on_side() {
+		set_theme_mod( 'enable_side_menu', 1 );
+	}
+}
+
+if ( ! function_exists( 'varia_register_mobile_nav_on_side_customizer_control' ) ) {
+	function varia_register_mobile_nav_on_side_customizer_control( $wp_customize ) {
+
+		$wp_customize->add_setting(
+			'enable_side_menu',
+			array(
+				'default'           => 1,
+				'sanitize_callback' => 'absint',
+			)
+		);
+
+		$wp_customize->add_section(
+			'nav_menus_mobile',
+			array(
+				'title' => __( 'Mobile Settings', 'varia' ),
+				'panel' => 'nav_menus',
+			)
+		);
+
+		$wp_customize->add_control(
+			'enable_side_menu',
+			array(
+				'label'    => __( 'Display mobile menu on the side', 'varia' ),
+				'section'  => 'nav_menus_mobile',
+				'settings' => 'enable_side_menu',
+				'type'     => 'checkbox',
+			)
+		);
+
+	}
+}
+
+function varia_mobile_nav_on_side_setup() {
+	// Add .mobile-nav-side body class.
+	add_filter( 'body_class', 'varia_mobile_nav_on_side' );
+
+	// Enable the mobile nav on side on theme switch.
+	add_action( 'after_switch_theme', 'varia_enable_mobile_nav_on_side' );
+
+	// Enable the customizer control toggle for the mobile nav on the side.
+	add_action( 'customize_register' , 'varia_register_mobile_nav_on_side_customizer_control' );
+
+	// Adds the script that help toggle the mobile nav.
+	add_action( 'wp_enqueue_scripts', 'varia_add_mobile_nav_on_side_scripts' );
+}
+
 /**
  * SVG Icons class.
  */

varia/header.php

@@ -61,13 +61,15 @@ if ( function_exists( 'wp_body_open' ) ) {
 					</label>
 
 					<?php
-					wp_nav_menu(
-						array(
-							'theme_location' => 'menu-1',
-							'menu_class'     => 'main-menu',
-							'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
-						)
+					$main_nav_args = array(
+						'theme_location'  => 'menu-1',
+						'menu_class'      => 'main-menu',
+						'items_wrap'      => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
 					);
+					if ( get_theme_mod( 'enable_side_menu' ) === 1 ) {
+						$main_nav_args['container_class'] = 'main-menu-container';
+					}
+					wp_nav_menu( $main_nav_args );
 					?>
 				</nav><!-- #site-navigation -->
 			<?php endif; ?>

varia/js/primary-navigation.js

@@ -0,0 +1,36 @@
+/**
+ * File primary-navigation.js.
+ *
+ * This files only gets added to themes that support the mobile nav on side
+ */
+( function() {
+
+	/**
+	 * Menu Toggle Behaviors
+	 *
+	 * @param {Element} element
+	 */
+	var navMenu = function ( buttonId, inputId ) {
+		var wrapper = document.body;
+
+		var toggleButton = document.getElementById( buttonId );
+		var toggleInput  = document.getElementById( inputId );
+
+		if ( toggleButton ) {
+			toggleButton.onclick = function() {
+				if ( true == toggleInput.checked ) {
+					wrapper.classList.remove( 'lock-scrolling' );
+				} else {
+					wrapper.classList.add( 'lock-scrolling' );
+				}
+
+				toggleButton.focus();
+			}
+		}
+	}
+
+	window.addEventListener( 'load', function() {
+		navMenu(  'toggle-menu', 'toggle' );
+		navMenu(  'toggle-cart', 'woocommerce-toggle' );
+	} );
+} )();

varia/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "varia",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

varia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varia",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "description": "A variable-based design system for WordPress sites built with Gutenberg.",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues?q=is%3Aopen+is%3Aissue+label%3Avaria"

varia/sass/components/header/_site-mobile-nav-side.scss

@@ -0,0 +1,164 @@
+$wpcom-marketing-bar--height: 45px;
+$wpadmin-bar--height: 46px;
+
+// Updates the Mobile Navigation to be next to the site title.
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.has-menu {
+			&:before,
+			&:after {
+				content: none;
+			}
+			position: relative;
+			display: grid;
+			grid-gap: 2px;
+			grid-template-areas: 
+				"site-logo site-logo" 
+				"social-navigation main-navigation";
+
+			&.has-title-and-tagline {
+				grid-template-areas: 
+					"site-logo site-logo" 
+					"site-title main-navigation" 
+					"site-description main-navigation" 
+					"social-navigation social-navigation";
+
+				.site-title {
+					grid-area: site-title;
+					align-self: end;
+				}
+
+				.site-description {
+					grid-area: site-description;
+					align-self: start;
+				}
+			}
+
+			& > *:not(.site-logo) {
+				margin: 0;
+			}
+
+			.site-logo {
+				grid-area: site-logo;
+				justify-self: center;
+				margin: $baseline-unit 0;
+			}
+
+			.social-navigation {
+				grid-area: social-navigation;
+				align-self: center;
+			}
+
+			.main-navigation {
+				grid-area: main-navigation;
+			}
+		}
+
+		.site-header #site-navigation.main-navigation {
+			margin: 0;
+			justify-self: end;
+			display: flex;
+			align-items: flex-start;
+			justify-content: end;
+
+			#woocommerce-toggle,
+			#toggle {
+				&:checked + label{
+					position: fixed;
+					top: 2 * $baseline-unit + 2px;
+					right: 2 * $baseline-unit;
+					z-index: 20000;
+					margin-right: 0;
+				}
+			}
+
+			#toggle-menu {
+				order: 2;
+				grid-area: menu-toggle;
+			}
+
+			#toggle-cart[for="woocommerce-toggle"] {
+				order: 1;
+				grid-area: cart-toggle;
+				margin-right: $baseline-unit;
+			}
+
+			#toggle-cart[for="woocommerce-toggle"].button,
+			#toggle-menu {
+				line-height: 1.55;
+				padding: (1.5 * $baseline-unit);
+				display: inline-block;
+				text-align: center;
+				justify-self: end;
+				font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
+			}
+			#toggle-cart[for="woocommerce-toggle"].button svg {
+				margin-top: -2px;
+			}
+			.woocommerce-menu-container,
+			& > div {
+				grid-area: dropdown-menu;
+				margin-top: 2 * $baseline-unit;
+				position: fixed;
+				z-index: 100;
+				top: 0;
+				bottom: 0;
+				right: 0;
+				left: 0;
+				background: #{map-deep-get($config-global, "color", "background", "default") };
+				padding: (6 * $baseline-unit) (2 * $baseline-unit) $baseline-unit;
+				overflow-y: auto;
+				white-space: normal;
+			}
+
+		}
+		&.has-marketing-bar {
+			//Consider marketing bar height
+			.site-header #site-navigation.main-navigation > div{
+				top: $wpcom-marketing-bar--height;
+			}
+			.site-header #site-navigation.main-navigation {
+				#woocommerce-toggle:checked + label,
+				#toggle:checked + label {
+					top: (2 * $baseline-unit) + $wpcom-marketing-bar--height;
+				}
+			}
+		}
+
+		&.admin-bar {
+			//Consider admin bar height
+			.site-header #site-navigation.main-navigation > div{
+				top: $wpadmin-bar--height;
+			}
+			.site-header #site-navigation.main-navigation {
+				#woocommerce-toggle:checked + label,
+				#toggle:checked + label {
+					top: (2 * $baseline-unit) + $wpadmin-bar--height + 2;
+				}
+			}
+		}
+
+		&.admin-bar.has-marketing-bar {
+			// Consider admin bar height + marketing bar height
+			.site-header #site-navigation.main-navigation > div {
+				top: $wpadmin-bar--height + $wpcom-marketing-bar--height;
+			}
+			.site-header #site-navigation.main-navigation {
+				#woocommerce-toggle:checked + label,
+				#toggle:checked + label {
+					top: (2 * $baseline-unit) + $wpadmin-bar--height + $wpcom-marketing-bar--height;
+				}
+			}
+		}
+	}
+
+	// Keep the menu pinned to the top when the menu is open.
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+
+}
+

varia/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.5.9
+Version: 1.5.10
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia

varia/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.5.9
+Version: 1.5.10
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia

varia/style.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.5.9
+Version: 1.5.10
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia