rare-sapphire
rare-sapphire2y 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)
No description
4 Replies
kapa.ai
kapa.ai2y 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
kapa.ai2y ago
<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphireOP2y ago
This is the swizzled sider code I had, but it's minimally modified.
rare-sapphire
rare-sapphireOP2y ago