jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Modified mobile layout with MobileMenuFooter and ThemeSelectMobile.

Browse source 
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.
This commit is contained in:
Emil Gulamov 2024-06-25 02:58:36 +04:00
parent a766a2f462
commit 00ba64c6e1
5 changed files with 177 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
astro.config.mjs
View file

@ -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: [

34
src/assets/styles/starlight.css
View file

@ -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;
}
}

8
src/assets/styles/starlight_main.css
View file

@ -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 {

34
src/components/ui/starlight/MobileMenuFooter.astro Normal file
View file

@ -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>

104
src/components/ui/starlight/ThemeSelectMobile.astro Normal file
View file

@ -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>