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

feat: only show hero and carousel on index

Browse source
This commit is contained in:
Troy 2025-02-13 16:55:09 +00:00
parent 0edd672a70
commit 81538a6fdf
Signed by: troy
GPG key ID: DFC06C02ED3B4711
18 changed files with 104 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/components/Header.astro
View file

@ -1,86 +1,68 @@
---
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 mb-8 w-full max-w-[65ch] space-y-6 pt-4">
<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 md:pt-4">
<nav
x-data="{ mobileMenuIsOpen: false }"
x-on:click.away="mobileMenuIsOpen = false"
class="flex h-12 items-center justify-between"
class="md:flex-no-wrap flex w-full flex-wrap justify-between"
x-data="{ open: false }"
>
<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"
/>
</a>
<ul class="hidden items-center gap-4 sm:flex">
{
SITE.NAVLINKS.map((i) => (
<li>
<a
data-navlink
href={i.href}
class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
aria-current="page"
>
{i.name}
</a>
</li>
))
}
</ul>
<button
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
x-bind:aria-expanded="mobileMenuIsOpen"
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
type="button"
class="text-secondary flex sm:hidden"
aria-label="mobile menu"
aria-controls="mobileMenu"
>
<Icon
name="mdi:menu"
aria-hidden="true"
class="size-6"
x-cloak
x-show="!mobileMenuIsOpen"
/>
<Icon
name="mdi:window-close"
aria-hidden="true"
class="size-6"
x-cloak
x-show="mobileMenuIsOpen"
/>
</button>
<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"
/>
</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="w-full items-center gap-4 text-right md:flex md:w-fit md:text-left"
x-bind:class="{ 'hidden': !open }"
x-cloak
x-show="mobileMenuIsOpen"
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
x-transition:enter-start="-translate-y-full"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
x-transition:leave-start="translate-y-0"
x-transition:leave-end="-translate-y-full"
id="mobileMenu"
class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto px-6 pt-6 pb-6 sm:hidden"
>
{
SITE.NAVLINKS.map((i) => (
<li class="py-4">
<a
data-navlink
href={i.href}
class="text-secondary w-full text-lg font-medium capitalize focus:underline"
aria-current="page"
>
{i.name}
</a>
</li>
))
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 font-medium capitalize transition-colors duration-300 focus:outline-hidden">
<a
href={link.href}
class:list={[isActive ? "text-secondary" : ""]}
>
{link.name}
</a>
</li>
);
})
}
</ul>
</nav>