Change Logo in default Sidebar
Hey where can I change the Sidebar Logo in refine? I cant find it ...
31 Replies
Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
To change the logo in the default Sidebar in refine, you need to customize the default Sider. The
<Title>
component is responsible for rendering the logo inside the <Sider>
component.
First, check out the example on how to customize the Sider Menu here (https://refine.dev/docs/examples/customization/customSider/).
Then, in your custom Sider component, replace the default refine logo with your own logo. Here's an example of how to do this:
Finally, use your custom Sider component in your refine configuration.
----------------------<@244579825140891648> kapa.ai is still learning and improving, please let us how it did by reacting below
exotic-emerald•2y ago
if you are using
refine@3
you can change title like this:
https://refine.dev/docs/3.xx.xx/api-reference/core/components/refine-config/#title
if you are using refine@4 you use title prop of layout
stormy-gold•2y ago
Yes i am using refine@4.
Can you give me more specific code i dont understand how to do this
exotic-emerald•2y ago
when you use
create refine-app
we are adding default <Layout>
according to your selected UI package.
this is generated code from create refine-app
when selected MUI.
app.tsx
You can use Layout
component's Title prop to changestormy-gold•2y ago
stormy-gold•2y ago
Do you mean this?
exotic-emerald•2y ago
oh sorry. are u using nextjs ?
stormy-gold•2y ago
nooo
typescript.tsx
exotic-emerald•2y ago
yes you can use this layout component
stormy-gold•2y ago
Okey wish me good luck, thx you Alican
It doesnt work, I dont unterstand
exotic-emerald•2y ago
i will debug and return you
stormy-gold•2y ago
Ey Alican, we are using next.js
Sorry
robust-apricot•2y ago
we are using nextjs and mui. We copied the pages from inferencer and just want to change the Sidebar Icon (when collapsed and when opened). In V3 this was very easy, now I cant find it 😄
exotic-emerald•2y ago
Hi, i created nextjs project from scratch
you can use this code snippet
stormy-gold•2y ago
Thank you, it worked 🙂
exotic-emerald•2y ago
🙏🏻 🚀
robust-apricot•2y ago
Thank you so much! 🙂
robust-apricot•2y ago
Hm, we found a bug. We want to use a img as a header element, not a h2. Changing that works, but only on the list page, not on the edit page and so on...
robust-apricot•2y ago
exotic-emerald•2y ago
probably your path is broken on src
'/images/sider/banner.png'
can you try this ?
i added "/" to startrobust-apricot•2y ago
I'll try it in a sec. somehow some pages do not work anymore, even on the last commit, on which everything was fine yesterday
exotic-emerald•2y ago
i don't think it's releated to title component
robust-apricot•2y ago
no it isnt. I've found the issue: If you clear the cookies and start from the beginning and the first action you do is "show" on a item, it doesnt work. It only works, if u open the item on the edit page. After you've done that at least one time, the show page works
exotic-emerald•2y ago
can you give me your show page code
robust-apricot•2y ago
1/2
2/2
exotic-emerald•2y ago
can you add this to number fields ?
sorry about that. this is known issue. we will fix this soon
when
undefined
passed to NumberField. its throw error. we will fix soonrobust-apricot•2y ago
works like a charm! Dont be sorry! You guys are doing an amazing job 😄
stormy-gold•2y ago
True!!!
exotic-emerald•2y ago
i'm glad to hear that 🥹
thanks
robust-apricot•2y ago
this worked as well! 😄