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
K
kapa.ai392d 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:
K
kapa.ai392d 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.
K
kapa.ai392d ago
<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below
C
conscious-sapphire392d 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}>
O
Omer392d 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).
C
conscious-sapphire392d ago
Yea thank you done that
More Posts
Mobile CompatabilityHi everyone, is refine capable of doing mobile app like react-native?I used pnpm to download @refinedev/inferencer, vscode says there is no .d.ts type file. How to fix ihelp mewhen i build my nextjs project. I get this error `import { useLogin, useTranslate } from "@hooks`the nextjs project is built from official tool.useCustomMutation with GETHi, due to a non standard API endpoint I have to do a single call to a GET endpoint on a button clicHelp newbie and need guideline to list data from self API (dataProvider)Hi all, I am just installed RefineV4, just want to list my divisions in UI. I hit the error as my scMigration to v4: genetic routesHi 👋 So I've started migrating to v4 (🥳). In v3 I had the `routerProvider` which generated the roAction-based (RPC-like) interactionsHi! I'm pretty new in the whole stack, so probably the question is noobish. I must implement a mix oauthentication and tokenoauthHi all How can I validate the Google authentication in my back-end? How do I verify the token? oauthPopulate selectfield from another form's resultHey guys, been using v4 for a while now and it's great so far. I have a question in something I wantSteps to use localhost as a data provider?How to use localhost as a data provider? I have a restfull api backend running, but changing the datEdit Page fetches the Data from the REST API, but doesn't populate the form fields.Hi, I'm trying to create a Edit form for my card. I'm using `useForm` . But it isn't populating the Hi, How can I access the URL parameter?Hi, I'm trying to access the URL parameter in the 1st SS. It'll be used to fetch data. I've tried `ucookieshi all I use useTable useForm and another hooks to get the data from the backend in the backend (nodHelp with "Failed to resolve '@refinedev/inferencer/mantine"?Hi, I'm trying to adapt Refine into an existing React project (bundled by Parcel). I'm struggling to