genetic-orange•13mo ago

[Bug?] Collapsed Layout Sider - Popup Stays Open on Page Load

I've set my sider to collapsed as default. However, for some reason, if you hard reload onto a page, the popup containing whichever page youre on is opened. I modified Antd's example and couldnt replicate the bug, which makes me think it might be on Refine's side? I don't know if I'm maybe overlooking something, though. (https://codepen.io/Avangeous/pen/NWEOpJX?editors=001)

4 Replies

kapa.ai•13mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it's not entirely clear what might be causing the issue you're experiencing. However, I can provide some general guidance on how the Sider component works in Refine. In Refine, the Sider component's initial collapsed state can be set using the initialSiderCollapsed prop. If you set initialSiderCollapsed={true}, the Sider component will be collapsed by default. Here's an example:

<ThemedLayoutV2  
 initialSiderCollapsed={true}  
>  
 {/* ... */}  
</ThemedLayoutV2>

<ThemedLayoutV2  
 initialSiderCollapsed={true}  
>  
 {/* ... */}  
</ThemedLayoutV2>

Refine uses the Ant Design Sider component by default, and it should behave similarly to the Ant Design example you've provided. If you're experiencing different behavior, it might be due to other factors in your Refine application. If you're customizing the Sider component, make sure you're following the correct usage. For example, you can use the render prop to customize the render of the Sider without needing to swizzle the whole component. Here's an example:

<Sider  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
/>

<Sider  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
/>

If you're still experiencing issues, it might be helpful to review the relevant documentation or seek further assistance. - Refine Sider Documentation (https://refine.dev/docs/api-reference/core/components/refine-config) - Ant Design Sider Documentation (https://ant.design/components/layout/#Layout.Sider) Please note that without more specific information about your implementation and the issue you're experiencing, it's difficult to provide a more precise answer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below

genetic-orange•13mo ago

This is the swizzled sider code I had, but it's minimally modified.

genetic-orange•13mo ago

message.txt