feat(website): group items by symbol kind (#8360)

* feat(website): group items by symbol kind

* chore: make requested changes

* chore: fix darkmode colors

* chore: make requested changes

* Update packages/website/src/components/ListSidebar.tsx

Co-authored-by: Almeida <almeidx@pm.me>

Co-authored-by: Almeida <almeidx@pm.me>
This commit is contained in:
Suneet Tipirneni
2022-07-26 03:30:57 -04:00
committed by GitHub
parent a7d49e56fc
commit 1275918ca8
4 changed files with 137 additions and 19 deletions

View File

@@ -1,6 +1,6 @@
import Link from 'next/link';
import { FiMenu } from 'react-icons/fi';
import { VscPackage } from 'react-icons/vsc';
import { ListSidebar } from './ListSidebar';
import type { getMembers } from '~/util/parse.server';
export interface ItemListProps {
@@ -19,7 +19,7 @@ function onMenuClick() {
export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
return (
<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-0.5 border-gray">
<div className="flex flex-col max-h-full grow min-w-[270px] lg:border-r-solid border-0.5 border-gray">
<div className="border-b-0.5 border-gray py-2">
<h2 className="flex gap-2 items-center m-0 px-2 dark:text-white">
<VscPackage />
@@ -30,21 +30,7 @@ export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps
</button>
</div>
<div className="hidden lg:block lg:min-h-full overflow-y-scroll overflow-x-clip p-7 space-y-2">
{data.members.map((member, i) => (
<div key={i} className="flex items-center no-underline break-all text-blue-500 dark:text-blue-300">
<Link href={member.path}>
<a
className={`no-underline m-0 ${
selectedMember === member.name
? 'text-blue-500 dark:text-blue-300 font-semibold'
: 'text-black dark:text-white hover:text-dark-100 dark:hover:text-gray-300 hover:font-semibold'
}`}
>
{member.name}
</a>
</Link>
</div>
))}
<ListSidebar members={data.members} title="test" selectedMember={selectedMember} />
</div>
</div>
);