Feature/add breadcrumb to header #29
Conversation
| const pathNameMap: { [key: string]: string } = { | ||
| '/': 'Dashboard', | ||
| '/sensors': 'Sensoren', | ||
| '/settings': 'Einstellungen', | ||
| '/team': 'Mitarbeitende', | ||
| '/treecluster': 'Baumgruppen', | ||
| '/vehicles': 'Fahrzeuge', | ||
| '/waypoints/': 'Einsatzpläne', | ||
| '/waypoints/new': 'Neuer Einsatzplan', | ||
| '/map/': 'Kataster', | ||
| }; |
There was a problem hiding this comment.
What if we have the route /treecluster/:id. Then we need to update the logic here.
My suggestion, maybe we should move the hole logic from this component to it's own useBreadcrumb hook, witch converses the logic and returns the title based on the route.
| const breadcrumbs = matches | ||
| .filter(({ pathname }) => pathname !== '/') | ||
| .map(({ pathname }) => { | ||
| const title = pathNameMap[pathname] || 'Kein Titel vorhanden'; | ||
| return { | ||
| title, | ||
| path: pathname, | ||
| }; | ||
| }); |
There was a problem hiding this comment.
Maybe we should wrap this in a useMemo so it doesn't have to be recalculated on every rerender. It's only dependent on matches.
| const breadcrumbs = matches | |
| .filter(({ pathname }) => pathname !== '/') | |
| .map(({ pathname }) => { | |
| const title = pathNameMap[pathname] || 'Kein Titel vorhanden'; | |
| return { | |
| title, | |
| path: pathname, | |
| }; | |
| }); | |
| const breadcrumbs = useMemo(() => matches | |
| .filter(({ pathname }) => pathname !== '/') | |
| .map(({ pathname }) => { | |
| const title = pathNameMap[pathname] || 'Kein Titel vorhanden'; | |
| return { | |
| title, | |
| path: pathname, | |
| }; | |
| }), [matches]); |
| {breadcrumbs.map((breadcrumb, key) => ( | ||
| <li key={key} className="flex items-center"> | ||
| <ChevronRight className="w-3.5 stroke-1" /> | ||
| <Link | ||
| className="data-[status=active]:text-dark data-[status=active]:font-semibold transition-all ease-in-out duration-300 hover:text-green-dark hover:data-[status=active]:text-green-dark" | ||
| to={breadcrumb.path} | ||
| > | ||
| {breadcrumb.title} | ||
| </Link> | ||
| </li> | ||
| ))} |
There was a problem hiding this comment.
Is there a case where the list gets so big that it no longer fits? If so, we should introduce a limit or something, maybe shadncn's solution with the dots makes sense.
There was a problem hiding this comment.
I wanted to use the component first, but I noticed that the breadcrumb uses real and does not go through TanStack's router. Is this intentional, so that the page reloads completely?
frontend/src/routes/index.tsx
Outdated
| <li key={key}> | ||
| <Link | ||
| to={card.url} | ||
| aria-label={card.linkLabel} | ||
| className={`shadow-card p-6 rounded-xl group flex flex-col gap-4 transition-all ease-in-out duration-300 border | ||
| ${key % 2 !== 0 ? 'border-green-dark bg-green-dark-50 hover:bg-green-dark-100' : 'border-green-light bg-green-light-50 hover:bg-green-light-100'} `} | ||
| > | ||
| <h3 className="font-lato text-lg text-dark font-semibold">{card.headline}</h3> | ||
| <p>{card.description}</p> | ||
| <p className="font-lato font-semibold text-green-dark flex items-center gap-x-2"> | ||
| <span>{card.linkLabel}</span> | ||
| <MoveRight className="transition-all ease-in-out duration-300 group-hover:translate-x-2"/> | ||
| </p> | ||
| </Link> | ||
| </li> |
There was a problem hiding this comment.
Perhaps this could be a component of its own?
Closes #24
Closes #23