Merge pull request #30499 from woocommerce/update/marketplace-mobile-menu

Add mobile section menu to marketplace

assets/css/admin.scss

@@ -93,14 +93,16 @@
 
 		.current-section-dropdown {
 			position: relative;
-			width: 200px;
+			width: 100%;
 
 			@media only screen and ( min-width: 600px ) {
 				margin-left: 70px;
+				width: 288px;
 			}
 		}
 
 		.current-section-name {
+			cursor: pointer;
 			font-weight: 600;
 			font-size: 14px;
 			line-height: 20px;
@@ -108,10 +110,10 @@
 			position: relative;
 		}
 
-		.current-section-name:after {
+		.current-section-name::after {
 			background-image: url(../images/icons/gridicons-chevron-down.svg);
 			background-size: contain;
-			content: '';
+			content: "";
 			display: block;
 			height: 20px;
 			position: absolute;
@@ -122,7 +124,6 @@
 
 		ul {
 			background: #fff;
-			border: 1px solid #1E1E1E;
 			border-radius: 2px;
 			display: none;
 			flex-direction: column;
@@ -134,6 +135,10 @@
 			top: 50px;
 			width: 100%;
 
+			@media only screen and ( min-width: 600px ) {
+				border: 1px solid #1e1e1e;
+			}
+
 			@media only screen and ( min-width: 1100px ) {
 				justify-content: center;
 			}
@@ -155,14 +160,18 @@
 				display: inline-block;
 				text-decoration: none;
 				outline: none;
-				padding: 10px 18px;
+				padding: 14px 18px;
 				position: relative;
 				width: 100%;
+
+				@media only screen and ( min-width: 600px ) {
+					padding: 10px 18px;
+				}
 			}
 
-			a.current:after {
+			a.current::after {
 				background-image: url(../images/icons/gridicons-checkmark.svg);
-				content: '';
+				content: "";
 				display: block;
 				height: 20px;
 				position: absolute;
@@ -172,8 +181,16 @@
 			}
 		}
 
-		.current-section-dropdown:hover ul {
-			display: flex;
+		.current-section-dropdown:hover,
+		.current-section-dropdown.is-open {
+
+			ul {
+				display: flex;
+			}
+
+			.current-section-name::after {
+				transform: rotate(0.5turn);
+			}
 		}
 	}
 

assets/js/admin/woocommerce_admin.js

@@ -406,6 +406,43 @@
 				return window.confirm( woocommerce_admin.i18n_remove_personal_data_notice );
 			}
 		});
+
+		var marketplaceSectionDropdown = $( '#marketplace-current-section-dropdown' );
+		var marketplaceSectionName = $( '#marketplace-current-section-name' );
+		var marketplaceMenuIsOpen = false;
+
+		// Add event listener to toggle Marketplace menu on touch devices
+		if ( marketplaceSectionDropdown.length && isTouchDevice() ) {
+			marketplaceSectionName.on( 'click', function() {
+				marketplaceMenuIsOpen = ! marketplaceMenuIsOpen;
+				if ( marketplaceMenuIsOpen ) {
+					marketplaceSectionDropdown.addClass( 'is-open' );
+					$( document ).on( 'click', maybeToggleMarketplaceMenu );
+				} else {
+					marketplaceSectionDropdown.removeClass( 'is-open' );
+					$( document ).off( 'click', maybeToggleMarketplaceMenu );
+				}
+			} );
+		}
+
+		// Close menu if the user clicks outside it
+		function maybeToggleMarketplaceMenu( e ) {
+			if (
+				! marketplaceSectionDropdown.is( e.target )
+				&& marketplaceSectionDropdown.has( e.target ).length === 0
+			) {
+				marketplaceSectionDropdown.removeClass( 'is-open' );
+				marketplaceMenuIsOpen = false;
+				$( document ).off( 'click', maybeToggleMarketplaceMenu );
+			}
+		}
+
+		function isTouchDevice() {
+			return ( ( 'ontouchstart' in window ) ||
+				( navigator.maxTouchPoints > 0 ) ||
+				( navigator.msMaxTouchPoints > 0 ) );
+		}
+
 	});
 
 })( jQuery, woocommerce_admin );

includes/admin/views/html-admin-page-addons.php

@@ -37,7 +37,7 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
 	</div>
 
 	<div class="top-bar">
-		<div class="current-section-dropdown">
+		<div id="marketplace-current-section-dropdown" class="current-section-dropdown">
 			<ul>
 				<?php foreach ( $sections as $section ) : ?>
 					<?php
@@ -54,7 +54,7 @@ $current_section_name = __( 'Browse Categories', 'woocommerce' );
 					</li>
 				<?php endforeach; ?>
 			</ul>
-			<div class="current-section-name"><?php echo esc_html( $current_section_name ); ?></div>
+			<div id="marketplace-current-section-name" class="current-section-name"><?php echo esc_html( $current_section_name ); ?></div>
 		</div>
 		</div>