[FR] Vertically Aligned Panes

[girisumit]

The current layout is good for really wide or large monitors. On laptop, it can be challenging to utliise it without eventually collapsing the sidebar. Personally speaking, I don't use notebook navigator for this very reason (lost real estate on screen, screen feeling crowded, the side pane has to be wide which is okay if you only have Notebook navigator on the sidebar but most people tend to have more than one plugin in their sidebars).

I am requesting a feature where the two panes in the Notebook Navigator are decoupled (opt-in for users via settings). The folder pane and the subdirectory pages panes would be two different sidebar pages such that I can drag the subdirectory pages pane out and put it below the folders pane on the sidebar, stacked on top of each other. Clicking on the folder pane above would follow the current behaviour of opening the pages contained within in the other pane. Thanks!

This FR is similar to what File Tree Alternative View plugin has under the Evernote setting.

[johansan]

Thanks. I will look into it but I think it is complex and difficult. But I could be wrong. In the mean time try the single pane mode, I use this on my mobile and my laptop and I think it's great. But I will add this suggestion to my backlog.

[iomid]

@johansan

What about an auto-hide option? is there a chance this feature might be added to the plugin?
Because I have exactly the same problem: when the right sidebar is expanded there’s very little space left for writing when using dual-pane.

One solution could be an auto-hide option, so that when the editor is active only the folders are shown, and then by clicking on a folder the list of files would appear.

Notebook.Navigator.mp4

I hope this feature gets added to this great plugin, but until then I tried to solve the issue with a simple script and some DOM modifications.

let modLeftSplit;
let nnNavigationPan;

function resizeSidebar(width, sidebarSelector) {
    const pane = document.querySelector(sidebarSelector);
    if (!pane) return false;
    pane.style.width = typeof width === 'number' ? `${width}px` : width;
    return true;
}

function getWidth() {
    const left = document.querySelector('.mod-left-split');
    const nav = document.querySelector('.nn-navigation-pane');

    const leftWidth = left ? left.getBoundingClientRect().width : null;
    const navWidth = nav ? nav.getBoundingClientRect().width : null;

    if (!leftWidth || !navWidth || leftWidth === navWidth) return;

    modLeftSplit = leftWidth;
    nnNavigationPan = navWidth;
}

getWidth();

document.addEventListener("click", (ev) => {
    if (ev.target.closest(".mod-root")) {
        getWidth();
        resizeSidebar(nnNavigationPan, ".mod-left-split");
    }

    if (ev.target.closest(".mod-left-split") || ev.target.closest(".nn-navitem-content")) {
        getWidth();
        resizeSidebar(nnNavigationPan, ".nn-navigation-pane");
        resizeSidebar(modLeftSplit, ".mod-left-split");
    }
}, true);

[johansan]

What about an auto-hide option? is there a chance this feature might be added to the plugin? Because I have exactly the same problem: when the right sidebar is expanded there’s very little space left for writing when using dual-pane.

Did you try single pane mode? This is very close to auto hide.

[iomid]

Did you try single pane mode? This is very close to auto hide.

Yes, I’ve tried it. The single pane mode is good, but with auto-hide there would be fewer clicks required, making it quicker to switch between notes.

[johansan]

I love your implementation you did for auto hide. 👍

I've addeed it to my backlog at the Wiki. I might add it, but not short-term.