continuing-cyan•5mo ago

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

kapa.ai•5mo ago

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:

import { Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};

import { Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};

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:

import { Layout } from "@refinedev/antd";  

const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout } from "@refinedev/antd";  

const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</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: ----------------------

kapa.ai•5mo ago

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

continuing-cyan•5mo ago

Thanks ? How to add items ? @kapa.ai how to add items ?

kapa.ai•5mo ago

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:

import { Refine } from "@refinedev/core";  
  
<Refine  
 ...  
 resources={[  
 {  
 name: "dashboard",  
 list: "/",  
 meta: {  
 label: "Dashboard",  
 icon: "🏠",  
 },  
 },  
 ]}  
/>;

import { Refine } from "@refinedev/core";  
  
<Refine  
 ...  
 resources={[  
 {  
 name: "dashboard",  
 list: "/",  
 meta: {  
 label: "Dashboard",  
 icon: "🏠",  
 },  
 },  
 ]}  
/>;

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: ----------------------

kapa.ai•5mo ago

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