Update the Alves theme to have the mobile nav on the side.

alves/functions.php

@@ -102,6 +102,8 @@ if ( ! function_exists( 'alves_setup' ) ) :
 				),
 			)
 		);
+		// Add mobile-on-side body class.
+		add_filter( 'body_class', 'varia_mobile_nav_on_side' );
 	}
 endif;
 add_action( 'after_setup_theme', 'alves_setup', 12 );

alves/sass/_extra-child-theme.scss

@@ -572,3 +572,34 @@ body:not(.fse-enabled) {
 		}
 	}
 }
+
+// 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: 140px; /** this number is a bit magic. */
+	}
+}
+
+.mobile-nav-side .main-navigation {
+	@include media(mobile-only) {
+		#toggle-menu {
+			position: absolute;
+			top:2 * $baseline-unit;
+			right: 2 * $baseline-unit;
+		}
+
+		.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;  /** todo: variable */
+			}
+			a {
+				padding: $baseline-unit 0;
+				line-height: 1;
+			}
+		}
+	}
+}

alves/style-rtl.css

@@ -4446,6 +4446,35 @@ body:not(.fse-enabled) #masthead {
 	text-decoration: underline;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-title,
+	.mobile-nav-side .site-description {
+		margin-left: 140px;
+		/** this number is a bit magic. */
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		position: absolute;
+		top: 16px;
+		left: 16px;
+	}
+	.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;
+		/** todo: variable */
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

alves/style.css

@@ -4475,6 +4475,35 @@ body:not(.fse-enabled) #masthead {
 	text-decoration: underline;
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-title,
+	.mobile-nav-side .site-description {
+		margin-right: 140px;
+		/** this number is a bit magic. */
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		position: absolute;
+		top: 16px;
+		right: 16px;
+	}
+	.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;
+		/** todo: variable */
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

varia/functions.php

@@ -285,6 +285,15 @@ 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 if the class should be applied or not.
+if ( ! function_exists( 'varia_mobile_nav_on_side' ) ) {
+	function varia_mobile_nav_on_side( $classes ) {
+		return array_merge( $classes, array( 'mobile-nav-side' ) );
+	}
+}
+// Add this filter to the theme that you want to have the side navigation applied for.
+// add_filter( 'body_class', 'varia_mobile_nav_on_side' );
+
 /**
  * SVG Icons class.
  */