NR5: add sidebar panel controls

Core Development Feature Requests
1

Hi There,

following up from this comment wanting an 'X' on the sidebar panels:

Screen Recording 2026-07-28 at 20.22.55

Besides the 'X' for close, what I really wanted is a way to navigate the different panels without moving the mouse all the way to the bottom right. So I also added the '<' and '>' buttons.

It seems that these things are coming up since there is already a "tools" div in the panel header. I use that div to add these buttons.

If you want this now, the execute the following in the browser console:

(function(){

    let controls = "<button class='red-ui-button back-btn'>&lt;</button>&nbsp;<button class='red-ui-button cls-btn'>X</button>&nbsp;<button class='red-ui-button forw-btn'>&gt;</button>"

    // add the controls
    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').html(controls)
    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').html(controls)
    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').html(controls)
    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').html(controls)

    let closeFunct = (btngrp) => {
        $(btngrp).find('.selected').trigger('click')
    }

    // activate the close button
    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').find('.cls-btn').on('click', () => {
        closeFunct($('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[0])
    })

    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').find('.cls-btn').on('click', () => {
        closeFunct($('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[1])
    })

    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').find('.cls-btn').on('click', () => {
        closeFunct($('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[2])
    })

    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').find('.cls-btn').on('click', () => {
        closeFunct($('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[3])
    })

    // forward button
    // functionality
    let nextFunct = (btngrp) => {
        let nxt = $($(btngrp).find('.selected')).next()
        if (nxt.length > 0) {
            $(nxt).trigger('click')
        } else {
            $($(btngrp).find("button").get()[0]).trigger('click')
        }
    }

    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').find('.forw-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[0]
        nextFunct(btngrp)
    })

    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').find('.forw-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[1]
        nextFunct(btngrp)
    })


    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').find('.forw-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[2]
        nextFunct(btngrp)
    })

    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').find('.forw-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[3]
        nextFunct(btngrp)
    })

    // previous button
    // functionality
    let prevFunct = (btngrp) => {
        let prev = $($(btngrp).find('.selected')).prev()
        if (prev.length > 0) {
            $(prev).trigger('click')
        } else {
            $($(btngrp).find("button").get().reverse()[0]).trigger('click')
        }
    }

    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').find('.back-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[0]
        prevFunct(btngrp)
    })

    $('#red-ui-sidebar-left').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').find('.back-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[1]
        prevFunct(btngrp)
    })

    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-top').find('.red-ui-sidebar-banner-tools').find('.back-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[2]
        prevFunct(btngrp)
    })

    $('#red-ui-sidebar-container').find('.red-ui-sidebar-section-bottom').find('.red-ui-sidebar-banner-tools').find('.back-btn').on('click', () => {
        let btngrp = $('#red-ui-workspace-footer').find(".red-ui-sidebar-tab-bar").find(".button-group")[3]
        prevFunct(btngrp)
    })

})();

the code isn't particular good but it does the job and provides something I've been missing since I upgraded to NRv5.

2

I'd love this or something like it to be implemented. :smiley:

3

That looks excellent @gregorius, once again you are ahead of the pack.

Is there a PR for this tweek?

4

I can add one but I suspect that @knolleary is aleady working on something since there is a red-ui-sidebar-banner-tools div on the panels - so I don't want put up something that should be done differently.

The button group at the bottom needs some kind of id so that there is a connection between the panel and the buttons (atm, I'm assuming specific index values 0,1,2,... which isn't optimal!)

5

If I could make a suggestion, move the arrows so that they are next to each other and the X a little extra space right:

< > X

Just so that a miss click doesn't close the window as you are moving the mouse over the close button every time :slight_smile:

6

One of the many internal iterations I went through had controls like this. At the time, we were still figuring out the functionality of the tab bars etc, and it felt overloaded to have many ways of doing the same thing.

With some time and experience of the new UI behind us, I'm tended to agree that having some controls in the header is helpful.

Having a close button feels sensible to me. I'm less sure on the arrows to scroll through the tabs - would want to think on that a bit.

The other option I had played with was having a drop-down menu to pick the sidebar panel from a list; rationale being the current UX requires you to know the tabs by icon. Having a menu of sidebar names is more discoverable.

7

Damn. I was thinking "never did that, can't happen" then tried it and yes, it happened but only because you put the idea that it could happen in my mind! Damn. :wink:

It's easily fixed, swap this line:

    let controls = "<button class='red-ui-button back-btn'>&lt;</button>&nbsp;<button class='red-ui-button cls-btn'>X</button>&nbsp;<button class='red-ui-button forw-btn'>&gt;</button>"

with

    let controls = "<button class='red-ui-button back-btn'>&lt;</button>&nbsp;<button class='red-ui-button forw-btn'>&gt;</button>&nbsp;&nbsp;<button class='red-ui-button cls-btn'>X</button>"

and done. (But no one should be using &nbsp; in 2026!)

EDIT:

I've packed this into the presenter mode package for easy installation. The Presenter Mode part does not make any visual changes so it's safe to include.

8

Discovered that for the right side, it's quicker to click 'X' twice instead of moving the mouse down to the "hide right side bar" button - so alone for that, it's useful.

Screen Recording 2026-07-29 at 12.16.56

9

The left/right arrows would currently be less useful since we cannot currently easily re-order the panel list. If you are working on this part Nick, could we please get the ability to drag to re-organise back? Even with a menu, having the panels in an order that makes sense to the Editor user rather than the somewhat "random" order you get by default (especially if adding panels from plugins or nodes) would be very useful.

10

To be clear, I'm not currently working on anything in this area.