other-emerald
other-emerald2y ago

Sider and Top Menu

Hello, what is the best way in Refine to achieve a layout like the one in the picture? The sider is pretty obvious, but where would you put the top bar (yellow) with static and dynamic (pink) content? Static meaning its content is the same for every site. Dynamic means its different for each site. Please share your thoughts, Thank you
No description
6 Replies
kapa.ai
kapa.ai2y ago
Hi @zomh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Custom Layout documentation (https://refine.dev/docs/advanced-tutorials/custom-layout) for more information on how to customize the layout in Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Custom Layout | refine
refine supports any layout you want with no restrictions and also provides default layouts with its UI packages. You are free to use them or create your own with the help of refine's hooks and components. You can also use the swizzle command to customize the default layouts and adapt them to your needs.
kapa.ai
kapa.ai2y ago
<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below
other-emerald
other-emerald2y ago
The bot pointed me in the right direction. Top bar is called header and can be passed to layout e.g. <Layout Sider={CustomSider} Header={CustomHeader}>
Omer
Omer2y ago
Hey @zomh , Yes, that's the right approach. I think using the swizzle command to include Layout in your project would be a great start. https://refine.dev/docs/packages/documentation/cli/#swizzle
CLI | refine
refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
other-emerald
other-emerald2y ago
Yea thank you done that