[FEAT] ThemedSiderV2 Persist Collapsed State

[aress31]

Is your feature request related to a problem? Please describe.

Would be nice to persist out of the box the collapsed state, or add an option to do so, maybe a "peristCollapsed" boolean. This would avoid having to write extra code for this important UX feature.

Describe alternatives you've considered

No response

Additional context

No response

Describe the thing to improve

See above.

[BatuhanW]

@aress31 thanks for the issue. We've discussed this one and decided to accept onSiderCollapsed function to ThemedLayoutV2 component.

Then onSiderCollapsed will be passed to ThemedLayoutContextProvider

Here, we should replace existing setSiderCollapsed with a wrapper, where we call setSiderCollapsed state action and also onSiderCollapsed coming from user.

Here is a pseudo implementation:

This will allow users to persist their collapsed state into localstorage in onSiderCollapsed method. And then users can read this from localStorage and pass initial value initialSiderCollapsed from here.

We need to do these changes in ThemedLayoutV2 component for

• Ant Design
• Material UI
• Mantine
• Chakra UI

They all have almost exact same code, so it should be straightforward to implement.

We are open to contributions for this one.

[wannabecsguy2]

Hey @BatuhanW, can I work on this?

[OmkarBansod02]

Hey @BatuhanW, I am up for this.

[BatuhanW]

@wannabecsguy2 Assigning issue to you since you were first to ask 🚀

@OmkarBansod02 If we don't hear back from @wannabecsguy2 you can take this next. We also have other issues that you may want to work on, you can check up for grabs labelled issues ❤️

[OmkarBansod02]

hey @BatuhanW it's been a while. can you assign me this issue so i can make PR .

[OmkarBansod02]

hey @BatuhanW I'm getting a TypeScript error: Property onSiderCollapsed does not exist on type RefineThemedLayoutV2Props. while implementing it in ThemedLayoutV2 Even though I've declared onSiderCollapsed?: (collapsed: boolean) => void; in the RefineThemedLayoutV2Props interface, the error still persists.

[BatuhanW]

@OmkarBansod02 assigned issue to you. It seems like it should work, you can restart TS server.

[OmkarBansod02]

@BatuhanW, Still getting same error even after restarting TS server. i am adding code snippets below kindly check am i on right path .

1. File : E:\Refinedev\refine\packages\ui-types\src\types\layout.tsx

2. File: E:\Refinedev\refine\packages\mui\src\components\themedLayoutV2\index.tsx (in which getting Error )

[BatuhanW]

@OmkarBansod02 ui-types is a separate package. So you need to build it for other packages to see its types.

You can run pnpm build --scope @refinedev/ui-types

[OmkarBansod02]

Thanks for help @BatuhanW , I have made a PR kindly review it and let me know for any improvement.