Source code for the default antd sider

Can I see the source code for the default ant sider used in refine 4

2 Replies

Hi @ahnaf. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, the sidebar section is rendered using the <ThemedSiderV2> component by default. This component is designed to generate menu items based on the resources defined in <Refine> components, using the useMenu hook. You can find the source code for the <ThemedSiderV2> component in the Refine GitHub repository at the following link: <ThemedSiderV2> Source Code (https://github.com/refinedev/refine/blob/master/packages/antd/src/components/themedLayoutV2/sider/index.tsx) If you want to replace the default <ThemedSiderV2> component, you can pass a custom component to the Sider prop. Here's an example:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { CustomSider } from "./CustomSider";  

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => <CustomSider />}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2 } from "@refinedev/antd";  
import { CustomSider } from "./CustomSider";  

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => <CustomSider />}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

You can also customize the default <ThemedSiderV2> component either by using its props or with the swizzle feature. Here's an example of how to customize it using the render and Title prop:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
import { CustomTitle } from "./CustomTitle";  

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => (  
 <ThemedSiderV2  
 Title={({ collapsed }) => <CustomTitle collapsed={collapsed} />}  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
import { CustomTitle } from "./CustomTitle";  

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => (  
 <ThemedSiderV2  
 Title={({ collapsed }) => <CustomTitle collapsed={collapsed} />}  
 render={({ items, logout, collapsed }) => {  
 return (  
 <>  
 <div>My Custom Element</div>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout#sider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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