feat(website): show package members in a sidebar (#8245)

* feat(website): show package members in a sidebar

* fix: put response instead of loader

* Apply suggestions from code review

Co-authored-by: Noel <buechler.noel@outlook.com>

* chore: make requested changes

* refactor: make only package list scrollable

* feat: make sidebar mobile responsive

* fix: breakpoints for sidebar

Co-authored-by: Noel <buechler.noel@outlook.com>

packages/website/src/util/icon.tsx

@@ -0,0 +1,14 @@
+import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, VscSymbolVariable } from 'react-icons/vsc';
+
+export function generateIcon(kind: string, className?: string) {
+	const icons = {
+		Class: <VscSymbolClass color="blue" className={className} />,
+		Method: <VscSymbolMethod className={className} />,
+		Function: <VscSymbolMethod color="purple" className={className} />,
+		Enum: <VscSymbolEnum className={className} />,
+		Interface: <VscSymbolInterface color="blue" className={className} />,
+		TypeAlias: <VscSymbolVariable color="blue" className={className} />,
+	};
+
+	return icons[kind as keyof typeof icons];
+}

packages/website/src/util/parse.server.ts

@@ -165,6 +165,7 @@ export function genParameter(model: ApiModel, param: Parameter): ParameterDocume
 export function getMembers(pkg: ApiPackage) {
 	return pkg.members[0]!.members.map((member) => ({
 		name: member.displayName,
+		kind: member.kind,
 		path: generatePath(member.getHierarchy()),
 	}));
 }