gamezonline/Radius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header: add animations

Browse Source
This commit is contained in:
MotorTruck1221
2025-03-22 18:51:50 -06:00
parent 17eaceb267
commit 21ec84c57b
6 changed files with 703 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+22 -8
View File
@@ -13,15 +13,15 @@ const path = Astro.url.pathname;
</a>
</div>
</div>
<div class="fixed w-full h-full z-10 flex flex-row hidden pointer-events-auto" id="navigation">
<div class="flex flex-col gap-6 w-72 h-full bg-(--background) border-r border-r-(--border) p-6">
<div class="fixed w-full h-full z-10 flex flex-row pointer-events-auto invisible transition duration-500" id="navigation">
<div id="innerNav" class="flex flex-col gap-6 w-72 h-full bg-(--background) border-r border-r-(--border) p-6 transition duration-250 shadow-lg">
<div class="w-full flex flex-row justify-between">
<Icon name="lucide:radius" class="w-10 h-10 rotate-180 text-(--foreground)" />
<button id="exitNav">
<Icon name="lucide:x" class="text-(--muted-foreground)" />
</button>
</div>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-3 transition duration-500">
<div class="text-(--secondary-foreground) w-full border-b border-b-(--border) pb-3 flex flex-col gap-3">
<a href="/" class=`flex flex-row gap-2 items-center rounded-lg h-10 w-full whitespace-nowrap px-4 py-2 font-medium text-sm ${path === '/' ? 'bg-(--secondary)': 'bg-(--background)'} transition-all duration-200 hover:bg-(--secondary) hover:scale-105 focus:ring-(--ring) focus:ring-2`>
<Icon name="lucide:house" class="text-lg w-6 h-6" /> Home
@@ -40,26 +40,40 @@ const path = Astro.url.pathname;
</div>
</div>
</div>
<span id="body-hide" class="flex-grow h-full opacity-85 bg-(--background) brightness-20"></span>
<span id="body-hide" class="flex-grow h-full bg-(--background) brightness-20 transition duration-500"></span>
</div>
<style>
#innerNav {
transform: translateX(-100%);
}
#body-hide {
opacity: 0%;
}
</style>
<script>
const handler = () => {
const open = false;
const menuButton = document.getElementById("menu") as HTMLButtonElement;
const navigation = document.getElementById("navigation") as HTMLDivElement;
const bodyHider = document.getElementById("body-hide") as HTMLSpanElement;
const exitNav = document.getElementById("exitNav") as HTMLButtonElement;
const innerNav = document.getElementById("innerNav") as HTMLDivElement;
menuButton.addEventListener("click", () => {
navigation.classList.remove("hidden");
navigation.classList.remove("invisible");
bodyHider.style.opacity = "85%";
innerNav.style.transform = "translateX(0%)";
});
exitNav.addEventListener("click", () => {
navigation.classList.add("hidden");
bodyHider.style.opacity = "0%";
navigation.classList.add("invisible");
innerNav.style.transform = "translateX(-100%)";
});
bodyHider.addEventListener("click", () => {
navigation.classList.add("hidden");
bodyHider.style.opacity = "0%";
navigation.classList.add("invisible");
innerNav.style.transform = "translateX(-100%)";
});
}
src/pages/index.astro
+2 -2
View File
@@ -19,9 +19,9 @@ const randomSplash = genSplash();
<Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
<h1 class="text-6xl font-semibold">Radius</h1>
</div>
<div class="flex flex-row items-center gap-2 w-[26rem] border border-(--input) rounded-lg h-12 p-2">
<div class="flex flex-row items-center gap-2 w-4/5 md:w-[26rem] border border-(--input) rounded-lg h-12 p-2">
<Icon name="lucide:search" />
<input type="text" name="Search" class="text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
<input type="text" name="Search" class="text-md md:text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
</div>
<p class="text-base"> { randomSplash } </p>
</div>