How can I use a pop-up on the side bar?

[green-study]

I want to make a pop-up on the navbar(pc ver) and sidebar(mobile ver).
But, It only works on the navbar.
Is there any way to make it possible on the sidebar?

-- source code (docusaurus.config.js navbar) --

-- navbar --

After click the "Go to Lesssons" button

Pop-up appear

-- sidebar --

Pressing the "Go to Lessons" button does not bring up the pop-up.
When the button is pressed, "Clicked" message is displayed in the console, but the console message does not appear.
The button does not function normally.
I've also used the <button> tag instead of <a>.

[Advait251206]

The issue you are experiencing happens because of how Docusaurus structures its responsive navigation behind the scenes. There are two main technical reasons your current approach fails on the mobile sidebar:

1. Duplicate HTML IDs: Docusaurus renders both the desktop navbar and the mobile sidebar in the DOM simultaneously (it just hides one using CSS depending on your screen size). Because you injected raw HTML with specific IDs (id="popupBtn", id="modalWrap"), you created duplicate IDs in your document. JavaScript typically only interacts with the first instance of an ID it finds, which is the desktop version. This is why your click registers in the console, but targets the wrong hidden element.
2. CSS Stacking Contexts: Nesting a pop-up/modal deeply inside the mobile sidebar DOM is problematic. The mobile sidebar (.navbar-sidebar) uses CSS properties like transform and overflow: hidden for its sliding animation. These properties act as "traps" for position: fixed elements, causing your modal to be clipped or hidden behind the sidebar canvas even if the click successfully triggered it.

The Solution: Create a Custom React Component

Injecting massive strings of raw, complex HTML into docusaurus.config.js is generally discouraged. The recommended "Docusaurus way" is to create a custom Navbar item. This keeps your config clean and lets React handle the modal properly without duplicate ID conflicts.

Here is how to do it:

Step 1: Create a custom component for your button and modal
Create a new file in your project at src/components/CustomModalItem.js (or .tsx).

// src/components/CustomModalItem.js
import React, { useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';

export default function CustomModalItem() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <BrowserOnly>
      {() => (
        <>
          {/* The Nav Button */}
          <a 
            className="navbar__item navbar__link" 
            style={{ cursor: 'pointer' }} 
            onClick={() => setIsOpen(true)}
          >
            Go to Lessons
          </a>
          
          {/* The Modal */}
          {isOpen && (
            <div className="custom-modal-backdrop" style={backdropStyle}>
              <div className="custom-modal-content" style={modalStyle}>
                <p>You are about to leave this site.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                  <button onClick={() => setIsOpen(false)}>Stay on this site</button>
                  <button onClick={() => window.location.href = 'YOUR_EXTERNAL_URL'}>
                    Continue to external site
                  </button>
                </div>
              </div>
            </div>
          )}
        </>
      )}
    </BrowserOnly>
  );
}

// Basic inline styles for the example (better to move these to custom.css)
const backdropStyle = {
  position: 'fixed',
  top: 0, left: 0, right: 0, bottom: 0,
  backgroundColor: 'rgba(0,0,0,0.5)',
  zIndex: 99999, // Extremely high to escape mobile sidebar context
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
};

const modalStyle = {
  backgroundColor: '#fff',
  padding: '20px',
  borderRadius: '8px',
  color: '#000'
};

Step 2: Register the custom item in Docusaurus via Swizzling
You need to tell Docusaurus to accept your new component as a valid navbar item. Run this command in your terminal:

npm run swizzle @docusaurus/theme-classic NavbarItem/ComponentTypes -- --wrap

Then, edit the newly generated file at src/theme/NavbarItem/ComponentTypes.js:

import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
import CustomModalItem from '@site/src/components/CustomModalItem';

export default {
  ...ComponentTypes,
  'custom-modal': CustomModalItem,
};

Step 3: Update your Config
Finally, clean up your docusaurus.config.js. Replace that entire html object with your newly defined custom type:

items: [
  // ... your other items (dropdown, search, etc.)
  {
    type: 'custom-modal',
    position: 'right',
  },
]

By doing this, React will manage the state independently for the desktop and mobile versions, eliminating the duplicate ID bug and ensuring the modal renders safely!

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206