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
6 Replies
Hi @zomh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
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.
<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below
other-emerald•2y 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}>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•2y ago
Yea thank you done that