update sidebar from refine/antd

How do I change the text "refine Project" on the <ThemedLayoutV2> component? Specifically the Sider component.

2 Replies

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•8mo ago

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