Mobile-menu-blog-Bug-fixes

package.json

@@ -40,15 +40,15 @@
     }
   },
   "dependencies": {
-    "@docusaurus/core": "^3.8.1",
-    "@docusaurus/cssnano-preset": "^3.8.1",
-    "@docusaurus/plugin-client-redirects": "^3.8.1",
-    "@docusaurus/plugin-content-blog": "^3.8.1",
-    "@docusaurus/plugin-content-docs": "^3.8.1",
-    "@docusaurus/plugin-google-gtag": "^3.8.1",
-    "@docusaurus/preset-classic": "^3.8.1",
-    "@docusaurus/theme-live-codeblock": "^3.8.1",
-    "@docusaurus/theme-mermaid": "^3.8.1",
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/cssnano-preset": "^3.9.2",
+    "@docusaurus/plugin-client-redirects": "^3.9.2",
+    "@docusaurus/plugin-content-blog": "^3.9.2",
+    "@docusaurus/plugin-content-docs": "^3.9.2",
+    "@docusaurus/plugin-google-gtag": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
+    "@docusaurus/theme-live-codeblock": "^3.9.2",
+    "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
     "@openzeppelin/merkle-tree": "^1.0.8",
     "@pushchain/core": "^4.0.9",

src/css/custom.css

@@ -1380,8 +1380,14 @@ a:hover {
   background-color: rgba(18, 19, 21, 0.75) !important;
 } */
 
-.navbar-sidebar__back {
-  display: none;
+/* Hide Docusaurus back button only when showing custom SecondaryMenu via "Move to Documentation" */
+.custom-docs-secondary-menu .navbar-sidebar__back {
+  display: none !important;
+}
+
+/* Prevent body scroll when mobile menu is open */
+html:has(.navbar-sidebar--show) {
+  overflow: hidden;
 }
 
 .navbar-sidebar {

src/theme/Navbar/MobileSidebar/BlogMobileSidebarContent.js

@@ -1,14 +1,43 @@
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import { useSiteBaseUrl } from '@site/src/hooks/useSiteBaseUrl';
 import featuredBlogsData from '@site/static/content/featuredblogs.json';
-import React from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 export default function BlogMobileSidebarContent() {
   const history = useHistory();
+  const location = useLocation();
   const baseURL = useSiteBaseUrl() || '';
   const mobileSidebar = useNavbarMobileSidebar();
+  const [showBlogMenu, setShowBlogMenu] = useState(false);
+  const [tocHeadings, setTocHeadings] = useState([]);
+
+  const pathname = location?.pathname || '';
+  const isBlogRoot =
+    pathname === baseURL + '/blog' || pathname === baseURL + '/blog/';
+  const isBlogPost =
+    pathname.startsWith(baseURL + '/blog/') &&
+    !isBlogRoot &&
+    pathname !== baseURL + '/blog/tags' &&
+    !pathname.includes('/blog/tags/');
+
+  useEffect(() => {
+    // Reset to show TOC when pathname changes
+    setShowBlogMenu(false);
+
+    if (isBlogPost) {
+      // Extract TOC headings from the page
+      const headings = Array.from(
+        document.querySelectorAll('.markdown h2, .markdown h3')
+      ).map((heading) => ({
+        id: heading.id,
+        text: heading.textContent,
+        level: heading.tagName.toLowerCase(),
+      }));
+      setTocHeadings(headings);
+    }
+  }, [isBlogPost, pathname]);
 
   const handleNavigation = (path) => {
     mobileSidebar.toggle();
@@ -19,6 +48,14 @@ export default function BlogMobileSidebarContent() {
     }
   };
 
+  const handleTocClick = (id) => {
+    mobileSidebar.toggle();
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
   const stripEmojis = (text) => {
     return text
       .replace(
@@ -28,8 +65,46 @@ export default function BlogMobileSidebarContent() {
       .trim();
   };
 
+  // Show TOC if on a blog post and not showing custom menu
+  if (isBlogPost && !showBlogMenu) {
+    return (
+      <MobileMenuContainer>
+        <BackButton onClick={() => setShowBlogMenu(true)}>
+          ← Back to Blog
+        </BackButton>
+        <MenuDivider />
+
+        {tocHeadings.length > 0 && (
+          <TOCSection>
+            <TOCHeader>On this page</TOCHeader>
+            <TOCContainer>
+              {tocHeadings.map((heading, index) => (
+                <TOCItem
+                  key={index}
+                  level={heading.level}
+                  onClick={() => handleTocClick(heading.id)}
+                >
+                  {heading.text}
+                </TOCItem>
+              ))}
+            </TOCContainer>
+          </TOCSection>
+        )}
+      </MobileMenuContainer>
+    );
+  }
+
   return (
     <MobileMenuContainer>
+      {isBlogPost && (
+        <>
+          <BackButton onClick={() => setShowBlogMenu(false)}>
+            Go to Article →
+          </BackButton>
+          <MenuDivider />
+        </>
+      )}
+
       <MenuItem onClick={() => handleNavigation('/')}>Homepage</MenuItem>
 
       <MenuItem onClick={() => handleNavigation('/blog')}>Blog</MenuItem>
@@ -121,3 +196,49 @@ const MenuDivider = styled.div`
   height: 1px;
   margin: 8px 24px;
 `;
+
+const BackButton = styled.div`
+  padding: 12px 1rem;
+  font-size: 0.9rem;
+  margin: -8px;
+  font-weight: var(--ifm-button-font-weight);
+  color: var(--ifm-color-primary-text);
+  background: var(--ifm-menu-color-background-active);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const TOCSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const TOCHeader = styled.div`
+  padding: 12px 12px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--ifm-color-primary-text);
+`;
+
+const TOCContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const TOCItem = styled.div`
+  padding: ${(props) =>
+    props.level === 'h3' ? '8px 12px 8px 36px' : '10px 12px 10px 24px'};
+  font-size: ${(props) => (props.level === 'h3' ? '0.9rem' : '0.95rem')};
+  font-weight: 400;
+  color: var(--ifm-color-primary-text);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-left: ${(props) => (props.level === 'h3' ? '24px' : '0')};
+
+  &:hover {
+    background-color: var(--ifm-navbar-dropdown-hover);
+    color: var(--ifm-color-pink-200);
+  }
+`;

src/theme/Navbar/MobileSidebar/DocsMobileSidebarContent.js

@@ -1,16 +1,30 @@
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import { HeaderList } from '@site/src/config/HeaderList';
 import { useSiteBaseUrl } from '@site/src/hooks/useSiteBaseUrl';
-import React from 'react';
+import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 export default function DocsMobileSidebarContent() {
   const history = useHistory();
+  const location = useLocation();
   const baseURL = useSiteBaseUrl() || '';
   const mobileSidebar = useNavbarMobileSidebar();
   const { t } = useTranslation();
+  const [showDocsMenu, setShowDocsMenu] = useState(true);
+
+  const pathname = location?.pathname || '';
+  const isDocsRoot =
+    pathname === baseURL + '/docs' || pathname === baseURL + '/docs/';
+  const isInDocsSection =
+    pathname.startsWith(baseURL + '/docs/') && !isDocsRoot;
+
+  useEffect(() => {
+    // Reset to show custom menu when pathname changes
+    setShowDocsMenu(true);
+  }, [pathname]);
 
   const handleNavigation = (path) => {
     mobileSidebar.toggle();
@@ -21,20 +35,46 @@ export default function DocsMobileSidebarContent() {
     }
   };
 
+  // Show SecondaryMenu (documentation sidebar/TOC) if user clicked "Move to Documentation"
+  if (!showDocsMenu) {
+    return (
+      <div className='custom-docs-secondary-menu'>
+        <BackButton onClick={() => setShowDocsMenu(true)}>
+          ← Back to main menu
+        </BackButton>
+        <MenuDivider />
+        <NavbarMobileSidebarSecondaryMenu />
+      </div>
+    );
+  }
+
   return (
     <MobileMenuContainer>
+      {isInDocsSection && (
+        <>
+          <BackButton onClick={() => setShowDocsMenu(false)}>
+            Go to Documentation →
+          </BackButton>
+          <MenuDivider />
+        </>
+      )}
+
       <MenuItem onClick={() => handleNavigation('/')}>Homepage</MenuItem>
 
+      <MenuItem onClick={() => handleNavigation('/docs')}>
+        Developer Docs
+      </MenuItem>
+
       <MenuItem onClick={() => handleNavigation('/docs/chain')}>
         What is Push Chain
       </MenuItem>
 
       <MenuItem onClick={() => handleNavigation('/docs/chain/build')}>
-        Let's Build
+        Core SDK
       </MenuItem>
 
       <MenuItem onClick={() => handleNavigation('/docs/chain/ui-kit')}>
-        UI Kit
+        UI Kit SDK
       </MenuItem>
 
       <ExploreSection>
@@ -54,12 +94,6 @@ export default function DocsMobileSidebarContent() {
 
       <MenuDivider />
 
-      <MenuItem
-        onClick={() => handleNavigation('https://discord.com/invite/pushchain')}
-      >
-        Ask in Discord
-      </MenuItem>
-
       <MenuItem onClick={() => handleNavigation('https://portal.push.org/')}>
         Push Portal
       </MenuItem>
@@ -118,6 +152,19 @@ const SubMenuItem = styled.div`
   }
 `;
 
+const BackButton = styled.div`
+  padding: 12px 1rem;
+  font-size: 0.9rem;
+  margin: -8px;
+  font-weight: var(--ifm-button-font-weight);
+  color: var(--ifm-color-primary-text);
+  background: var(--ifm-menu-color-background-active);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
 const MenuDivider = styled.div`
   height: 1px;
   margin: 8px 24px;