Rework sidebars to be draggable by knolleary · Pull Request #5618 · node-red/node-red · GitHub
Skip to content

Rework sidebars to be draggable#5618

Merged
knolleary merged 7 commits intodevfrom
sidebar-dnd
Apr 13, 2026
Merged

Rework sidebars to be draggable#5618
knolleary merged 7 commits intodevfrom
sidebar-dnd

Conversation

@knolleary
Copy link
Copy Markdown
Member

@knolleary knolleary commented Apr 9, 2026

Fixes #5604

This changes the sidebar UX to support drag and drop positioning.

  • Sidebar tab buttons are now all located in bottom right
  • Sidebar panels have a small header - easier to identify which panel is which
  • Panels can be dragged between the left/right top/bottom sidebar positions

The following items are knowingly broken in this branch currently:

  • Saving/restoring sidebar panel state - currently disabled whilst doing this rework. Need to revisit the format of the data.
  • Collapsing sidebar tab buttons to a menu on narrow screens

@knolleary
Copy link
Copy Markdown
Member Author

Copy link
Copy Markdown
Contributor

@n-lark n-lark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great foundation here! The drag-and-drop approach for moving panels directly is a much more intuitive direction than the previous button-dragging UX and the split sidenav is really nice.

One thing I noticed was once you've reduced a sidebar to a single panel, it's not obvious how to bring a second one back. Clicking a tab button in the status bar doesn't behave quite as I would expect in that state. I think this is something I could explore with #5621 UX: Fix styling of dragging sidebar panels to make it more clear to the user how to guide the setup.

Comment thread packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js Outdated
Comment thread packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
@knolleary knolleary linked an issue Apr 13, 2026 that may be closed by this pull request
@knolleary knolleary requested a review from n-lark April 13, 2026 09:49
@knolleary
Copy link
Copy Markdown
Member Author

Comment thread packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
@knolleary knolleary merged commit 29aec30 into dev Apr 13, 2026
5 checks passed
@knolleary knolleary deleted the sidebar-dnd branch April 13, 2026 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UX: Restore ability to reorder tab buttons by drag/n/drop

2 participants