like-gold•8mo 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•8mo 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•8mo ago

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

like-gold•8mo ago

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

kapa.ai•8mo 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?

like-gold•8mo ago