modern-teal•7mo ago

sidebar

How do i create a multiple sidebar with different headers using materialui, also the side bars should have some nested options.

3 Replies

kapa.ai•7mo ago

Hi @dc_alexyt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details on creating multiple sidebars with different headers and nested options using Material UI in a Refine application. However, Refine does provide a way to customize the default sidebar component using its props or with the swizzle feature. Here is an example of how to customize the default sidebar component 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>  
 );  
};

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

kapa.ai•7mo ago

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

genetic-orange•7mo ago

Not sure if Material UI plays well with multiple drawers/sidebars open but you can check out the offficial Material UI documentation to see some examples of the sidebars that might help you. Refine's Material UI layout doesn't offer this but customizations can easily be done by swizzling the component 🙏