fix: wrong active item after anchor select

This commit is contained in:
iCrawl
2022-08-23 03:59:53 +02:00
parent caa5c0332f
commit af295acedc
5 changed files with 6 additions and 68 deletions

View File

@@ -65,7 +65,6 @@
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-syntax-highlighter": "^15.5.0",
"rehype-highlight": "^5.0.2",
"rehype-ignore": "^1.0.1",
"rehype-raw": "^6.1.1",
"rehype-slug": "^5.0.1",

View File

@@ -102,6 +102,8 @@ export function SidebarItems({
const { classes } = useStyles();
const groupItems = groupMembers(members);
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0];
return (
<>
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
@@ -126,7 +128,7 @@ export function SidebarItems({
) : null}
</Group>
}
active={router.asPath === member.path}
active={asPathWithoutQueryAndAnchor === member.path}
variant="filled"
></NavLink>
</Link>

View File

@@ -138,8 +138,8 @@ export function SidebarLayout({
</Menu.Item>
)) ?? [];
const asPathWithoutQuery = router.asPath.split('?')[0]?.split('#')[0];
const breadcrumbs = asPathWithoutQuery?.split('/').map((path, idx, original) => (
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0];
const breadcrumbs = asPathWithoutQueryAndAnchor?.split('/').map((path, idx, original) => (
<Link key={idx} href={original.slice(0, idx + 1).join('/')} passHref>
<Anchor component="a">{path}</Anchor>
</Link>

View File

@@ -9,7 +9,6 @@ import Head from 'next/head';
import { useRouter } from 'next/router';
import type { GetStaticPaths, GetStaticProps } from 'next/types';
import { VscChevronUp } from 'react-icons/vsc';
import rehypeHighlight from 'rehype-highlight';
import rehypeIgnore from 'rehype-ignore';
import rehypeRaw from 'rehype-raw';
import rehypeSlug from 'rehype-slug';
@@ -138,7 +137,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
mdxOptions: {
remarkPlugins: [remarkGfm],
remarkRehypeOptions: { allowDangerousHtml: true },
rehypePlugins: [rehypeRaw, rehypeIgnore, rehypeSlug, [rehypeHighlight, { ignoreMissing: true }]],
rehypePlugins: [rehypeRaw, rehypeIgnore, rehypeSlug],
format: 'md',
},
});