From 7c8fa30f0ac2459c83b71a8a7b705b16dcf98d6f Mon Sep 17 00:00:00 2001 From: techfg Date: Mon, 7 Apr 2025 08:08:12 -0700 Subject: Improve visual styling of mobile menu toggle when menu is open (#2727) Co-authored-by: Chris Swithinbank Co-authored-by: trueberryless <99918022+trueberryless@users.noreply.github.com> Co-authored-by: SnowDingo <101443426+SnowDingo@users.noreply.github.com>--- .changeset/small-days-share.md | 5 +++++ packages/starlight/components/MobileMenuToggle.astro | 11 ++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/small-days-share.md diff --git a/.changeset/small-days-share.md b/.changeset/small-days-share.md new file mode 100644 index 00000000..1e9e19c4 --- /dev/null +++ b/.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 diff --git a/packages/starlight/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro index 6e65710b..010ece93 100644 --- a/packages/starlight/components/MobileMenuToggle.astro +++ b/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" > - + + @@ -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); -- cgit