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

Add MainLayout to Astro layouts

Browse source 
Implemented MainLayout with essential HTML structure including title, lenis library for scrolling, and theme choices in Astro.js. The MainLayout provides a foundational layout for the application, complete with pre-configured scripts for handling user preferences such as dark mode, and scripts for handling smooth scrolling behavior with the lenis library.
This commit is contained in:
Emil Gulamov 2024-02-12 05:46:39 +04:00
parent 66bbe9f963
commit da00757a63
1 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/layouts/MainLayout.astro Normal file
View file

@ -0,0 +1,79 @@
---
const { title = "ScrewFast" } = Astro.props;
interface Props {
title?: string;
}
---
<html lang="en" class="scrollbar-hide">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
<script is:inline>
// This script is to handle theme according to user preference or system setting
if (
localStorage.getItem("hs_theme") === "dark" ||
(!("hs_theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>
<body
class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800"
>
<div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
<slot />
</div>
<style>
// These css rules are for the page scrollbar and scrolling experience with lenis library
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
</style>
<script is:inline src="/assets/vendor/lenis/lenis.js"></script>
<script is:inline>
// This script is to handle lenis library settings and behaviors, like the smooth scrolling
const lenis = new Lenis();
lenis.on("scroll", (e) => {
console.log(e);
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>
<script is:inline src="/assets/vendor/preline/preline.js"></script>
</body>
</html>