optimistic-gold
optimistic-gold5mo ago

Source code for the default antd sider

Can I see the source code for the default ant sider used in refine 4
2 Replies
kapa.ai
kapa.ai5mo ago
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
kapa.ai5mo ago
<@543682490951532554> kapa.ai is still learning and improving, please let us know how it did by reacting below