110 lines
3.8 KiB
Plaintext
110 lines
3.8 KiB
Plaintext
---
|
|
import type { navLink } from "@interfaces/site-layout.ts";
|
|
|
|
import { getHrefPath, getNavLinkSuffix } from "@data/site-layout.ts";
|
|
|
|
const items: navLink[] = Astro.props.items;
|
|
const depth: number = Astro.props.depth ?? 0;
|
|
const paths: string[] = Astro.props.paths ?? [];
|
|
|
|
const { pathname } = Astro.url;
|
|
---
|
|
|
|
<ul
|
|
class:list={[
|
|
"border-caperren-green flex flex-col space-y-4 bg-black",
|
|
depth
|
|
? "space-y-4 py-4"
|
|
: "items-start lg:mt-0 lg:flex-row lg:space-y-0 lg:space-x-8",
|
|
]}
|
|
>
|
|
{
|
|
items.map(
|
|
(entry) =>
|
|
(entry.enabled ?? true) &&
|
|
!(entry.hidden ?? false) && (
|
|
<li class="">
|
|
{Array.isArray(entry.children) && entry.children.length ? (
|
|
<div>
|
|
<button
|
|
id={"dropdownNavbarLink" + getNavLinkSuffix(paths, entry)}
|
|
data-dropdown-toggle={
|
|
"dropdownNavbar" + getNavLinkSuffix(paths, entry)
|
|
}
|
|
data-dropdown-placement="bottom-start"
|
|
data-dropdown-offset-distance="5"
|
|
data-dropdown-offset-skidding="12"
|
|
class:list={[
|
|
"hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between lg:p-0 lg:hover:bg-transparent",
|
|
pathname.startsWith(getHrefPath(paths, entry)) &&
|
|
!(entry.placeholderEntry ?? false)
|
|
? "border-caperren-green border-b-2"
|
|
: false,
|
|
]}
|
|
>
|
|
{entry.navText}
|
|
<svg
|
|
class="ms-2.5 h-2.5 w-2.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 10 6"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m1 1 4 4 4-4"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
id={"dropdownNavbar" + getNavLinkSuffix(paths, entry)}
|
|
class="border-caperren-green z-10 hidden w-max max-w-screen border bg-black px-6 shadow-sm"
|
|
>
|
|
<Astro.self
|
|
items={entry.children}
|
|
paths={[...paths, entry.path]}
|
|
depth={depth + 1}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<a
|
|
href={
|
|
!(entry.placeholderEntry ?? false)
|
|
? getHrefPath(paths, entry)
|
|
: undefined
|
|
}
|
|
target={
|
|
getHrefPath(paths, entry).startsWith("/") ? "" : "_blank"
|
|
}
|
|
class:list={[
|
|
"ring-caperren-green-dark block bg-transparent lg:p-0",
|
|
pathname === getHrefPath(paths, entry)
|
|
? "border-caperren-green border-b-2"
|
|
: false,
|
|
entry.isSubItem ? "ms-3" : false,
|
|
entry.placeholderEntry
|
|
? false
|
|
: "hover:text-caperren-green-light",
|
|
]}
|
|
aria-current={
|
|
pathname === getHrefPath(paths, entry) &&
|
|
!(entry.placeholderEntry ?? false)
|
|
? "page"
|
|
: undefined
|
|
}
|
|
>
|
|
{entry.isSubItem && "∟ "}
|
|
{entry.navText}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</li>
|
|
),
|
|
)
|
|
}
|
|
</ul>
|