From 977fe135a74661300589898abe98aec73cad9ed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B3mez-S=C3=A1nchez?=
 <7352559+magicDGS@users.noreply.github.com>
Date: Wed, 1 Nov 2023 23:28:38 +0100
Subject: [PATCH] Add social icons to mobile menu footer (#988)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
---
 .changeset/swift-geckos-remain.md                |  5 +++++
 .../starlight/components/MobileMenuFooter.astro  | 16 +++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/swift-geckos-remain.md

diff --git a/.changeset/swift-geckos-remain.md b/.changeset/swift-geckos-remain.md
new file mode 100644
index 0000000000..6121935cf5
--- /dev/null
+++ 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
index a5258da170..b1a3094c73 100644
--- 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>