can you create sidebar without resources

5 Replies

Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can create a sidebar without using resources in refine. Here are a couple of methods to achieve this: Method 1: Using a Custom Sider Component You can create a custom Sider component and use the render prop to render any custom component. This method allows you to add internal or external links directly to the sidebar.

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

Method 2: Using a Dummy Resource For internal links, you can create a dummy resource and add it to the resources prop of the <Refine> component. This will add a navigation link to the sidebar.

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

<Refine
    ...
    resources={[
        {
            name: "dummy-resource",
            list: "/internal-link",
            meta: {
                label: "Navigation Link",
                icon: <span>👋</span>,
            },
        },
    ]}
/>;

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

<Refine
    ...
    resources={[
        {
            name: "dummy-resource",
            list: "/internal-link",
            meta: {
                label: "Navigation Link",
                icon: <span>👋</span>,
            },
        },
    ]}
/>;

Additional Customization If you need more customization, you can use the swizzle command to copy the default Sider component to your project and modify it as needed. Refer to the swizzle documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle) for more information. References - Custom Sider Component (https://github.com/refinedev/refine/issues/4051) - Dummy Resource (https://github.com/refinedev/refine/issues/4051) - Swizzle Documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle) These methods should help you create a sidebar without relying on resources in refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

eastern-cyan•4w ago

How to disable query for dummy resource @kapa.ai How to disable query for dummy resource

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To disable the query for a dummy resource in refine, you can use the meta.hide property to hide the resource from the menu while still making it accessible via the URL. This way, the resource won't trigger any queries unless explicitly accessed. Here's how you can do it:

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

const App = () => (
  <Refine
    ...
    resources={[
      {
        name: "dummy-resource",
        list: "/internal-link",
        meta: {
          hide: true, // This will hide the resource from the menu
        },
      },
    ]}
  />
);

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

const App = () => (
  <Refine
    ...
    resources={[
      {
        name: "dummy-resource",
        list: "/internal-link",
        meta: {
          hide: true, // This will hide the resource from the menu
        },
      },
    ]}
  />
);

References - How to hide items from the Sider component? (https://refine.dev/docs/guides-concepts/faq/#how-to-hide-items-from-the-sider-component) - Add an option to hide the resource in the menu (https://github.com/refinedev/refine/issues/2388) By setting meta.hide to true, you ensure that the dummy resource does not appear in the sidebar and does not trigger any queries unless directly accessed via its URL. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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