ART-7: Collapse and expand sidebar in the desktop version

docusaurus.config.js

@@ -55,6 +55,10 @@ const config = {
     { src: "/js/gtag.js", async: true },
   ],
 
+  plugins: [
+    require.resolve('./plugins/sidebarButton'),
+  ],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({

package.json

@@ -14,8 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "3.5.2",
-    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/core": "^3.6.1",
+    "@docusaurus/preset-classic": "^3.6.1",
     "@docusaurus/theme-search-algolia": "3.5.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",

plugins/sidebarButton/client.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import SidebarButton from '../../src/components/SidebarButton'; 
+
+function renderButtonComponent() {
+  const sidebarNavElement = document.querySelector('nav.sidebar_re4s');
+
+  if (sidebarNavElement) {
+    let buttonContainer = sidebarNavElement.querySelector('#sidebar-button-container');
+
+    if (!buttonContainer) {
+      buttonContainer = document.createElement('div');
+      buttonContainer.id = 'sidebar-button-container'; 
+
+      sidebarNavElement.appendChild(buttonContainer);
+    }
+
+    if (!buttonContainer.hasChildNodes()) {
+      const root = createRoot(buttonContainer);
+      root.render(<SidebarButton />);
+    }
+
+    buttonContainer.style.position = 'sticky';
+    buttonContainer.style.bottom = '0';   
+    buttonContainer.style.width = '100%'; 
+    buttonContainer.style.left = '0';     
+    buttonContainer.style.textAlign = 'center'; 
+    buttonContainer.style.maxHeight = `calc(100vh - (var(--ifm-navbar-height) + 2rem))`;
+  }
+}
+
+function handleResize() {
+  const sidebarNavElement = document.querySelector('nav.sidebar_re4s');
+  const buttonContainer = sidebarNavElement?.querySelector('#sidebar-button-container');
+
+  if (buttonContainer) {
+    buttonContainer.remove();
+  }
+
+  renderButtonComponent();
+}
+
+window.addEventListener('resize', handleResize);
+
+export function onRouteDidUpdate() {
+  setTimeout(renderButtonComponent, 0); 
+}

plugins/sidebarButton/index.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = function () {
+  return {
+    name: 'sidebar-button',
+    getClientModules() {
+      return [path.resolve(__dirname, './client')];
+    },
+  };
+};

src/components/sidebarButton.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+const SidebarButton = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const toggleNav = () => {
+    setIsOpen(!isOpen);
+
+    const sidebarNav = document.querySelector('nav.sidebar_re4s');
+    const aside = document.querySelector('aside');
+    const svgB = document.querySelector('#svg-button');
+    const sidebarNavWidth = parseInt(getComputedStyle(aside).width, 10) - 32;
+    const sidebarNavHeight = getComputedStyle(aside).height;
+    const navButton = document.querySelector('#sidebar-button-container button');
+    const navButtonContainer = document.querySelector('#sidebar-button-container');
+    if (aside && sidebarNav && navButtonContainer) {
+      sidebarNav.style.transition = 'width 0.3s ease';
+      sidebarNav.style.width = isOpen ? '70px' : `${sidebarNavWidth}px`;
+      aside.style.visibility = isOpen ? 'hidden' : 'visible';
+      navButton.style.visibility = 'visible';
+      svgB.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+      navButtonContainer.style.height = isOpen ? sidebarNavHeight : '50px';
+    }
+  };
+
+  return (
+    <button
+      style={{
+        padding: '10px 20px',
+        backgroundColor: '#1b1b1d',
+        border: '1px solid rgba(255, 210, 0, 1)',
+        cursor: 'pointer',
+        fontSize: '16px',
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+      }}
+      onClick={toggleNav}
+    >
+      <svg id="svg-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style={{fill: 'rgba(255, 210, 0, 1)'}}><path d="m8.121 12 4.94-4.939-2.122-2.122L3.879 12l7.06 7.061 2.122-2.122z"></path><path d="M17.939 4.939 10.879 12l7.06 7.061 2.122-2.122L15.121 12l4.94-4.939z"></path></svg>
+
+    </button>
+  );
+};
+
+export default SidebarButton;