Add social icons to mobile menu footer (#988)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
withastro · Nov 1, 2023 · 977fe13 · 977fe13
1 parent 92103b9
commit 977fe13
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/.changeset/swift-geckos-remain.md b/.changeset/swift-geckos-remain.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': minor
+---
+
+Include social icon links in mobile menu
diff --git a/packages/starlight/components/MobileMenuFooter.astro b/packages/starlight/components/MobileMenuFooter.astro
@@ -1,17 +1,31 @@
 ---
-import { LanguageSelect, ThemeSelect } from 'virtual:starlight/components';
+import { LanguageSelect, ThemeSelect, SocialIcons } from 'virtual:starlight/components';
 import type { Props } from '../props';
 ---
 
 <div class="mobile-preferences sl-flex">
+	<div class="sl-flex social-icons">
+		<SocialIcons {...Astro.props} />
+	</div>
 	<ThemeSelect {...Astro.props} />
 	<LanguageSelect {...Astro.props} />
 </div>
 
 <style>
+	.social-icons {
+		margin-inline-end: auto;
+		gap: 1rem;
+		align-items: center;
+		padding-block: 1rem;
+	}
+	.social-icons:empty {
+		display: none;
+	}
 	.mobile-preferences {
 		justify-content: space-between;
+		flex-wrap: wrap;
 		border-top: 1px solid var(--sl-color-gray-6);
+		column-gap: 1rem;
 		padding: 0.5rem 0;
 	}
 </style>