[bug]: `Sidebar` isn't opening within div it is placed in

[JolomiTee]

Description

Firstly, i would like to apologize for the amount of pictures.. please continue..

The sidebar component works well so far, but I have a specific use case where the sidebar should not open from the very edge of the screen but rather after the first element that is already there acting as a sidebar. Take the below UI redesign of the Discord Application; the space that carries the 'Messages' and 'Friends' Tab Switcher component (implemented with shadcn-ui, btw) is the component I want to put within the sidebar. The problem I seem to have is that the sidebar still behaves like a sheet in the sense that it defaults to opening from the edges of the screen, not from within the div in which the Sidebar component is placed.

Now I tried to explore if it's actually a bug but my methods were rather crude, but I can clearly describe my issues with the following images

Firstly, notice the two column layout I tried to achieve in the chat area, the button that opens the sidebar is at an initial position, then when it is open, the button moves, but the sidebar appears from the side.

Affected component/components

Sidebar

How to reproduce

1. create a three column layout with flexbox:

   
   <div className="flex relative w-screen h-screen">
   <div className="w-1/3"></div>
   <div className="w-full">
     # place the sidebar component here
   </div>
   <div className="w-1/3"></div>
   </div>

### Codesandbox/StackBlitz link

_No response_

### Logs

_No response_

### System Info

```bash
OS: Linux Mint
Browser: Microsoft Edge
Code Editor: VSCode

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[JolomiTee]

The only way I've seen to achieve close to what I need is using the collapsible prop, which restricts the sidebar to the expected div, but then it makes it... well, not collapsible. <Sidebar collapsible="none">

[JolomiTee]

I found a way to achieve what I want..

First, I added a 'relative' class to the className of the div that isn't in a mobile or collapsed state (the last return statement of the Sidebar component in the sidebar.tsx file).

Then I replaced the 'fixed' classname of the second child div in the div mentioned above, with an 'absolute'

The code(stripped down):

The result: (Closed State)

(Open State)