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
K
kapa.ai•211d 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: ----------------------
K
kapa.ai•211d ago
<@1043576440450453604> kapa.ai is still learning and improving, please let us know how it did by reacting below
F
foreign-sapphire•211d 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
L
like-gold•211d 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.
F
foreign-sapphire•211d ago
🥰 thanks it worked, Thanks a lot
L
like-gold•211d ago
Noice! Feel free to come back here and ask questions! Can really vouch for @core 💌
More Posts
rename refine default create button in the listhow to rename create button in list which is coming by giving create resourceInvalid hook call. Hooks can only be called inside of the body of a function componenthello, i got this error Invalid hook call. Hooks can only be called inside of the body of a functuseEditableTableHi, i notice that whenever I tried to fetch data using useEditableTable it sends the query with thisuseEditableTable short glitchI'm looking at `useEditableTable` from antd and the thing is there is a short glitch when pressingUpgrade Ant Design from v4 to v5 not workingI am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I amHandle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resourceUnable to modify login error messageIn this documentation https://refine.dev/docs/api-reference/core/components/auth-page/#login Under aredirect to edit after create successi want to redirect user to edit page with its id after create is successfuladding data from useCustom in useForm default values``` const { data } = useCustom({ method: "get", url: "/advertisers/initialize", useCustom filterhey, is it possible to set filter when using useCustom to get a specific range of dates when fetchinhandle axios console error coming from useCreate````import { HttpError } from "@refinedev/core"; import axios, { AxiosRequestConfig } from "axios"; How to use nested Route with antdInferenceHow to use nested Route with antdInferencehandling errors and accessing objects``` onError: async (error) => { console.log(error); if ( error.statusCustom title handler with Typescriptwrite a custom title handler with TypescriptIs Simple-rest made for auth ?is simple rest made just for basic api calls? cause i m trying to implement auth and its forcing me How to use react router lazy for routes?I want to use the react router lazy api to load the components on route as example here https://reacUseTable does not call Connection endpoint for countI did a quick tutorial where I had a single book page with Refine and Ant. I defined the resources iHow to navigate to a list page with a filter parameter?I want to navigate to a list page by setting some filter parameter in the URL. How can I achieve tha