stormy-gold
stormy-gold6mo ago

update sidebar from refine/antd

How do I change the text "refine Project" on the <ThemedLayoutV2> component? Specifically the Sider component.
2 Replies
kapa.ai
kapa.ai6mo ago
Hi @synisme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can customize the default <ThemedSiderV2> component of the <ThemedLayoutV2> component by using its props. Specifically, you can use the Title prop to customize the title of the sidebar. Here is an example of how to do it:
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} />}
// ...
/>
)}
>
{/* ... */}
</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} />}
// ...
/>
)}
>
{/* ... */}
</ThemedLayoutV2>
</Refine>
);
};
In this example, CustomTitle is a React component that you define yourself. It receives a collapsed prop that you can use to adjust the title based on whether the sidebar is collapsed or not. For more information, you can refer to the official 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.ai6mo ago
<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below