From 863aab88f540343ccc4bd1e8abb88b86763415f9 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 4 Dec 2020 15:15:35 -0800
Subject: [PATCH] Update the Dalston theme to have the mobile nav on the side.

---
 dalston/functions.php                |  3 +++
 dalston/sass/_extra-child-theme.scss | 36 ++++++++++++++++++++++++++++
 dalston/style-rtl.css                | 32 +++++++++++++++++++++++++
 dalston/style.css                    | 32 +++++++++++++++++++++++++
 4 files changed, 103 insertions(+)

diff --git a/dalston/functions.php b/dalston/functions.php
index ea4ae641b..079d210a2 100755
--- a/dalston/functions.php
+++ b/dalston/functions.php
@@ -119,6 +119,9 @@ if ( ! function_exists( 'dalston_setup' ) ) :
 				'header-text' => array( 'site-title' ),
 			)
 		);
+
+		// Add mobile-on-side body class.
+		add_filter( 'body_class', 'varia_mobile_nav_on_side' );
 	}
 endif;
 add_action( 'after_setup_theme', 'dalston_setup', 12 );
diff --git a/dalston/sass/_extra-child-theme.scss b/dalston/sass/_extra-child-theme.scss
index f5c549a0e..f5000f54d 100644
--- a/dalston/sass/_extra-child-theme.scss
+++ b/dalston/sass/_extra-child-theme.scss
@@ -317,3 +317,39 @@ 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.
+.mobile-nav-side .site-title,
+.mobile-nav-side .site-description {
+	@include media(mobile-only) {
+		margin-right: 90px; /** This number is magic. */
+	}
+}
+
+.mobile-nav-side .main-navigation {
+	@include media(mobile-only) {
+		#toggle-menu {
+			position: absolute;
+			top: $baseline-unit;
+			right: 2 * $baseline-unit;
+		}
+
+		.dropdown-icon {
+			/* This is fixed the issue whent the button changes sizes */
+			font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+		}
+
+		.menu-main-menu-container {
+			background: #{map-deep-get($config-global, "color", "background", "light") };
+			margin:0 ( -2 * $baseline-unit );
+			padding: 0 (2 * $baseline-unit) $baseline-unit;
+			.sub-menu {
+				padding-left: 2 * $baseline-unit;
+			}
+			a {
+				padding: $baseline-unit 0;
+				line-height: 1;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/dalston/style-rtl.css b/dalston/style-rtl.css
index fa09ef269..9f558789a 100644
--- a/dalston/style-rtl.css
+++ b/dalston/style-rtl.css
@@ -4267,3 +4267,35 @@ a {
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-title,
+	.mobile-nav-side .site-description {
+		margin-left: 90px;
+		/** This number is magic. */
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		position: absolute;
+		top: 8px;
+		left: 16px;
+	}
+	.mobile-nav-side .main-navigation .dropdown-icon {
+		/* This is fixed the issue whent the button changes sizes */
+		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		background: #FAFAFA;
+		margin: 0 -16px;
+		padding: 0 16px 8px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
+		padding-right: 16px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+	}
+}
diff --git a/dalston/style.css b/dalston/style.css
index 1e394c280..ad16c3bef 100644
--- a/dalston/style.css
+++ b/dalston/style.css
@@ -4296,3 +4296,35 @@ a {
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-title,
+	.mobile-nav-side .site-description {
+		margin-right: 90px;
+		/** This number is magic. */
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		position: absolute;
+		top: 8px;
+		right: 16px;
+	}
+	.mobile-nav-side .main-navigation .dropdown-icon {
+		/* This is fixed the issue whent the button changes sizes */
+		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		background: #FAFAFA;
+		margin: 0 -16px;
+		padding: 0 16px 8px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
+		padding-left: 16px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+	}
+}