Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Fix the docs sidebar active link status not properly working
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m1s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-21 13:45:26 -04:00
parent 3ea7e8c70e
commit 335ed10a53
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Frontend/src/app/(pages)/docs/[[...slug]]/layout.tsx
View File

@ -9,7 +9,8 @@ export const dynamic = "force-static";
/** /**
* The layout for the docs page. * The layout for the docs page.
* *
* @param children the children of this layout * @param params the params of the request
* @param render the children to render
* @returns the layout jsx * @returns the layout jsx
*/ */
const DocumentationLayout = ({ const DocumentationLayout = ({

2
Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
View File

@ -20,7 +20,7 @@ import Image from "next/image";
* The page to display content * The page to display content
* from an MDX file on the docs. * from an MDX file on the docs.
* *
* @param slug the slug of the mdx file * @param params the params of the request
* @return the page jsx * @return the page jsx
*/ */
const ContentPage = ({ params }: PageProps): ReactElement => { const ContentPage = ({ params }: PageProps): ReactElement => {

42
Frontend/src/app/components/docs/sidebar.tsx
View File

@ -55,23 +55,31 @@ const Sidebar = ({ activeSlug }: { activeSlug: string }): ReactElement => {
{/* Links */} {/* Links */}
<div className="flex flex-col border-l border-zinc-700"> <div className="flex flex-col border-l border-zinc-700">
{categoryContent.map( {categoryContent.map(
(content, contentIndex) => ( (
<Link content: DocsContentMetadata,
key={contentIndex} contentIndex: number
className={cn( ): ReactElement => {
"pl-3 -ml-px text-zinc-200 hover:opacity-85 transition-all transform-gpu", const active: boolean =
activeSlug === (!activeSlug &&
content.slug && content.slug === "home") ||
"border-l border-minecraft-green-4" activeSlug === content.slug;
)} return (
href={ <Link
`/docs/${content.slug}` || key={contentIndex}
"#" className={cn(
} "pl-3 -ml-px text-zinc-200 hover:opacity-85 transition-all transform-gpu",
> active &&
{content.title} "border-l border-minecraft-green-4"
</Link> )}
) href={
`/docs/${content.slug}` ||
"#"
}
>
{content.title}
</Link>
);
}
)} )}
</div> </div>
</div> </div>