Skip to content

feat: move right sidebar to bottom drawer on mobile#1874

Merged
JammingBen merged 2 commits intomainfrom
feat/mobile-right-sidebar-bottom-drawer
Jan 29, 2026
Merged

feat: move right sidebar to bottom drawer on mobile#1874
JammingBen merged 2 commits intomainfrom
feat/mobile-right-sidebar-bottom-drawer

Conversation

@JammingBen
Copy link
Member

@JammingBen JammingBen commented Jan 26, 2026

This involves a few notable changes:

It splits up our bottom drawer component into 2 parts:

  • OcBottomDrawer is now deprived of almost all its logic and only handles the visual representation of the drawer. This component is meant to be used from the outside (e.g. by the right sidebar).
  • OcMobileDrop contains all the logic that is heavily bound to our OcDrop component. For that reason, it is not being exposed to the outside.

Furthermore, this change refactors the panels of the SideBar component into its own component SideBarPanels. At first I thought this was necessary. It turned out that wasn't the case, but I still think it's better this way. The SideBar component now mainly handles the logic of deciding whether to display the sidebar on the right side or in a bottom drawer.

The implementation besides that it pretty straight forward, though 2 edge cases might be notable because they differ from the right sidebar behavior on the desktop view:

  • When loading the page initially, we don't want the bottom drawer to show. The new method onInitialLoad of the useSidebar composable gets called once after Web has been bootstrapped and sets the sidebar open state to false on mobile. The only exception to this is when explicitly calling for the sidebar via the details query param.
  • There are certain scenarios where we probably want to close the bottom drawer after the user took action. The implementation specifically checks if a link or an action of the sidebar action panel has been clicked and closes the drawer if so.

closes #1589

image

@JammingBen JammingBen self-assigned this Jan 26, 2026
@JammingBen JammingBen force-pushed the feat/mobile-right-sidebar-bottom-drawer branch 10 times, most recently from bee46bc to 04e4a39 Compare January 27, 2026 14:28
This involves a few notable changes:

It splits up our bottom drawer component into 2 parts:

* `OcBottomDrawer` is now deprived of almost all its logic and only handles the visual representation of the drawer. This component is meant to be used from the outside (e.g. by the right sidebar).
* `OcMobileDrop` contains all the logic that is heavily bound to our `OcDrop` component. For that reason, it is not being exposed to the outside.

Furthermore, this change refactors the panels of the `SideBar` component into its own component `SideBarPanels`. At first I thought this was necessary. It turned out that wasn't the case, but I still think it's better this way. The `SideBar` component now mainly handles the logic of deciding whether to display the sidebar on the right side or in a bottom drawer.

The implementation besides that it pretty straight forward, though 2 edge cases might be notable because they differ from the right sidebar behavior on the desktop view:

* When loading the page initially, we don't want the bottom drawer to show. The new method `onInitialLoad` of the `useSidebar` composable gets called once after Web has been bootstrapped and sets the sidebar open state to `false` for mobile.
* There are certain scenarios where we probably want to close the bottom drawer after the user took action. The implementation specifically checks if a link or an action of the sidebar action panel has been clicked and closes the drawer if so.
@JammingBen JammingBen force-pushed the feat/mobile-right-sidebar-bottom-drawer branch from 04e4a39 to a3074d6 Compare January 27, 2026 14:29
@JammingBen JammingBen marked this pull request as ready for review January 28, 2026 07:19
@JammingBen JammingBen merged commit c5240fd into main Jan 29, 2026
28 checks passed
@JammingBen JammingBen deleted the feat/mobile-right-sidebar-bottom-drawer branch January 29, 2026 09:31
@openclouders openclouders mentioned this pull request Jan 29, 2026
1 task
openclouders pushed a commit that referenced this pull request Jan 29, 2026
…bottom-drawer

feat: move right sidebar to bottom drawer on mobile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Full width "sidebar" on mobile results in really bad UX

3 participants