troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: replace carousel using alpine with javascript

Browse source
This commit is contained in:
Troy 2025-02-15 23:08:31 +00:00
parent 74b9460ea1
commit 700095d8af
Signed by: troy
GPG key ID: DFC06C02ED3B4711
9 changed files with 165 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/Header.astro
View file

@ -1,62 +1,30 @@
---
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.replace(/\/$/, "");
---
<header class="mx-auto w-full">
<nav
class="md:flex-no-wrap flex w-full flex-wrap justify-between"
x-data="{ open: false }"
>
<div class="flex w-full items-center justify-between md:w-fit">
<a href="/" title={SITE.TITLE}>
<Icon
name="icon"
title={SITE.TITLE}
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
/>
<nav class="flex w-full justify-between">
<div class="flex w-fit items-center justify-between">
<a href="/" aria-label={SITE.TITLE} title={SITE.TITLE} class="group">
<div
class="ring-secondary/10 size-8 rounded-full bg-linear-45 from-[#FF5907] from-50% to-[#FF8548] ring-1 transition-transform ease-in-out ring-inset group-hover:scale-105"
>
</div>
</a>
<button
x-on:click="open = !open"
x-bind:aria-expanded="open"
type="button"
class="text-secondary flex md:hidden"
aria-label="mobile menu"
aria-controls="mobileMenu"
>
<Icon
name="mdi:menu"
aria-hidden="true"
class="size-6"
x-cloak
x-show="!open"
/>
<Icon
name="mdi:window-close"
aria-hidden="true"
class="size-6"
x-cloak
x-show="open"
/>
</button>
</div>
<ul
class="my-4 flex w-full flex-col items-center gap-4 text-right md:my-0 md:flex md:w-fit md:flex-row md:text-left"
x-bind:class="{ 'hidden': !open }"
x-cloak
>
<ul class="flex w-fit flex-row items-center gap-4">
{
SITE.NAVLINKS.map((link) => {
let linkHref = link.href.replace(/\/$/, "");
const isActive = currentPath.startsWith(linkHref);
return (
<li class="text-tertiary hover:text-secondary focus:text-secondary text-2xl font-medium capitalize transition-colors duration-300 focus:outline-hidden md:text-base">
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden">
<a
href={link.href}
class:list={[isActive ? "text-secondary" : ""]}
class:list={[isActive ? "text-secondary" : null]}
>
{link.name}
</a>