Sider

How do i customise the sider, because i dont find the sider folder in the components Also im using refine-mui

2 Replies

Hi @Abhijeet Mourya. 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 Sider component is used from the UI package you've selected, and by default, it might not be present in your project's components folder. However, you can customize the Sider component in two ways: 1. 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 of how to use it:

import { Layout, Sider } from "@refinedev/mui";  
  
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/mui";  
  
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/guides-concepts/faq#using-render-property-of-sider-component) 2. Using the swizzle command: The swizzle command allows you to copy the default Sider component to your project, enabling you to customize it as you want. You can use the swizzle command from the @refinedev/cli. Refer to the swizzle section of Development guide for more info. (https://refine.dev/docs/guides-concepts/development/#using-swizzle) Also, you can customize the default <ThemedSiderV2> component either by using its props or with the swizzle feature. Here is an example of how to customize it using the render and Title prop:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/mui";  
  
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/mui";  
  
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>  
 );  
};

Source (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout#sider) Remember to replace CustomTitle with your own component or element. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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