Right Sidebar not work :(

[7Codez]

Why Right Sidebar not work?

[merlinuwe]

I can confirm that on Windows 10 with the latest Obsidian 1.3.4.

[weicun581]

me neither, can't work on win 10 obsidian v 1.3.5

[gchoong]

Bumping as well. I click on the right sidebar button and then it blinks in and then out

[liam-ng]

Same issue here, Windows 10 with Obsidian 1.3.5

[Lin-Ye-Ye]

Same issue here, Windows 11 with Obsidian

[guihasparyk]

Same issue here. Windows 10 with Obsidian v1.4.13

[N3C2L]

You can write the following in your custom.css snippet in the obsidian settings. This will autohide and reveal the right sidebar on hover.

/ hide right sidebar / .workspace-split.mod-horizontal.mod-right-split { width: 1px !important; transition: 0s; transition-delay: 50ms; }

/ reveal right sidebar on hover / .workspace-split.mod-horizontal.mod-right-split:hover { width: 450px !important; transition: 0s; }

Don't forget to disable the right sidebar hover in the settings of the installed plugin.

[Arc13Tangent]

If you want the original animation in the plugin while fixing the right sidebar, replace the main.js line56 this.setEvents = () => {...} with the following:

this.setEvents = () => {
    const triggerAreaWidth = 20; // Width of the trigger area in pixels
    const expandedWidth = 261.5; // Fixed width to keep sidebar expanded

    // Listen for the mousemove event on the document
    this.registerDomEvent(document, 'mousemove', (event) => {
        const mouseX = event.clientX; // Get the mouse X coordinate
        const windowWidth = window.innerWidth; // Get the window width

        // Check if the mouse is within the trigger area on the right edge
        if (mouseX >= windowWidth - triggerAreaWidth) {
            if (!this.settings.rightPin) {
                this.expandSidebar(this.rightSidebar, expandedWidth);
            }
        }
    });

    // Handle sidebar collapse on mouse leave
    this.registerDomEvent(document, 'mouseleave', () => {
        this.collapseSidebar(this.leftSidebar);
        this.collapseSidebar(this.rightSidebar);
    });

    // Handle other events
    this.registerDomEvent(this.app.workspace.rootSplit.containerEl, 'mouseenter', () => {
        this.collapseSidebar(this.leftSidebar);
        this.collapseSidebar(this.rightSidebar);
    });
    this.registerDomEvent(this.leftRibbon, 'mouseenter', () => {
        if (!this.settings.leftPin) {
            this.expandSidebar(this.leftSidebar);
        }
    });
    this.registerDomEvent(this.rightRibbon, 'mouseenter', () => {
        if (!this.settings.rightPin) {
            this.expandSidebar(this.rightSidebar, expandedWidth);
        }
    });
    this.registerDomEvent(this.app.workspace.leftSplit.resizeHandleEl, 'mouseenter', () => {
        if (!this.settings.leftPin) {
            this.expandSidebar(this.leftSidebar);
        }
        this.settings.leftSidebarWidth = Number(this.app.workspace.leftSplit.size);
        this.saveSettings();
    });
    this.registerDomEvent(this.app.workspace.rightSplit.resizeHandleEl, 'mouseenter', () => {
        if (!this.settings.rightPin) {
            this.expandSidebar(this.rightSidebar, expandedWidth);
        }
        this.settings.rightSidebarWidth = Number(this.app.workspace.rightSplit.size);
        this.saveSettings();
    });
    this.registerDomEvent(this.leftRibbon, 'dblclick', () => {
        if (this.settings.leftSideEnabled) {
            this.settings.leftPin = !this.settings.leftPin;
            this.saveSettings();
        }
    });
    this.registerDomEvent(this.rightRibbon, 'dblclick', () => {
        if (this.settings.rightSideEnabled) {
            this.settings.rightPin = !this.settings.rightPin;
            this.saveSettings();
        }
    });
};

// Modify the expandSidebar method to accept a fixed width
this.expandSidebar = (sidebar, width) => {
    if (sidebar == this.leftSidebar && this.settings.leftSideEnabled) {
        this.app.workspace.leftSplit.setSize(width);
        this.app.workspace.leftSplit.expand();
    }
    if (sidebar == this.rightSidebar && this.settings.rightSideEnabled) {
        this.app.workspace.rightSplit.setSize(width);
        this.app.workspace.rightSplit.expand();
    }
};

Explanation triggerAreaWidth: Defines the width of the trigger area (20 pixels in this case). mousemove Event: Checks if the cursor is within the trigger area near the right edge of the window. If it is, the right sidebar expands. If not, the sidebar collapses. You can adjust the triggerAreaWidth value to set the desired width of the trigger area. This approach ensures that the right sidebar only expands when the cursor is near the edge of the screen, providing a user-friendly interface.

ChatGPT generates the code and instruction, and all works well 🤣

[slartybartfastest]

Arc13Tangent - I don't know where to put your suggested code. I don't fine a setEvents command in either the main.js or the main.ts files and I can't figure out where your code should go. Could you explain it as to the code as it sits now? (Presuming it has changed since your suggestion and the present state of the code.)