RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start on games page and move mobile navigation to the layout

Browse source
This commit is contained in:
rift 2024-07-23 19:27:38 -05:00
parent 8d7cc2cec1
commit 6162b3e27f
4 changed files with 66 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/Header.astro
View file

@ -39,21 +39,41 @@ const t = useTranslations(lang);
</div> </div>
{/* Mobile hamburger menu */} {/* Mobile hamburger menu */}
<div class="flex md:hidden" id="mobileNavTrigger"> <div class="flex md:hidden" id="mobileNavTrigger">
<Icon name="ph:text-align-justify-bold" class="h-9 w-9 text-text-color" /> <Icon
name="ph:text-align-justify-bold"
class="h-9 w-9 text-text-color"
id="hamburger_menu"
/>
<Icon
name="ph:caret-right-bold"
class="h-9 w-9 text-text-color hidden"
id="right_caret"
/>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
import { isMobileNavOpen } from "../store.js"; import { isMobileNavOpen } from "../store.js";
let isMobileNavOpenLocal = true; let isMobileNavOpenLocal = true;
const right_caret = document.getElementById("right_caret");
const hamburger_menu = document.getElementById("hamburger_menu");
const mobileNavTrigger = document.getElementById("mobileNavTrigger");
// Create a copy of the nano store so we can make this a toggle // Create a copy of the nano store so we can make this a toggle
// Set the store to true when the button is clicked // Set the store to true when the button is clicked
function openDialog() { function openDialog() {
if (isMobileNavOpenLocal == false) { if (isMobileNavOpenLocal == false) {
isMobileNavOpen.set(true); isMobileNavOpen.set(true);
if (hamburger_menu && right_caret) {
hamburger_menu.style.display = "none";
right_caret.style.display = "block";
}
} else { } else {
isMobileNavOpen.set(false); isMobileNavOpen.set(false);
if (hamburger_menu && right_caret) {
hamburger_menu.style.display = "block";
right_caret.style.display = "none";
}
} }
} }
@ -66,7 +86,7 @@ const t = useTranslations(lang);
}); });
// Add an event listener to the button // Add an event listener to the button
const mobileNavTrigger = document.getElementById("mobileNavTrigger");
if (mobileNavTrigger) { if (mobileNavTrigger) {
mobileNavTrigger.addEventListener("click", openDialog); mobileNavTrigger.addEventListener("click", openDialog);
} }

32
src/layouts/Layout.astro
View file

@ -1,6 +1,7 @@
--- ---
import Header from "../components/Header.astro"; import Header from "../components/Header.astro";
import "../themes/nebula.css"; import "../themes/nebula.css";
import MobileNavigation from "../components/MobileNavigation.astro";
interface Props { interface Props {
title: string; title: string;
@ -22,8 +23,39 @@ const { title } = Astro.props;
<body class="h-screen overflow-x-hidden"> <body class="h-screen overflow-x-hidden">
<Header /> <Header />
<slot /> <slot />
<div
id="mobileNavMenu"
class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0"
>
<MobileNavigation />
</div>
</body> </body>
</html> </html>
<script>
import { isMobileNavOpen } from "../store.js";
const mobileNavMenu = document.getElementById("mobileNavMenu");
// Listen to changes in the store, and show/hide the mobile navigation accordingly
isMobileNavOpen.subscribe((open) => {
if (open) {
if (mobileNavMenu) {
mobileNavMenu.style.display = "block";
mobileNavMenu.style.transform = "translateX(0%)";
}
} else {
if (mobileNavMenu) {
mobileNavMenu.style.transform = "translateX(100%)";
}
}
});
</script>
<style>
#mobileNavMenu {
-webkit-transition-duration: 600ms;
transition-duration: 600ms;
transform: translateX(100%);
}
</style>
<style is:global> <style is:global>
@import "https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"; @import "https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap";
:root { :root {

12
src/pages/[lang]/games.astro Normal file
View file

@ -0,0 +1,12 @@
---
import { STATIC_PATHS } from "../../i18n/utils";
import Layout from "../../layouts/Layout.astro";
export function getStaticPaths() {
return STATIC_PATHS;
}
---
<Layout title="Chango Games">
<p>Chango games</p>
</Layout>

27
src/pages/[lang]/index.astro
View file

@ -12,31 +12,4 @@ export function getStaticPaths() {
<Layout title="Welcome to Astro."> <Layout title="Welcome to Astro.">
<p>The services</p> <p>The services</p>
<p id="">Mobile Navvy</p> <p id="">Mobile Navvy</p>
<div id="mobileNavMenu" class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0">
<MobileNavigation />
</div>
</Layout> </Layout>
<script>
import { isMobileNavOpen } from "../../store.js";
const mobileNavMenu = document.getElementById("mobileNavMenu");
// Listen to changes in the store, and show/hide the mobile navigation accordingly
isMobileNavOpen.subscribe((open) => {
if (open) {
if (mobileNavMenu) {
mobileNavMenu.style.display = "block";
mobileNavMenu.style.transform = "translateX(0%)";
}
} else {
if (mobileNavMenu) {
mobileNavMenu.style.transform = "translateX(100%)";
}
}
});
</script>
<style>
#mobileNavMenu {
-webkit-transition-duration: 600ms;
transition-duration: 600ms;
transform: translateX(100%);
}
</style>