Using refine as an admin panel (beginner)
I am building admin panel for news website to upload, delete, update and overall controll news content on the page. I am a beginner and I want to try refine, as I know React and next js, never really touched backend, so I found it easiest way to get around this project.
I am an absolute beginner to refine, so my question might be really irrelevant. sorry in advance, but in my folder structure, inside categories, I have only header, but I want to customize the sider menu, which is toggling with hamburger menu, I could not find the relevant code
![No description](https://cdn.answeroverflow.com/1155837675983622244/Screenshot_2023-09-25_at_16.05.02.png)
6 Replies
Hi @anukacim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
No problem at all, your question is absolutely relevant. In refine, you can customize the sider menu in several ways. Here are a few examples:
1. Using the
resources
property on the <Refine>
component: The <Sider>
component shows the resources whose list
property is set. So, you can have an extra navigation link by adding a resource with the list
attribute. Here is an example:
Source (https://refine.dev/docs/faq/)
2. Using the render
property of the <Sider>
component: The render
property is a function that receives an object with the items
and logout
properties. The items
property is the list of navigation items and the logout
property is the logout button. Here is an example:
Source (https://refine.dev/docs/faq/)
3. Using the swizzle
command: You can use the command to copy the default Sider
component to your project. This will allow you to customize the sider as you want. You can refer to the swizzle documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle) for more information.
4. Creating your own Sider Menu
with refine: You can customize the default refine Sider Menu. Here is an example of how to do it:
Source (https://refine.dev/docs/examples/customization/customSider/)
Remember, the meta.parent
you give in the resource objects must be strictly equal to the resource name you want to group under. This gives you more control over the side menu and allows you to customize it to better suit your needs. Source (https://refine.dev/docs/advanced-tutorials/multi-level-menu/)
I hope this helps! Let me know if you have any other questions.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1043576440450453604> kapa.ai is still learning and improving, please let us know how it did by reacting below
useful-bronze•12mo ago
thanks a lot, but the problem is I want to update the ui of the current predefined sider, with refine project as header and links, but in file structure I can not find where the codebase of the sider is now. according to tutorial it should be in components, but in components only header is generated , I meand the part of ui, which I uploaded as a screenshot in code,
![No description](https://cdn.answeroverflow.com/1155889653220638750/Screenshot_2023-09-25_at_16.05.02.png)
fascinating-indigo•12mo ago
Hey @anukacim , welcome to Refine!
Kappa is completely right but you might not really get what it said.
So the easiest way for you to get the code you are missing is to use the
swizzle
command of refine.
Basically running npm run refine swizzle
which is an interactive command where you can "extract" the components you would like to adjust into your own project.
Maybe give that a try and come back if you need further help.useful-bronze•12mo ago
🥰 thanks
it worked, Thanks a lot
fascinating-indigo•12mo ago
Noice! Feel free to come back here and ask questions! Can really vouch for @core 💌