Hide how-to-doc for Nextra v3 (#233)

src/components/DocTitle.jsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+
+export default function DocTitle() {
+  const titleRef = useRef(null);
+
+  useEffect(() => {
+    if (!titleRef.current) {
+      return;
+    }
+
+    const isDocRoute = window.location.pathname.startsWith("/how-to-doc");
+    const parent = titleRef.current.parentNode;
+    const grandparent = parent.parentNode;
+
+    // Hide sidebar menu option
+    if (!isDocRoute && parent.tagName === "A" && grandparent.tagName === "LI") {
+      grandparent.classList.add("hidden");
+    }
+
+    // Hide nextLink on the page before "How to doc"
+    if (!isDocRoute && parent.tagName === "A" && grandparent.tagName === "DIV") {
+      parent.classList.add("hidden");
+    }
+  }, []);
+
+  return <span ref={titleRef}>How to doc</span>;
+}

src/pages/_meta.js → src/pages/_meta.jsx

@@ -1,3 +1,5 @@
+import DocTitle from "@/components/DocTitle";
+
 export default {
   index: "Welcome",
   core: "CosmWasm Core",
@@ -7,9 +9,8 @@ export default {
   storey: "Storey",
   "cw-storage-plus": "StoragePlus",
   "cw-multi-test": "MultiTest",
-  "how-to-doc": "How to doc",
-  tags: {
-    display: "hidden",
-  },
   tutorial: "Tutorial",
+  // NOTE - Leave these 2 items at the bottom 🙏
+  "how-to-doc": { title: <DocTitle /> },
+  tags: { display: "hidden" },
 };

src/pages/global.css

@@ -10,10 +10,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-/* Hide How to Doc directory on the sidebar */
-li:has(a > .how-to-doc-dir),
-/* Hide links to How to Doc index, except the prevLink on the page after that */
-a[href="/how-to-doc"]:not(:has(div))[class~="ltr:nx-ml-auto"] {
-  display: none;
-}

src/theme.config.jsx

@@ -55,20 +55,6 @@ export default {
   sidebar: {
     autoCollapse: true,
     defaultMenuCollapseLevel: 1,
-    // NOTE this property no longer exists
-    /* titleComponent: ({ title, route }) => {
-      const [isDocRoute, setIsDocRoute] = useState(false);
-
-      useEffect(() => {
-        setIsDocRoute(window.location.pathname.startsWith("/how-to-doc"));
-      }, []);
-
-      return (
-        <div className={cn("group", !isDocRoute && title === "How to doc" ? "how-to-doc-dir" : "")}>
-          <span>{title}</span> <TagDots route={route} />
-        </div>
-      );
-    }, */
   },
   head: function useHead() {
     const config = useConfig();