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

broken header shit

Browse source
This commit is contained in:
rift 2024-07-23 20:07:55 -05:00
parent 6162b3e27f
commit 2b7380ba57
5 changed files with 182 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Header.astro
View file

@ -15,7 +15,7 @@ const t = useTranslations(lang);
<div class="w-1/8">
{/* Typical desktop menu */}
<div class="relative flex-row hidden md:flex">
<HeaderButton text={t("header.games")}>
<HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
<Icon
name="ph:cube"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
@ -90,4 +90,11 @@ const t = useTranslations(lang);
if (mobileNavTrigger) {
mobileNavTrigger.addEventListener("click", openDialog);
}
document.addEventListener("astro:after-swap", () => {
if (mobileNavTrigger) {
const mobileNavTrigger = document.getElementById("mobileNavTrigger")!;
mobileNavTrigger.addEventListener("click", openDialog);
}
});
</script>

8
src/components/HeaderButton.astro
View file

@ -1,9 +1,11 @@
---
const { text, icon } = Astro.props;
const { text, route } = Astro.props;
---
<div
<a
class="group flex w-full flex-row items-center justify-center border-t-2 border-solid border-navbar-text-color p-4 md:border-none h-1/3 md:h-fit"
id="header_anchor"
href={route}
>
<slot />
<span
@ -11,4 +13,4 @@ const { text, icon } = Astro.props;
>
{text}
</span>
</div>
</a>

6
src/components/MobileNavigation.astro
View file

@ -8,8 +8,9 @@ const t = useTranslations(lang);
<div
class="h-full mt-16 flex w-full flex-col justify-evenly md:flex-row bg-navbar-color m-auto"
id="mobileNavMenu"
>
<HeaderButton text={t("header.games")}>
<HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
<Icon
name="ph:cube"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
@ -28,3 +29,6 @@ const t = useTranslations(lang);
/>
</HeaderButton>
</div>
<script>
const mobileNavButton = document.getElementById("mobileNavButton");
</script>

103
src/components/debug.astro Normal file
View file

@ -0,0 +1,103 @@
---
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import { isMobileNavOpen } from "../store.js";
import Logo from "./Logo.astro";
import HeaderButton from "./HeaderButton.astro";
import { Icon } from "astro-icon/components";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---
<div
id="navbar"
class="flex h-16 flex-row items-center justify-end border-b-2 border-border-color bg-navbar-color px-4 z-30 relative"
>
<div class="w-1/8">
{/* Typical desktop menu */}
<div class="relative flex-row hidden md:flex">
<HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
<Icon
name="ph:cube"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
{
/* Astro won't let us pass the icon as a prop so it's going into the outlet here. */
}
</HeaderButton>
<HeaderButton text={t("header.settings")}>
<Icon
name="ph:wrench-fill"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
<HeaderButton text={t("header.morelinks")}>
<Icon
name="ph:link-bold"
class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
/>
</HeaderButton>
</div>
{/* Mobile hamburger menu */}
<div class="flex md:hidden" id="mobileNavTrigger">
<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>
<script>
import { isMobileNavOpen } from "../store.js";
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
// Set the store to true when the button is clicked
function openDialog() {
if (isMobileNavOpenLocal == false) {
isMobileNavOpen.set(true);
if (hamburger_menu && right_caret) {
hamburger_menu.style.display = "none";
right_caret.style.display = "block";
}
} else {
isMobileNavOpen.set(false);
if (hamburger_menu && right_caret) {
hamburger_menu.style.display = "block";
right_caret.style.display = "none";
}
}
}
isMobileNavOpen.subscribe((open) => {
if (open) {
isMobileNavOpenLocal = true;
} else {
isMobileNavOpenLocal = false;
}
});
// Add an event listener to the button
if (mobileNavTrigger) {
mobileNavTrigger.addEventListener("click", openDialog);
}
document.addEventListener("astro:after-swap", () => {
function dumbFunc() {
alert(1);
}
const mobileNavTrigger = document.getElementById("mobileNavTrigger");
if (mobileNavTrigger) {
mobileNavTrigger.addEventListener("click", dumbFunc);
}
});
</script>

8
src/layouts/Layout.astro
View file

@ -1,5 +1,6 @@
---
import Header from "../components/Header.astro";
import { ViewTransitions } from "astro:transitions";
import "../themes/nebula.css";
import MobileNavigation from "../components/MobileNavigation.astro";
@ -19,8 +20,9 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<ViewTransitions />
</head>
<body class="h-screen overflow-x-hidden">
<body class="h-screen overflow-hidden">
<Header />
<slot />
<div
@ -29,8 +31,6 @@ const { title } = Astro.props;
>
<MobileNavigation />
</div>
</body>
</html>
<script>
import { isMobileNavOpen } from "../store.js";
const mobileNavMenu = document.getElementById("mobileNavMenu");
@ -89,3 +89,5 @@ const { title } = Astro.props;
font-family: Roboto;
}
</style>
</body>
</html>