helpful-purple•13mo ago

Customize sider with ant design

Default for access control of sider is action "list". I have a resource name "order" and i assign access control for CRUD. But i want to move order create button to sider below Menu.Item. For example, on sider have an Item named Order Manage which is represented for list order, I want to add below that Item is Create Order Item. Is there solution for this

4 Replies

kapa.ai•13mo ago

Hi @nghiatieu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the Sider component in refine to add a "Create Order" item. Here's how you can do it: First, you need to create a custom Sider component. You can use the render property of the <Sider> component to customize its content. 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's an example of how you can do it:

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 {items}  
 <a href="/orders/create">Create Order</a>  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 {items}  
 <a href="/orders/create">Create Order</a>  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

In this example, a new navigation link "Create Order" is added to the Sider. When clicked, it will redirect to the create page of the "orders" resource. Please note that this is a simple example and you might need to adjust it according to your needs. For instance, you might want to style the new navigation link to make it look like the other items, or add some logic to only show it to certain users. For more information, you can refer to the FAQ section of the refine documentation (https://refine.dev/docs/faq) where this is explained in more detail. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

Omer•13mo ago

Hey @nghiatieu , You can use swizzle command of refine CLI ⚡️ https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#usage-1

| refine

component from refine, defines the overall structure and layout of a web page.

Omer•13mo ago

Or If you think it's a generic use-case you can create a feature request on GitHub 👀