How to prevent Notion's sidebar from automatically showing up in a custom Fluid App script?

Other Questions Notion
1

Hey everyone! I’m new to JavaScript and I’m trying to figure out how to stop Notion’s sidebar from popping up when my mouse goes to the left side of the screen. It’s driving me crazy!

I heard that I could use Fluid App to add custom scripts, but I’m lost on how to actually stop the mouseover events. I think I found where the event is being listened for in the code, but I’m not sure what to do next.

Has anyone done this before? Any tips on how to remove the event listener or stop the function from running? I’d really appreciate some help!

Here’s a basic example of what I’ve tried, but it’s not working:

function disableSidebar() {
  const sidebarTrigger = document.querySelector('.sidebar-trigger');
  if (sidebarTrigger) {
    sidebarTrigger.removeEventListener('mouseover', showSidebar);
  }
}

disableSidebar();

Am I on the right track? What am I missing? Thanks in advance for any advice!

2

I’ve tackled this issue before, and I can share what worked for me. Instead of trying to remove the event listener, which can be tricky if you don’t have access to the original function, you might want to try overriding the mouseover behavior entirely.

Try this approach:

document.addEventListener('DOMContentLoaded', function() {
    const style = document.createElement('style');
    style.textContent = `
        .notion-sidebar-container { display: none !important; }
        .notion-frame { margin-left: 0 !important; }
    `;
    document.head.appendChild(style);
});

This script adds CSS that hides the sidebar and adjusts the main content area. It’s a more robust solution as it doesn’t rely on finding specific elements or event listeners. Just make sure to add this to your Fluid App’s custom JavaScript. Let me know if you need any clarification on implementing this!

3

hey, i had the same problem and found a solution that worked for me. try this:

document.body.addEventListener('mousemove', function(e) {
    if (e.clientX < 20) e.stopPropagation();
}, true);

it blocks mouse events near the edge. simple but effective. lmk if it helps!

4

I’ve been using Notion with Fluid App for a while now, and I’ve encountered the same issue. While removing event listeners can work, I’ve found a more foolproof method that might help you out.

Instead of targeting the sidebar directly, try intercepting the mouse events on the entire document. Here’s a script that’s worked wonders for me:

document.addEventListener('mousemove', function(e) {
    if (e.clientX <= 10) {
        e.stopPropagation();
    }
}, true);

This basically creates a 10-pixel ‘dead zone’ on the left side of the screen. The sidebar won’t trigger because the mouseover event never reaches it. You’ll need to adjust the pixel value if you find it’s too narrow or wide for your needs.

Remember to add this to your Fluid App’s custom JavaScript. It’s been a game-changer for my workflow, eliminating those annoying accidental sidebar pop-ups. Hope this helps solve your problem!