Custom Sider
I need to create a custom sider, also the default project does not contain a component for the Sider, how can i achieve that /
5 Replies
Hi @George Mohsen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can create a custom Sider in Refine by using the
render
prop of the <Sider>
component. This allows you to customize the render of the <Sider>
without needing to swizzle the whole component. Here's an example:
In this example, the render
prop is a function that receives an object with the items
, logout
, and collapsed
properties. The items
property is the list of navigation items, the logout
property is the logout button, and the collapsed
property is a boolean indicating whether the Sider is collapsed or not.
You can then use this CustomSider
in your layout:
This will replace the default Sider with your custom Sider.
For more information, you can refer to the Refine documentation on customizing the Sider (https://refine.dev/docs/advanced-tutorials/custom-layout#siderrenderfunction).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1083046721392750612> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•6mo ago
Thanks
?
How to add items ?
@kapa.ai how to add items ?
Let me check the knowledge base for you. One moment! :books:
----------------------
To add items to the Sider in Refine, you can use the
resources
property of the <Refine>
component. The <Sider>
component shows the resources whose list
property is set. So, you can have an extra navigation link by adding a resource with the list
attribute. Here's an example:
In this example, a new item named "Dashboard" with a home icon is added to the Sider. The list
property is set to "/", which means this item will link to the root path of your application.
For more information, you can refer to the Refine documentation on adding items to the Sider (https://refine.dev/docs/guides-concepts/faq#how-can-i-add-an-item-to-the-sider-component).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1083046721392750612> kapa.ai is still learning and improving, please let us know how it did by reacting below