national-gold•4h ago

Change logout label on MaterialUI

How to change the label and icon used for the "Logout" entry in the Sider?

2 Replies

Hi @Nitai. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the label and icon for the "Logout" entry in the Sider when using Material UI with refine, you should use the render prop of the <ThemedSider> (or <Sider>) component. The render function receives a logout element, which you can replace with your own custom component. Here’s how you can do it:

import { Refine } from "@refinedev/core";
import { ThemedLayout, ThemedSider } from "@refinedev/mui";
import ExitToAppIcon from "@mui/icons-material/ExitToApp"; // Example icon

const CustomLogout = ({ onClick }) => (
    <a
        href="#"
        onClick={onClick}
        style={{ display: "flex", alignItems: "center", padding: 8 }}
    >
        <ExitToAppIcon style={{ marginRight: 8 }} />
        Custom Logout Label
    </a>
);

const App = () => (
    <Refine /* ... */>
        <ThemedLayout
            Sider={() => (
                <ThemedSider
                    render={({ items, logout }) => (
                        <>
                            {items}
                            {/* Replace the default logout with your custom one */}
                            <CustomLogout onClick={logout.props.onClick} />
                        </>
                    )}
                />
            )}
        >
            {/* ... */}
        </ThemedLayout>
    </Refine>
);

import { Refine } from "@refinedev/core";
import { ThemedLayout, ThemedSider } from "@refinedev/mui";
import ExitToAppIcon from "@mui/icons-material/ExitToApp"; // Example icon

const CustomLogout = ({ onClick }) => (
    <a
        href="#"
        onClick={onClick}
        style={{ display: "flex", alignItems: "center", padding: 8 }}
    >
        <ExitToAppIcon style={{ marginRight: 8 }} />
        Custom Logout Label
    </a>
);

const App = () => (
    <Refine /* ... */>
        <ThemedLayout
            Sider={() => (
                <ThemedSider
                    render={({ items, logout }) => (
                        <>
                            {items}
                            {/* Replace the default logout with your custom one */}
                            <CustomLogout onClick={logout.props.onClick} />
                        </>
                    )}
                />
            )}
        >
            {/* ... */}
        </ThemedLayout>
    </Refine>
);

In this example, the default logout element is replaced with a custom component where you can set any label and icon you want. You can further style or structure this component as needed. This approach is documented in the refine FAQ and the Material UI ThemedLayout documentation, which show how to use the render prop to customize the Sider contents, including the logout entry How can I add an item to the Sider component? ThemedLayout Props. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4h ago

<@1091820430047838349> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Change logout label on MaterialUI

Did you find this page helpful?