can you create sidebar without resources

K

kapa.ai•9/9/24, 11:57 PM

Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•9/9/24, 11:57 PM

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

Sider

component and use the

render

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

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

resources

prop of the

<Refine>

<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>,
            },
        },
    ]}
/>;

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

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)

K

kapa.ai•9/9/24, 11:57 PM

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

----------------------

K

kapa.ai•9/9/24, 11:57 PM

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

E

efficient-indigoOP•9/10/24, 12:02 AM

How to disable query for dummy resource

E

efficient-indigoOP•9/10/24, 12:02 AM

@kapa.ai How to disable query for dummy resource

K

kapa.ai•9/10/24, 12:02 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/10/24, 12:03 AM

----------------------
To disable the query for a dummy resource in refine, you can use the

meta.hide

meta.hide

meta.hide

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
        },
      },
    ]}
  />
);

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

meta.hide

meta.hide

meta.hide to

true

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

----------------------

K

kapa.ai•9/10/24, 12:03 AM

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