Improve visual styling of mobile menu toggle when menu is open (#2727)

Co-authored-by: Chris Swithinbank <[email protected]>
Co-authored-by: trueberryless <[email protected]>
Co-authored-by: SnowDingo <[email protected]>

Author: 4 people

.changeset/small-days-share.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Updates mobile menu toggle styles to display a close icon while the menu is open

packages/starlight/components/MobileMenuToggle.astro

@@ -9,7 +9,8 @@ import Icon from '../user-components/Icon.astro';
 		aria-controls="starlight__sidebar"
 		class="sl-flex md:sl-hidden"
 	>
-		<Icon name="bars" />
+		<Icon name="bars" class="open-menu" />
+		<Icon name="close" class="close-menu" />
 	</button>
 </starlight-menu-button>
 
@@ -71,6 +72,14 @@ import Icon from '../user-components/Icon.astro';
 		box-shadow: none;
 	}
 
+	[aria-expanded='true'] button .open-menu {
+		display: none;
+	}
+
+	:not([aria-expanded='true']) button .close-menu {
+		display: none;
+	}
+
 	:global([data-theme='light']) button {
 		background-color: var(--sl-color-black);
 		color: var(--sl-color-white);