fix: add sticky component

Author: sailwebs

next.config.ts

@@ -66,6 +66,7 @@ const withMDX = createMDX({
       ],
     ],
     rehypePlugins: [rehypeHighlight, rehypeHighlightLines, [rehypeToc, {
+      // position: 'beforebegin', // "beforebegin" | "afterbegin" | "beforeend" | "afterend"
       headings: ["h2", "h3", "h4", "h5", "h6"]
     }]],
   },

package.json

@@ -39,6 +39,7 @@
     "react-dom": "^19.0.0",
     "react-scroll": "^1.9.3",
     "react-slick": "^0.30.3",
+    "react-stickynode": "^5.0.2",
     "read-yaml-file": "^2.1.0",
     "rehype-highlight": "^7.0.2",
     "rehype-highlight-code-lines": "^1.1.3",
@@ -62,6 +63,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-slick": "^0.23.13",
+    "@types/react-stickynode": "^4.0.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
     "typescript": "^5"

src/app/[locale]/blog/[name]/layout.tsx

@@ -16,7 +16,7 @@ export default async function BlogsDetail({
   const t = await getI18n();
 
   return (
-    <Box sx={{ marginRight: '300px', paddingBlock: 3 }}>
+    <Box sx={{ paddingBlock: 3 }}>
       <Container
         sx={{ minHeight: "var(--container-min-height)"}}
         className="markdown-body"

src/app/[locale]/docs/[version]/[category]/layout.tsx

@@ -65,7 +65,7 @@ export default async function DocsLayout({
           </Box>
         </Stack>
       ) : null}
-      <Box sx={{ marginInline: menu.length ? "300px" : 0 }}>
+      <Box sx={{ marginLeft: menu.length ? "300px" : 0 }}>
         <Container
           sx={{ minHeight: "var(--container-min-height)", paddingBlock: 3}}
           className="markdown-body"

src/app/[locale]/global.css

@@ -25,14 +25,34 @@
 }
 
 /* markdown navigation */
-
-.toc {
-  border-left: 1px solid var(--css-palette-divider);
-  position: fixed;
-  width: 300px;
-  right: 0;
+@media screen and (min-width: 0) {
+  .markdown-body > *:not(.sticky-outer-wrapper) {
+    margin-right: auto;
+  }
+  .markdown-body .toc {
+    position: static;
+    display: none;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  .markdown-body > *:not(.sticky-outer-wrapper) {
+    margin-right: 300px;
+  }
+  .markdown-body .toc {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 280px;
+    display: block;
+    border-left: 1px solid var(--css-palette-divider);
+  }
+}
+
+.markdown-body .toc {
   font-size: 13px;
 }
+
 .toc .toc-level {
   margin: 0;
   padding-left: 20px;

src/app/[locale]/layout.tsx

@@ -71,7 +71,12 @@ export default async function RootLayout({
                         color="inherit"
                         size="large"
                         href="/blog"
-                        sx={{ paddingInline: 2 }}
+                        sx={{
+                          paddingInline: 2,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
                       >
                         {t("navigation.blogs")}
                       </Button>
@@ -82,7 +87,12 @@ export default async function RootLayout({
                         href="https://console.kubeblocks.io"
                         target="_blank"
                         endIcon={<LaunchOutlined />}
-                        sx={{ paddingInline: 2 }}
+                        sx={{
+                          paddingInline: 2,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
                       >
                         Kubeblocks Cloud
                       </Button>

src/app/[locale]/nav-databases.tsx

@@ -83,6 +83,9 @@ export default function DatabasesNav() {
             paddingInline: 2,
             bgcolor: open ? theme.palette.action.hover : "transparent",
             "&:hover": { bgcolor: theme.palette.action.hover },
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
           }}
           endIcon={
             <ExpandMore
@@ -99,13 +102,13 @@ export default function DatabasesNav() {
         </Button>
       }
       onChange={(v) => setOpen(v)}
-      sx={{ width: 760 }}
+      sx={{ maxWidth: 760 }}
       placement="bottom-start"
     >
       <Box p={1.5}>
         <Grid container spacing={1}>
           {databases.map((item, index) => (
-            <Grid size={4} key={index}>
+            <Grid size={{ lg: 4, md: 4, sm: 6, xs: 6 }} key={index}>
               <MenuItem
                 dense
                 component={Link}

src/app/[locale]/nav-document.tsx

@@ -58,6 +58,9 @@ export default function DocumentationNav() {
             paddingInline: 2,
             bgcolor: open ? theme.palette.action.hover : "transparent",
             "&:hover": { bgcolor: theme.palette.action.hover },
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
           }}
           endIcon={
             <ExpandMore

src/components/Sticky.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import StickyNode from 'react-stickynode';
+
+export default function Sticky(props: StickyNode.Props) {
+  return <StickyNode {...props} />
+}

src/mdx-components.tsx

@@ -14,9 +14,21 @@ import type { MDXComponents } from "mdx/types";
 import { JSX } from "react";
 import NoteBox from "./components/NoteBox";
 import { Link } from "./components/Link";
+import Sticky from "./components/Sticky";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
+    nav: (props: JSX.IntrinsicElements["nav"]) => {
+      if (props.className === "toc") {
+        return (
+          <Sticky enabled={true} top={80} >
+            <nav {...props} />
+          </Sticky>
+        );
+      } else {
+        return <nav {...props} />;
+      }
+    },
     a: (props: JSX.IntrinsicElements["a"]) => {
       const target = props.href?.match(/^http/) ? "_blank" : "_self";
       const url = props.href?.replace(/\.md/, "");