From 00ba64c6e1362092817975e71b31e5dca69e26b0 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Tue, 25 Jun 2024 02:58:36 +0400
Subject: [PATCH] Modified mobile layout with MobileMenuFooter and
 ThemeSelectMobile.

Added MobileMenuFooter and ThemeSelectMobile components to enhance user interactivity for mobile layouts. These new components facilitate theme switch and house utility icons and language selection in structured, mobile-friendly layouts. Accompanying style updates were implemented to ensure visual consistency, and the astro.config.mjs file was updated to link the MobileMenuFooter component.
---
 astro.config.mjs                              |   1 +
 src/assets/styles/starlight.css               |  34 +++++-
 src/assets/styles/starlight_main.css          |   8 +-
 .../ui/starlight/MobileMenuFooter.astro       |  34 ++++++
 .../ui/starlight/ThemeSelectMobile.astro      | 104 ++++++++++++++++++
 5 files changed, 177 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/starlight/MobileMenuFooter.astro
 create mode 100644 src/components/ui/starlight/ThemeSelectMobile.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 3708502..defd5bb 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -93,6 +93,7 @@ export default defineConfig({
       components: {
         SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
         Head: "./src/components/ui/starlight/Head.astro",
+        MobileMenuFooter: "./src/components/ui/starlight/MobileMenuFooter.astro",
         ThemeSelect: "./src/components/ui/starlight/ThemeSelect.astro",
       },
       head: [
diff --git a/src/assets/styles/starlight.css b/src/assets/styles/starlight.css
index c8a25d9..00777b0 100644
--- a/src/assets/styles/starlight.css
+++ b/src/assets/styles/starlight.css
@@ -39,12 +39,15 @@
 }
 
 header {
+    padding: 0 !important;
+}
+
+header.header {
     background-color: transparent !important;
     height: 4.5rem !important;
     margin-inline: auto !important;
     padding-block: 0 !important;
-    padding-inline: 1.5rem !important;
-    padding-inline-end: 0 !important;
+    padding-inline: 2rem !important;
 }
 
 header > div:first-of-type {
@@ -73,6 +76,11 @@ header > div:first-of-type {
     top: 2rem !important;
 }
 
+mobile-starlight-toc > nav {
+    border-radius: 1rem;
+    margin-top: 2rem !important;
+}
+
 select {
     background-image: none;
     box-shadow: none;
@@ -137,3 +145,25 @@ article.card {
     top: 13px;
     width: 0.875rem;
 }
+
+@media screen and (max-width: 800px) {
+    mobile-starlight-toc > nav {
+        border-radius: 1rem;
+        margin-top: 3rem !important;
+    }
+
+    header > div:first-of-type {
+        padding-inline-end: 5rem !important;
+    }
+
+    starlight-menu-button > button {
+        right: 3rem !important;
+        top: 2.2rem !important;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    header.header {
+        padding-inline: 1.5rem !important;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/styles/starlight_main.css b/src/assets/styles/starlight_main.css
index 9d5e6e1..c6cb97d 100644
--- a/src/assets/styles/starlight_main.css
+++ b/src/assets/styles/starlight_main.css
@@ -46,12 +46,16 @@
 }
 
 header {
+    padding: 0 !important;
+    border: none !important;
+}
+
+header.header {
     background-color: transparent !important;
     height: 4.5rem !important;
     margin-inline: auto !important;
     padding-block: 0 !important;
-    padding-inline: 1.5rem !important;
-    padding-inline-end: 0 !important;
+    padding-inline: 2rem !important;
 }
 
 header > div:first-of-type {
diff --git a/src/components/ui/starlight/MobileMenuFooter.astro b/src/components/ui/starlight/MobileMenuFooter.astro
new file mode 100644
index 0000000..1b1a0e3
--- /dev/null
+++ b/src/components/ui/starlight/MobileMenuFooter.astro
@@ -0,0 +1,34 @@
+---
+import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
+import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
+import ThemeSelect from "src/components/ui/starlight/ThemeSelectMobile.astro";
+import type { Props } from "@astrojs/starlight/props";
+---
+
+<div class="mobile-preferences sl-flex">
+  <div class="sl-flex social-icons">
+    <SocialIcons {...Astro.props}><slot /></SocialIcons>
+  </div>
+  <ThemeSelect />
+  <LanguageSelect {...Astro.props}><slot /></LanguageSelect>
+</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;
+    align-items: center;
+  }
+</style>
diff --git a/src/components/ui/starlight/ThemeSelectMobile.astro b/src/components/ui/starlight/ThemeSelectMobile.astro
new file mode 100644
index 0000000..e205baa
--- /dev/null
+++ b/src/components/ui/starlight/ThemeSelectMobile.astro
@@ -0,0 +1,104 @@
+<!-- Dark Theme Toggle Button -->
+<button
+  type="button"
+  aria-label="Dark Theme Toggle"
+  id="dark-theme-toggle-mobile"
+  class="group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-orange-400"
+  data-hs-theme-click-value="dark"
+>
+  <svg
+    class="h-4 w-4 flex-shrink-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</button>
+
+<!-- Light Theme Toggle Button -->
+<button
+  type="button"
+  aria-label="Light Theme Toggle"
+  id="light-theme-toggle-mobile"
+  class="group flex hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-400 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-700 hover:text-orange-400"
+  data-hs-theme-click-value="light"
+>
+  <svg
+    class="h-4 w-4 flex-shrink-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="4"></circle>
+    <path d="M12 8a2 2 0 1 0 4 4"></path>
+    <path d="M12 2v2"></path>
+    <path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+</button>
+
+<script>
+  // Define the Theme type
+  type Theme = "light" | "dark";
+
+  // Function to set the theme
+  function setTheme(theme: Theme): void {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("starlight-theme", theme);
+    updateButtons(theme);
+  }
+
+  // Function to update the button visibility
+  function updateButtons(theme: Theme): void {
+    const darkButton = document.getElementById("dark-theme-toggle-mobile");
+    const lightButton = document.getElementById("light-theme-toggle-mobile");
+
+    if (theme === "dark") {
+      darkButton?.classList.add("hidden");
+      lightButton?.classList.remove("hidden");
+    } else {
+      darkButton?.classList.remove("hidden");
+      lightButton?.classList.add("hidden");
+    }
+  }
+
+  // Event listeners for theme toggle buttons
+  document
+    .getElementById("dark-theme-toggle-mobile")
+    ?.addEventListener("click", () => {
+      setTheme("dark");
+    });
+
+  document
+    .getElementById("light-theme-toggle-mobile")
+    ?.addEventListener("click", () => {
+      setTheme("light");
+    });
+
+  // Initial theme setup
+  document.addEventListener("DOMContentLoaded", () => {
+    const storedTheme = localStorage.getItem("starlight-theme") as Theme | null;
+    const theme: Theme =
+      storedTheme ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light");
+    setTheme(theme);
+  });
+</script>