feat: move right sidebar to bottom drawer on mobile#1874
Merged
JammingBen merged 2 commits intomainfrom Jan 29, 2026
Merged
Conversation
bee46bc to
04e4a39
Compare
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.
04e4a39 to
a3074d6
Compare
kulmann
approved these changes
Jan 28, 2026
AlexAndBear
approved these changes
Jan 29, 2026
openclouders
pushed a commit
that referenced
this pull request
Jan 29, 2026
…bottom-drawer feat: move right sidebar to bottom drawer on mobile
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This involves a few notable changes:
It splits up our bottom drawer component into 2 parts:
OcBottomDraweris 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).OcMobileDropcontains all the logic that is heavily bound to ourOcDropcomponent. For that reason, it is not being exposed to the outside.Furthermore, this change refactors the panels of the
SideBarcomponent into its own componentSideBarPanels. At first I thought this was necessary. It turned out that wasn't the case, but I still think it's better this way. TheSideBarcomponent 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:
onInitialLoadof theuseSidebarcomposable gets called once after Web has been bootstrapped and sets the sidebar open state tofalseon mobile. The only exception to this is when explicitly calling for the sidebar via thedetailsquery param.closes #1589