Responsive navigation fully working, placeholders for all major items on site, resume pages working, abstracted site-layout, preparing for unit and e2e testing, added flotbite + tailwind + vitest + playwright

src/components/NestedNavbarEntries.astro

@@ -0,0 +1,47 @@
+---
+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 ? "" : "md:flex-row md:space-x-8 md:mt-0")}>
+    {
+        items.map((entry, index) => (
+                <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.title}
+                                <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.title}</a>
+
+                    )}
+                </li>
+        ))}
+</ul>