eastern-cyan
eastern-cyan5mo 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
kapa.ai5mo 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
kapa.ai5mo ago
<@398749213795680259> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet
afraid-scarlet5mo 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 🙏