begin adding nav bar
This commit is contained in:
parent
aa1498d757
commit
63f9efd621
GPG key ID:
DFC06C02ED3B4711
5 changed files with 144 additions and 25 deletions
|
|
@ -4,10 +4,14 @@ import { Icon } from "astro-icon/components";
|
|||
---
|
||||
|
||||
<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
|
||||
<div
|
||||
class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
|
||||
<nav
|
||||
x-data="{ mobileMenuIsOpen: false }"
|
||||
x-on:click.away="mobileMenuIsOpen = false"
|
||||
class="flex h-12 items-center justify-between"
|
||||
aria-label="penguin ui menu"
|
||||
>
|
||||
<a class="inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<!-- Brand Logo -->
|
||||
<a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
|
||||
<Icon
|
||||
name="icon"
|
||||
title={SITE.TITLE}
|
||||
|
|
@ -19,5 +23,116 @@ import { Icon } from "astro-icon/components";
|
|||
Troy Lusty
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Desktop Menu -->
|
||||
<ul class="hidden items-center gap-4 sm:flex">
|
||||
{
|
||||
SITE.NAVLINKS.map((i) => (
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a
|
||||
data-navlink
|
||||
href={i.href}
|
||||
class="text-secondary hover:text-secondary font-bold capitalize underline-offset-2 focus:underline focus:outline-hidden"
|
||||
aria-current="page"
|
||||
>
|
||||
{i.name}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
<!-- CTA Button -->
|
||||
<li>
|
||||
<a
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
class="bg-secondary border-secondary text-primary focus-visible:outline-primary rounded-md border px-4 py-2 text-center text-sm font-medium tracking-wide hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0"
|
||||
>Sign Up</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
|
||||
x-bind:aria-expanded="mobileMenuIsOpen"
|
||||
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null"
|
||||
type="button"
|
||||
class="text-secondary flex sm:hidden"
|
||||
aria-label="mobile menu"
|
||||
aria-controls="mobileMenu"
|
||||
>
|
||||
<svg
|
||||
x-cloak
|
||||
x-show="!mobileMenuIsOpen"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
|
||||
</svg>
|
||||
<svg
|
||||
x-cloak
|
||||
x-show="mobileMenuIsOpen"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18 18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Mobile Menu -->
|
||||
<ul
|
||||
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="divide-outline rounded-b-radius border-outline bg-primary fixed inset-x-0 top-0 z-10 flex max-h-svh flex-col divide-y overflow-y-auto border-b px-6 pt-20 pb-6 sm:hidden"
|
||||
>
|
||||
<li class="py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="text-primary w-full text-lg font-bold focus:underline"
|
||||
aria-current="page">Products</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="text-on-surface w-full text-lg font-medium focus:underline"
|
||||
>Pricing</a
|
||||
>
|
||||
</li>
|
||||
<li class="py-4">
|
||||
<a
|
||||
href="#"
|
||||
class="text-on-surface w-full text-lg font-medium focus:underline"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<!-- CTA Button -->
|
||||
<li class="mt-4 w-full border-none">
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-radius border-primary bg-primary text-on-primary focus-visible:outline-primary block border px-4 py-2 text-center font-medium tracking-wide hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0"
|
||||
>Sign Up</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
|
|||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<section class="mt-16 overflow-clip mb-28">
|
||||
<section class="mt-16 mb-28 overflow-clip">
|
||||
<h1
|
||||
class="--translate-y-full animate-logo mx-auto max-w-[20ch] text-center text-4xl font-bold text-pretty md:text-6xl"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import { HOME } from "@consts";
|
||||
import { HOME, SITE } from "@consts";
|
||||
import { getCollection } from "astro:content";
|
||||
import ShowcasePost from "@components/ShowcasePost.astro";
|
||||
import Hero from "@components/Hero.astro";
|
||||
|
|
@ -126,7 +126,7 @@ const projectsJSON = JSON.stringify(projects);
|
|||
/>
|
||||
<a
|
||||
class="absolute inset-0 z-10"
|
||||
x-bind:title="slide.data.title"
|
||||
x-bind:aria-label="slide.data.title"
|
||||
x-bind:href="'/' + slide.collection + '/' + slide.slug"></a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -175,11 +175,11 @@ const projectsJSON = JSON.stringify(projects);
|
|||
class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
||||
>Get started</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
<a href="/projects" class="text-sm/6 font-semibold text-white"
|
||||
>Learn more <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ const posts = (await getCollection("posts"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
<div class="mx-auto max-w-[65ch]">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{POSTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
{posts.map((article: any) => <ShowcasePost collection={article} />)}
|
||||
</ol>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ const projects = (await getCollection("projects"))
|
|||
---
|
||||
|
||||
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
<div class="mx-auto max-w-[65ch]">
|
||||
<h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
|
||||
{PROJECTS.TITLE}
|
||||
</h1>
|
||||
<ol
|
||||
class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
|
||||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue