Skip to content

feat(app): resizable sidebar, closable from its empty area - #445

Open
slyk wants to merge 2 commits into
LaWebcapsule:mainfrom
slyk:upstream/sidebar-resize
Open

slyk wants to merge 2 commits into
LaWebcapsule:mainfrom
slyk:upstream/sidebar-resize

Conversation

@slyk

@slyk slyk commented Oct 16, 2026

Copy link
Copy Markdown
Contributor

Change description

Part of discussion #431 (items 2.0, 2.2 and 2.4). Follows #433 and #434, which are merged. With this PR both side panels behave the same way.

1. The sidebar on the right can be resized (first commit)

  • Drag its left edge: from 150px up to the room left for the page (590px stay for the content), the same limit logic as the navigation.
  • Double-click the edge to reset it to 280px. The width is remembered per browser (local storage sidebar-width), like the navigation width.
  • Dragging past the minimum toward the window edge (pointer within 48px of it) closes the sidebar to its icon rail. The width from before the drag is kept for the next open.
  • The edge uses the panel-resize-handle.vue component from feat(app): show a grip on the resizable edge of the navigation #434, so it shows the same grip and hover line as the navigation.
  • The resize logic moves out of private-view.vue into a shared use-panel-resize.ts composable that drives both panels. The navigation keeps its behaviour (snap to 220px, double-click reset, same storage key); only its minimum goes from 220px to 150px, its default stays 220px.
  • Only when the sidebar is open and docked (window wider than 1260px); below that it stays an overlay as today.

2. A click on the empty area below the sections closes the open sidebar (second commit)

  • The closed sidebar already opens on any click; this is the matching close action. Clicks inside the sections never close it.
  • A 1px line marks where the clickable area starts.
  • It is a separate commit, so it can be dropped if you prefer not to have it.

The header actions part of #431 (2.5) is a separate PR, it touches other files.

Type of change

  • Bug fix (fixes an issue)
  • New feature (adds functionality)

Related issues

Discussion #431, follows #433 and #434

Testing

  • The same code has run in our fork since 15 Oct (light and dark themes, Chrome and Firefox).
  • On current main with this PR: eslint and prettier pass, the app unit tests pass (92 files), and the app builds.

Checklists

Development

  • Lint rules pass locally
  • Application changes have been tested thoroughly
  • Automated tests covering modified code pass

Security

  • Security impact of change has been considered: none, UI only.
  • Code follows company security practices and guidelines

Network

  • Changes to network configurations have been reviewed (not applicable)
  • Any newly exposed public endpoints or data have gone through security review (not applicable)

Code review

  • Pull request has a descriptive title and context useful to a reviewer. Screenshots or screencasts are attached as
    necessary
  • reviewers assigned
  • Pull request linked to task tracker where applicable

slyk added 2 commits October 16, 2026 22:25
Signed-off-by: Kyrylo Kuzmytskyi <slykirill@gmail.com>
Signed-off-by: Kyrylo Kuzmytskyi <slykirill@gmail.com>
slyk added a commit to slyk/d9 that referenced this pull request Oct 16, 2026
…Webcapsule#433/LaWebcapsule#434 merged, LaWebcapsule#445-LaWebcapsule#447 opened (fork only)

Signed-off-by: Kyrylo Kuzmytskyi <slykirill@gmail.com>
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.

1 participant