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
conventional-tan•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
fascinating-indigoOP•2y ago
Yes i am using refine@4.
Can you give me more specific code i dont understand how to do this
conventional-tan•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 changefascinating-indigoOP•2y ago
fascinating-indigoOP•2y ago
Do you mean this?
conventional-tan•2y ago
oh sorry. are u using nextjs ?
fascinating-indigoOP•2y ago
nooo
typescript.tsx
conventional-tan•2y ago
yes you can use this layout component
fascinating-indigoOP•2y ago
Okey wish me good luck, thx you Alican
It doesnt work, I dont unterstand
conventional-tan•2y ago
i will debug and return you
fascinating-indigoOP•2y ago
Ey Alican, we are using next.js
Sorry
flat-fuchsia•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 😄
conventional-tan•2y ago
Hi, i created nextjs project from scratch
you can use this code snippet
fascinating-indigoOP•2y ago
Thank you, it worked 🙂
conventional-tan•2y ago
🙏🏻 🚀
flat-fuchsia•2y ago
Thank you so much! 🙂
flat-fuchsia•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...
flat-fuchsia•2y ago
conventional-tan•2y ago
probably your path is broken on src
'/images/sider/banner.png'
can you try this ?
i added "/" to startflat-fuchsia•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
conventional-tan•2y ago
i don't think it's releated to title component
flat-fuchsia•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
conventional-tan•2y ago
can you give me your show page code
flat-fuchsia•2y ago
1/2
2/2
conventional-tan•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 soonflat-fuchsia•2y ago
works like a charm! Dont be sorry! You guys are doing an amazing job 😄
fascinating-indigoOP•2y ago
True!!!
conventional-tan•2y ago
i'm glad to hear that 🥹
thanks
flat-fuchsia•2y ago
this worked as well! 😄