Add back subitems, tweak CSS selectors to match new markup

Automattic · Jan 17, 2025 · 6b6d4cc · 6b6d4cc
1 parent b925a3c
commit 6b6d4cc
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 63 deletions.
diff --git a/client/layout/masterbar/item.tsx b/client/layout/masterbar/item.tsx
@@ -251,7 +251,7 @@ class MasterbarItem extends Component< MasterbarItemProps > {
 				>
 					{ this.renderChildren() }
 				</MenuItem>
-				{ /* { this.renderSubItems() } */ }
+				{ this.renderSubItems() }
 			</div>
 		);
 	}

diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -237,7 +237,7 @@ body.is-mobile-app-view {
 		}
 	}
 
-	.masterbar__item-subitems {
+	& + .masterbar__item-subitems {
 		margin: 0;
 		padding: 6px 0;
 		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
@@ -258,6 +258,7 @@ body.is-mobile-app-view {
 			white-space: nowrap;
 			min-width: 140px;
 			line-height: 2;
+
 			a,
 			button {
 				display: inline-block;
@@ -356,7 +357,7 @@ body.is-mobile-app-view {
 			fill: var(--color-masterbar-highlight);
 		}
 
-		.masterbar__item-subitems {
+		& + .masterbar__item-subitems {
 			display: block;
 			z-index: 99999;
 		}
@@ -721,51 +722,22 @@ body.is-mobile-app-view {
 		gap: 5px;
 	}
 
-	.gravatar {
-		border: 1px solid var(--color-masterbar-border);
-		border-radius: unset;
-		margin-left: 1px;
-
-		@media only screen and (max-width: 781px) {
-			width: 26px;
-			height: 26px;
-			margin-left: 4px;
-		}
-	}
+	&,
+	+ .masterbar__item-subitems {
+		.gravatar {
+			border: 1px solid var(--color-masterbar-border);
+			border-radius: unset;
+			margin-left: 1px;
 
-	.masterbar__item-howdy-account-wrapper {
-		display: flex;
-		flex-direction: row;
-		gap: 12px;
-		padding: 4px 3px;
-
-		.masterbar__item-howdy-account-gravatar {
-			border: none;
-			flex-basis: auto;
-			max-width: 50%;
-		}
-
-		.masterbar__item-howdy-account-details {
-			flex-basis: auto;
-			flex-grow: 0;
-			flex-shrink: 0;
-			max-width: 50%;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			padding: 3px 5px;
-			margin: 0;
-			line-height: 18px;
-
-			.username {
-				font-size: 11px; /* stylelint-disable-line declaration-property-unit-allowed-list */
-				line-height: 14px;
-				margin-bottom: 4px;
+			@media only screen and (max-width: 781px) {
+				width: 26px;
+				height: 26px;
+				margin-left: 4px;
 			}
 		}
 	}
 
-	.masterbar__item-subitems {
+	+ .masterbar__item-subitems {
 		min-width: 264px !important;
 		max-height: 94px;
 		padding: 12px 0;
@@ -774,15 +746,47 @@ body.is-mobile-app-view {
 			min-width: 100% !important;
 			max-height: 100%;
 		}
-	}
 
-	.masterbar__item-subitems-item {
-		&.account-link,
-		&.logout-link {
-			position: relative;
-			float: left;
-			top: -5px;
-			left: 85px;
+		.masterbar__item-howdy-account-wrapper {
+			display: flex;
+			flex-direction: row;
+			gap: 12px;
+			padding: 4px 3px;
+
+			.masterbar__item-howdy-account-gravatar {
+				border: none;
+				flex-basis: auto;
+				max-width: 50%;
+			}
+
+			.masterbar__item-howdy-account-details {
+				flex-basis: auto;
+				flex-grow: 0;
+				flex-shrink: 0;
+				max-width: 50%;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				padding: 3px 5px;
+				margin: 0;
+				line-height: 18px;
+
+				.username {
+					font-size: 11px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+					line-height: 14px;
+					margin-bottom: 4px;
+				}
+			}
+		}
+
+		.masterbar__item-subitems-item {
+			&.account-link,
+			&.logout-link {
+				position: relative;
+				float: left;
+				top: -5px;
+				left: 85px;
+			}
 		}
 	}
 
@@ -792,21 +796,23 @@ body.is-mobile-app-view {
 			display: none;
 		}
 
-		.masterbar__item-howdy-account-details {
-			padding: 0 !important;
-		}
+		+ .masterbar__item-subitems {
+			.masterbar__item-howdy-account-details {
+				padding: 0 !important;
+			}
 
-		.masterbar__item-subitems-item {
+			.masterbar__item-subitems-item {
 
-			min-width: 100% !important;
-			&.account-link {
-				top: -10px;
-				left: 0;
-			}
+				min-width: 100% !important;
+				&.account-link {
+					top: -10px;
+					left: 0;
+				}
 
-			&.logout-link {
-				top: -10px;
-				left: 0;
+				&.logout-link {
+					top: -10px;
+					left: 0;
+				}
 			}
 		}
 	}