optimistic-gold•2y ago

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

6 Replies

kapa.ai•2y ago

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:

import { Refine } from "@refinedev/core";  

<Refine  
 ...  
 resources={[  
 {  
 name: "dashboard",  
 list: "/",  
 meta: {  
 label: "Dashboard",  
 icon: "🏠",  
 },  
 },  
 ]}  
/>;

import { Refine } from "@refinedev/core";  

<Refine  
 ...  
 resources={[  
 {  
 name: "dashboard",  
 list: "/",  
 meta: {  
 label: "Dashboard",  
 icon: "🏠",  
 },  
 },  
 ]}  
/>;

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:

import { Layout, Sider } from "@refinedev/antd";  

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="<https://refine.dev/">👋> Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/antd";  

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="<https://refine.dev/">👋> Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

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:

npm create refine-app@latest -- --example customization-sider

npm create refine-app@latest -- --example customization-sider

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: ----------------------

kapa.ai•2y ago

<@1043576440450453604> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-goldOP•2y 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,

like-gold•2y 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.

optimistic-goldOP•2y ago

🥰 thanks it worked, Thanks a lot

like-gold•2y ago

Noice! Feel free to come back here and ask questions! Can really vouch for @core 💌

Using refine as an admin panel (beginner)

Did you find this page helpful?