refactor: LeftNavBar to ToC variant="left"

Author: wackerow

app/[locale]/learn/page.tsx

@@ -13,9 +13,9 @@ import FileContributors from "@/components/FileContributors"
 import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
 import { Image, ImageProps } from "@/components/Image"
-import LeftNavBar from "@/components/LeftNavBar"
 import MainArticle from "@/components/MainArticle"
 import { ContentContainer } from "@/components/MdComponents"
+import TableOfContents from "@/components/TableOfContents"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Center, Flex, Stack } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
@@ -185,11 +185,7 @@ export default async function Page({ params }: { params: Promise<Params> }) {
         asChild
       >
         <MainArticle>
-          <LeftNavBar
-            tocItems={tocData}
-            // TODO: Remove `!` flag once this component is migrated to ShadCN
-            className="max-lg:!hidden"
-          />
+          <TableOfContents items={tocData} variant="left" />
 
           <ContentContainer id="content">
             <Section

app/[locale]/staking/_components/staking.tsx

@@ -13,13 +13,13 @@ import Card from "@/components/Card"
 import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import LeftNavBar from "@/components/LeftNavBar"
 import { ContentContainer, Page } from "@/components/MdComponents"
 import MobileButtonDropdown from "@/components/MobileButtonDropdown"
 import PageHero from "@/components/PageHero"
 import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
 import StakingHierarchy from "@/components/Staking/StakingHierarchy"
 import StakingStatsBox from "@/components/Staking/StakingStatsBox"
+import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import {
   ButtonLink,
@@ -251,11 +251,10 @@ const StakingPage = ({
         <StakingStatsBox data={data} />
       </HeroStatsWrapper>
       <Page>
-        <LeftNavBar
+        <TableOfContents
+          items={tocArray}
+          variant="left"
           dropdownLinks={dropdownLinks}
-          tocItems={tocArray}
-          // TODO: Remove bang after this component is migrated to Tailwind
-          className="max-lg:!hidden"
         />
         <ContentContainer>
           <Flex className="mt-16 flex-col gap-16 lg:mt-0">

src/layouts/ContentLayout.tsx

@@ -4,14 +4,16 @@ import { FileContributor } from "@/lib/types"
 
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar"
 import { ContentContainer, Page } from "@/components/MdComponents"
 import MobileButtonDropdown from "@/components/MobileButtonDropdown"
+import TableOfContents, {
+  type TableOfContentsProps,
+} from "@/components/TableOfContents"
 
 type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
-  Pick<LeftNavBarProps, "dropdownLinks" | "tocItems" | "maxDepth"> & {
-    showDropdown?: boolean
+  Pick<TableOfContentsProps, "dropdownLinks" | "showDropdown" | "maxDepth"> & {
     children: React.ReactNode
+    tocItems: TableOfContentsProps["items"]
     heroSection: React.ReactNode
     contributors: FileContributor[]
     lastEditLocaleTimestamp: string
@@ -33,14 +35,12 @@ export const ContentLayout = ({
       {heroSection}
 
       <Page>
-        <LeftNavBar
-          className="max-lg:hidden"
+        <TableOfContents
+          items={tocItems}
           dropdownLinks={dropdownLinks}
-          tocItems={tocItems}
           maxDepth={maxDepth}
           showDropdown={showDropdown}
         />
-
         <ContentContainer>
           {children}