diff options
| author | techfg | 2025-04-07 08:08:12 -0700 |
|---|---|---|
| committer | GitHub | 2025-04-07 17:08:12 +0200 |
| commit | 7c8fa30f0ac2459c83b71a8a7b705b16dcf98d6f (patch) | |
| tree | 50f6e4273dab14268427951533ff82e41f83726c | |
| parent | 6a56d1b80d9d67e63e930177cf085a25864e1952 (diff) | |
| download | IT.starlight-7c8fa30f0ac2459c83b71a8a7b705b16dcf98d6f.tar.gz IT.starlight-7c8fa30f0ac2459c83b71a8a7b705b16dcf98d6f.tar.bz2 IT.starlight-7c8fa30f0ac2459c83b71a8a7b705b16dcf98d6f.zip | |
Improve visual styling of mobile menu toggle when menu is open (#2727)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: trueberryless <99918022+trueberryless@users.noreply.github.com>
Co-authored-by: SnowDingo <101443426+SnowDingo@users.noreply.github.com>
| -rw-r--r-- | .changeset/small-days-share.md | 5 | ||||
| -rw-r--r-- | packages/starlight/components/MobileMenuToggle.astro | 11 |
2 files changed, 15 insertions, 1 deletions
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" > - <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); |