Updates

2026-03-04 17:35:14 +01:00
parent f73b56cdc4
commit db26e26495
113 changed files with 12433 additions and 169 deletions
@@ -0,0 +1,141 @@
+import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import Row from "../layout/Row";
+import HeaderLink from "./HeaderLink";
+import { ChevronDown } from "lucide-react";
+import Dropdown from "./Dropdown";
+import { TwuiHeaderLink } from "./HeaderNav";
+import Card from "./Card";
+import Stack from "../layout/Stack";
+import Button from "../layout/Button";
+
+/**
+ * # Header Nav Main Link Component
+ * @className twui-header-nav-link-component
+ * @className twui-header-nav-link-icon
+ * @className twui-header-nav-link-dropdown
+ */
+export default function HeaderNavLinkComponent({
+    link,
+    dropdown,
+}: {
+    link: TwuiHeaderLink;
+    dropdown?: ReactNode;
+}) {
+    const isDropdown = dropdown || link.dropdown || link.children?.[0];
+
+    const mainLinkComponent = (
+        <Row className="gap-0 grow">
+            <HeaderLink link={link} strict={link.strict} />
+            {isDropdown && (
+                <ChevronDown
+                    className={twMerge(
+                        "hidden xl:flex xl:-ml-1",
+                        "twui-header-nav-link-icon"
+                    )}
+                    size={20}
+                />
+            )}
+        </Row>
+    );
+
+    const [showMobileDropdown, setShowMobileDropdown] = React.useState(false);
+
+    return (
+        <div
+            className={twMerge(
+                "relative w-full xl:w-auto [&_a.active]:font-bold",
+                "twui-header-nav-link-component"
+            )}
+        >
+            {isDropdown ? (
+                <React.Fragment>
+                    <Stack className="flex xl:hidden w-full">
+                        <Row className="w-full justify-between">
+                            {mainLinkComponent}
+                            <Button
+                                variant="ghost"
+                                onClick={() =>
+                                    setShowMobileDropdown(!showMobileDropdown)
+                                }
+                                title="Header Links Dropdown Button"
+                            >
+                                <ChevronDown
+                                    className={twMerge(
+                                        "twui-header-nav-link-icon !text-link dark:!text-white"
+                                    )}
+                                    size={20}
+                                />
+                            </Button>
+                        </Row>
+
+                        {showMobileDropdown && (
+                            <Stack className="w-full">
+                                {dropdown ? (
+                                    dropdown
+                                ) : link.children?.[0] ? (
+                                    <Card
+                                        className={twMerge(
+                                            "w-full p-0",
+                                            "twui-header-nav-link-dropdown"
+                                        )}
+                                    >
+                                        <Stack className="w-full items-stretch gap-0 py-2">
+                                            {link.children.map(
+                                                (_ch, _index) => {
+                                                    return (
+                                                        <HeaderLink
+                                                            link={_ch}
+                                                            key={_index}
+                                                            className="px-6 py-4"
+                                                        />
+                                                    );
+                                                }
+                                            )}
+                                        </Stack>
+                                    </Card>
+                                ) : link.dropdown ? (
+                                    link.dropdown
+                                ) : null}
+                            </Stack>
+                        )}
+                    </Stack>
+
+                    <Dropdown
+                        target={mainLinkComponent}
+                        position="center"
+                        hoverOpen
+                        className="hidden xl:flex"
+                    >
+                        {dropdown ? (
+                            dropdown
+                        ) : link.children?.[0] ? (
+                            <Card
+                                className={twMerge(
+                                    "min-w-[200px] mt-2 p-0",
+                                    "twui-header-nav-link-dropdown"
+                                )}
+                            >
+                                <Stack className="w-full items-stretch gap-0 py-2">
+                                    {link.children.map((_ch, _index) => {
+                                        return (
+                                            <HeaderLink
+                                                link={_ch}
+                                                key={_index}
+                                                className="px-6 py-4"
+                                            />
+                                        );
+                                    })}
+                                </Stack>
+                            </Card>
+                        ) : link.dropdown ? (
+                            link.dropdown
+                        ) : null}
+                    </Dropdown>
+                </React.Fragment>
+            ) : (
+                mainLinkComponent
+            )}
+        </div>
+    );
+}