51 lines
2.7 KiB
Plaintext
51 lines
2.7 KiB
Plaintext
---
|
|
import type {navLink} from "@interfaces/site-layout.ts";
|
|
|
|
const items: navLink[] = Astro.props.items;
|
|
const depth: number = Astro.props.depth ?? 0;
|
|
const paths: string[] = Astro.props.paths ?? [];
|
|
|
|
const getNavLinkSuffix = (entry: navLink): string => {
|
|
return "-" + [...paths, entry.path].join("-")
|
|
}
|
|
const getHrefPath = (entry: navLink): string => {
|
|
return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
|
|
}
|
|
---
|
|
<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "md:flex-row md:space-x-8 md:mt-0")}>
|
|
{
|
|
items.map((entry, index) => (
|
|
(entry.enabled ?? true) && (
|
|
<li>
|
|
{Array.isArray(entry.children) && entry.children.length ? (
|
|
<button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
|
|
data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
|
|
data-dropdown-placement="bottom"
|
|
class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light md:hover:bg-transparent md:border-0 md:hover:text-caperren-green-light md:p-0 ">
|
|
{entry.navText}
|
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" 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(entry)}
|
|
class="z-10 hidden bg-black border border-caperren-green shadow-sm w-screen md:w-max">
|
|
<Astro.self items={entry.children} paths={[...paths, entry.path]}
|
|
depth={depth + 1}/>
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<a href={getHrefPath(entry)}
|
|
class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark md:p-0"
|
|
aria-current="page">{entry.navText}</a>
|
|
|
|
)}
|
|
</li>
|
|
)
|
|
))}
|
|
</ul> |