Wiki/src/components/navigation/NavContents.tsx at 420643d3da2edc29ee7bbc71222ff80fd312e74a · VocaDB/Wiki · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
import { useState } from "react";
import { cn } from "@/lib/utils.ts";
import type {
  groupedNavbarParents,
  navbarParents,
  pages,
} from "./navigationConfig";

// We have to access these navbar configs via astro props because they are not available on the client side
export interface NavContentsProps {
  mobile?: boolean;
  groupedNavbarParents: typeof groupedNavbarParents;
  navbarParents: typeof navbarParents;
  pages: typeof pages;
}

export function NavContents({
  mobile = false,
  groupedNavbarParents,
  navbarParents,
  pages,
}: NavContentsProps) {
  const [expanded, setExpanded] = useState<string | undefined>();

  const containerClass = cn(
    "flex flex-col",
    mobile ? "space-y-3 pb-6" : "space-y-1 pb-4 text-sm",
  );
  const buttonClass = mobile ? "py-1.5" : "py-1";
  const linkClass = "hover:underline";

  return (
    <>
      {navbarParents
        .map((i) => {
          return {
            navbarItem: i,
            title:
              pages.find((page) => page.slug === i.title.toLowerCase())
                ?.title ?? i.title,
          };
        })
        .map(({ navbarItem, title }) => (
          <div key={navbarItem.title} className={containerClass}>
            <h4 className={"font-semibold"}>{title}</h4>

            <div className={"flex flex-col"}>
              {navbarItem.subcategories !== undefined &&
                navbarItem.subcategories.length > 0 && (
                  <div className={mobile ? "" : "text-sm"}>
                    {navbarItem.subcategories.map((c) => (
                      <div key={c}>
                        <button
                          type="button"
                          className={cn(
                            "collapsibleNav group flex flex-row w-full items-center gap-1 peer text-muted-foreground hover:underline cursor-pointer py-1",
                            buttonClass,
                          )}
                          data-state={c === expanded ? "open" : "closed"}
                          onClick={() =>
                            c === expanded
                              ? setExpanded(undefined)
                              : setExpanded(c)
                          }
                        >
                          <span className="flex-1 text-left">{c}</span>
                          <ChevronDownIcon className="group-data-[state=closed]:block hidden" />
                          <ChevronUpIcon className="group-data-[state=closed]:hidden" />
                        </button>
                        <div
                          className={cn(
                            "peer-data-[state=open]:grid hidden text-muted-foreground ml-4",
                          )}
                        >
                          {groupedNavbarParents[c]?.map((post) => (
                            <a
                              className={cn(linkClass, buttonClass)}
                              key={post.slug}
                              href={["/docs", post.slug].join("/")}
                            >
                              {post.title}
                            </a>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                )}

              {groupedNavbarParents[navbarItem.title]?.map((page) => (
                <a
                  href={["/docs", page.slug].join("/")}
                  key={page.slug}
                  className={cn(
                    "text-muted-foreground",
                    linkClass,
                    buttonClass,
                  )}
                >
                  {page.title}
                </a>
              ))}
            </div>
          </div>
        ))}
    </>
  );
}