patch: variant styling details and maxDepth

Author: wackerow

src/components/TableOfContents/TableOfContentsLink.tsx

@@ -11,7 +11,7 @@ const variants = cva(
   {
     variants: {
       variant: {
-        docs: "",
+        docs: "py-0.5",
         beginner: "[&_[data-label='marker']]:!hidden inline leading-base",
         left: "",
       },

src/components/TableOfContents/index.tsx

@@ -20,16 +20,16 @@ import { useTranslation } from "@/hooks/useTranslation"
 import { usePathname } from "@/i18n/routing"
 
 const variants = cva(
-  "sticky top-28 flex h-fit max-lg:hidden flex-col items-start overflow-y-auto",
+  "sticky flex h-fit max-lg:hidden flex-col items-start overflow-y-auto",
   {
     variants: {
       variant: {
-        docs: "top-20 min-w-48 max-w-[25%] p-4 pe-0 gap-4",
+        docs: "top-19 min-w-48 max-w-[25%] p-4 pe-0 gap-4",
         beginner: cn(
-          "min-w-80 max-w-72 lg:p-8 px-3 py-2",
+          "top-28 min-w-80 max-w-72 lg:p-8 px-3 py-2",
           "shrink-0 gap-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium"
         ),
-        left: "me-16 ms-8 basis-[400px] [&_ul]:leading-relaxed",
+        left: "top-28 me-16 ms-8 basis-[400px] [&_ul]:leading-relaxed",
       },
     },
     defaultVariants: {
@@ -54,7 +54,7 @@ const labelVariants = cva("font-bold", {
 const listVariants = cva("mx-0 gap-2 py-0", {
   variants: {
     variant: {
-      docs: "list-none border-s border-s-body-medium ps-4 my-2",
+      docs: "list-none border-s border-s-body-medium ps-4 my-2 text-sm",
       beginner: "list-decimal border-s-0 text-base list-inside ps-0 my-2",
       left: "list-none my-0",
     },
@@ -129,7 +129,7 @@ const TableOfContents = ({
         </ButtonLink>
       )}
       {variant === "left" && showDropdown && dropdownLinks && (
-        <div className="relative mb-8 flex items-end justify-end">
+        <div className="relative mb-8 flex w-full items-end justify-end">
           <ButtonDropdown
             list={dropdownLinks}
             className="w-full min-w-[240px]"

src/layouts/ContentLayout.tsx

@@ -11,7 +11,7 @@ import TableOfContents, {
 } from "@/components/TableOfContents"
 
 type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
-  Pick<TableOfContentsProps, "dropdownLinks" | "showDropdown" | "maxDepth"> & {
+  Pick<TableOfContentsProps, "dropdownLinks" | "showDropdown"> & {
     children: React.ReactNode
     tocItems: TableOfContentsProps["items"]
     heroSection: React.ReactNode
@@ -23,7 +23,6 @@ export const ContentLayout = ({
   children,
   dropdownLinks,
   tocItems,
-  maxDepth,
   showDropdown = true,
   heroSection,
   contributors,
@@ -38,8 +37,9 @@ export const ContentLayout = ({
         <TableOfContents
           items={tocItems}
           dropdownLinks={dropdownLinks}
-          maxDepth={maxDepth}
+          maxDepth={0}
           showDropdown={showDropdown}
+          variant="left"
         />
         <ContentContainer>
           {children}

src/layouts/Docs.tsx

@@ -144,9 +144,9 @@ export const DocsLayout = ({
           <TableOfContents
             editPath={absoluteEditPath}
             items={tocItems}
-            isMobile
             maxDepth={frontmatter.sidebarDepth!}
             hideEditButton={!!frontmatter.hideEditButton}
+            isMobile
           />
           <div className="prose prose-lg max-w-none break-words">
             {children}

src/layouts/Static.tsx

@@ -132,9 +132,9 @@ export const StaticLayout = ({
             <TableOfContents
               className="relative"
               items={tocItems}
-              isMobile
               maxDepth={frontmatter.sidebarDepth || 2}
               hideEditButton={!!frontmatter.hideEditButton}
+              isMobile
             />
             {children}
 

src/layouts/md/Roadmap.tsx

@@ -106,7 +106,6 @@ export const RoadmapLayout = ({
       dir={contentNotTranslated ? "ltr" : "unset"}
       tocItems={tocItems}
       dropdownLinks={dropdownLinks}
-      maxDepth={frontmatter.sidebarDepth}
       contributors={contributors}
       lastEditLocaleTimestamp={lastEditLocaleTimestamp}
       heroSection={

src/layouts/md/Staking.tsx

@@ -172,7 +172,6 @@ export const StakingLayout = ({
       dir={contentNotTranslated ? "ltr" : "unset"}
       tocItems={tocItems}
       dropdownLinks={dropdownLinks}
-      maxDepth={frontmatter.sidebarDepth}
       contributors={contributors}
       lastEditLocaleTimestamp={lastEditLocaleTimestamp}
       heroSection={<ContentHero {...heroProps} />}

src/layouts/md/UseCases.tsx

@@ -199,7 +199,6 @@ export const UseCasesLayout = ({
       <ContentLayout
         tocItems={tocItems}
         dropdownLinks={dropdownLinks}
-        maxDepth={frontmatter.sidebarDepth}
         contributors={contributors}
         lastEditLocaleTimestamp={lastEditLocaleTimestamp}
         heroSection={<ContentHero {...heroProps} />}

src/layouts/stories/ContentLayout.stories.tsx

@@ -61,7 +61,6 @@ export const ContentLayout: StoryObj<typeof meta> = {
         },
       ],
     },
-    maxDepth: 2,
     contributors: [
       {
         login: "samajammin",