other-emerald•9mo ago

iam using latest @refinedev/core refineapp and iam not sure how can i edit the sider

I created the refine project using npm create refine-app@latest and i wanted to edit sider and add more buttons there before logout but i dont see any layout page under components

3 Replies

kapa.ai•9mo ago

Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In a Refine project, the Sider component is not directly available in the components folder. It's part of the UI package you've selected and is used by default. However, you can customize it using several methods: 1. Using the resources property on 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 is 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: "🏠",  
 },  
 },  
 ]}  
/>;

Source (https://refine.dev/docs/faq/#how-can-i-add-an-item-to-the-sider-component) 2. Using the render property of the <Sider> component: The render property is a function that receives an object with the items and logout properties. The items property is the list of navigation items and the logout property is the logout button. Here is an example:

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

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="<https://refine.dev/">👋> Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

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

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

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="<https://refine.dev/">👋> Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

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

Source (https://refine.dev/docs/faq/#how-can-i-add-an-item-to-the-sider-component) 3. Using the swizzle command: You can use the command to copy the default Sider component to your project. This will allow you to customize the sider as you want. You can refer to the swizzle documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle) for more information. 4. Creating your own Sider Menu with refine: You can customize the default refine Sider Menu. Here is an example of how to do it:

npm create refine-app@latest -- --example customization-sider

npm create refine-app@latest -- --example customization-sider

Source (https://refine.dev/docs/examples/customization/customSider/) Remember, the meta.parent you give in the resource objects must be strictly equal to the resource name you want to group under. This gives you more control over the side menu and allows you to customize it to better suit your needs. Source (https://refine.dev/docs/advanced-tutorials/multi-level-menu/) Please note that the Sider property is deprecated and only works with the legacy routing system and the Layout prop. You should pass the Sider property to the Layout component when using the new routing system. Source (https://refine.dev/docs/api-reference/core/components/refine-config/#sider) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

other-emerald•9mo ago

ammazingly helpful how do i swizzle properly for my project