How to make the Navigation menu not be based on resources

How can I change my navigation menu to not be based on resources?

11 Replies

kapa.ai•13mo ago

Hi @script4559. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine's navigation menu is typically based on the resources you define. However, you can customize the navigation menu by using the render prop of the <Sider /> component. This allows you to render any custom component, including links that are not based on resources. Here's an example of how you can use the render prop to add an external link to the navigation menu:

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>;
};

In this example, a custom Sider component is created. Inside the render prop, a new navigation link is added along with the existing items and the logout button. For more complex customizations, you can use the swizzle command to copy the default Sider component to your project. This allows you to customize the sidebar as you want. You can refer to the swizzle documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle) for more information. Source: Github Issue (closed): [FEAT] Create a non-resource page which will be visible in the side panel > Comments (https://github.com/refinedev/refine/issues/4051) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

like-goldOP•13mo ago

@kapa.ai can I use useInvalidate for requests made with useCustom?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useInvalidate hook to manually invalidate queries, including those made with the useCustom hook. However, it's important to note that the useCustom hook does not automatically invalidate queries or update the application state like other data hooks such as useCreate, useUpdate, or useDelete. Here's an example of how you can use the useInvalidate hook:

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

const invalidate = useInvalidate();  

// `invalidate` function is async and returns a promise. If you want to wait for the invalidation process to complete, you can await it.  
invalidate({  
 resource: "posts",  
 invalidates: ["list"],  
});

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

const invalidate = useInvalidate();  

// `invalidate` function is async and returns a promise. If you want to wait for the invalidation process to complete, you can await it.  
invalidate({  
 resource: "posts",  
 invalidates: ["list"],  
});

In this example, the useInvalidate hook is used to invalidate the list state of the posts resource. Remember, you'll need to know the query key to invalidate the query. If you don't know the query key, you can use the queryOptions property of the useCustom hook:

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

useCustom({  
 queryOptions: {  
 queryKey: ["custom-key"],  
 },  
});

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

useCustom({  
 queryOptions: {  
 queryKey: ["custom-key"],  
 },  
});

Sources: - useInvalidate Documentation (https://refine.dev/docs/data/hooks/use-invalidate) - useCustom Documentation (https://refine.dev/docs/data/hooks/use-custom) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

like-goldOP•13mo ago

@kapa.ai warnWhenUnsavedChanges for useModalForm is warning me twice

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The warnWhenUnsavedChanges property in useModalForm is designed to show a warning when the user tries to leave the page with unsaved changes. If you're seeing the warning twice, it could be due to a couple of reasons: 1. You might have set warnWhenUnsavedChanges to true in both useModalForm and useForm or in the global <Refine> component. Ensure that you have only set it in one place.

// Example of setting warnWhenUnsavedChanges in useModalForm
const modalForm = useModalForm({  
 warnWhenUnsavedChanges: true,  
});

// Example of setting warnWhenUnsavedChanges in useModalForm
const modalForm = useModalForm({  
 warnWhenUnsavedChanges: true,  
});

2. If you're using a custom field, Refine might not be able to detect the changes automatically. In this case, you'll need to handle the logic manually. Refine checks for unsaved changes with the help of form providers. For example, for react-hook-form, Refine uses the isDirty state. If isDirty is true after submit, Refine shows a warning.

// Example of using useForm with react-hook-form
const form = useForm({
    warnWhenUnsavedChanges: true,
});

// Example of using useForm with react-hook-form
const form = useForm({
    warnWhenUnsavedChanges: true,
});

If you're still experiencing the issue, it might be a bug and you should consider reporting it on the Refine GitHub page (https://github.com/pankod/refine/issues). Sources: - useModalForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#warnwhenunsavedchanges) - useForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#warnwhenunsavedchanges) - Refine GitHub Issues (https://github.com/pankod/refine/issues) - Discord Support Thread (https://discord.com/channels/837692625737613362/1141736827267596389) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

like-goldOP•13mo ago

@kapa.ai I didnt do any of the two things you mentioned wrongly

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you've checked both of the potential issues I mentioned and you're still experiencing the problem, it might be a bug in Refine. I recommend creating an issue on the Refine GitHub page (https://github.com/pankod/refine/issues). When you create the issue, try to provide as much detail as possible about your situation. This includes the version of Refine you're using, the code where you're using useModalForm, and any other relevant details. This will help the Refine team to understand and resolve your issue more quickly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

How to make the Navigation menu not be based on resources

Did you find this page helpful?