quickest-silver•13mo ago

Hide sidebar from refine component

I am using <Refine /> component in the root of the app, and it automatically creates a sidebar with all the resources, how could I hide it?

5 Replies

kapa.ai•13mo ago

Hi @Facu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can hide the sidebar in the <Refine /> component by creating a dummy resource and adding it to the resources prop of the <Refine /> component. This will add a navigation link to the sidebar but it won't be visible. Here is an example:

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

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

In the above code, the hide property in the meta object is set to true, which hides the resource from the sidebar. For more advanced customization, you can use the render prop of the <Sider /> component to render any custom component. You can also use the swizzle command to copy the default Sider component to your project, allowing you to customize the sidebar as you want. For more information, refer to the Refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#hide) and the swizzle documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

quickest-silverOP•13mo ago

I need a component like the Logout button refine creates automatically while using <Refine /> @kapa.ai

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: Sorry @Facu, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist: Perhaps try again in 15mins?

quickest-silverOP•13mo ago

Hide sidebar from refine component

Did you find this page helpful?