Change Logo in default Sidebar

Hey where can I change the Sidebar Logo in refine? I cant find it ...

31 Replies

Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- To change the logo in the default Sidebar in refine, you need to customize the default Sider. The <Title> component is responsible for rendering the logo inside the <Sider> component. First, check out the example on how to customize the Sider Menu here (https://refine.dev/docs/examples/customization/customSider/). Then, in your custom Sider component, replace the default refine logo with your own logo. Here's an example of how to do this:

import { Sider, Title } from "@pankod/refine";
import YourLogo from "path/to/your/logo";

const CustomSider: React.FC = () => {
    return (
        <Sider>
            <Title>
                <a href="/">
                    <img src={YourLogo} alt="Your Logo" />
                </a>
            </Title>
            {/* ... other Sider components */}
        </Sider>
    );
};

import { Sider, Title } from "@pankod/refine";
import YourLogo from "path/to/your/logo";

const CustomSider: React.FC = () => {
    return (
        <Sider>
            <Title>
                <a href="/">
                    <img src={YourLogo} alt="Your Logo" />
                </a>
            </Title>
            {/* ... other Sider components */}
        </Sider>
    );
};

Finally, use your custom Sider component in your refine configuration. ----------------------

kapa.ai•2y ago

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

vicious-gold•2y ago

if you are using refine@3 you can change title like this: https://refine.dev/docs/3.xx.xx/api-reference/core/components/refine-config/#title if you are using refine@4 you use title prop of layout

<Layout> Title={() => <div>my logo</div>}
</Layout>

<Layout> Title={() => <div>my logo</div>}
</Layout>

helpful-purple•2y ago

Yes i am using refine@4. Can you give me more specific code i dont understand how to do this

vicious-gold•2y ago

when you use create refine-app we are adding default <Layout> according to your selected UI package. this is generated code from create refine-app when selected MUI. app.tsx

 <BrowserRouter>
            <GitHubBanner />
            <ThemeProvider theme={LightTheme}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        routerProvider={routerProvider}
                        dataProvider={dataProvider(
                            "https://api.fake-rest.refine.dev",
                        )}
                        notificationProvider={notificationProvider}
                        resources={[
                            {
                                name: "posts",
                                list: "/posts",
                                create: "/posts/create",
                                edit: "/posts/edit/:id",
                            },
                        ]}
                        options={{
                            syncWithLocation: true,
                            warnWhenUnsavedChanges: true,
                        }}
                    >
                        <Routes>
                            <Route
                                element={
                                    <Layout>
                                        <Outlet />
                                    </Layout>
                                }
                            >
                                <Route
                                    index
                                    element={
                                        <NavigateToResource resource="posts" />
                                    }
                                />

                                <Route path="/posts">
                                    <Route index element={<PostList />} />
                                    <Route
                                        path="create"
                                        element={<PostCreate />}
                                    />
                                    <Route
                                        path="edit/:id"
                                        element={<PostEdit />}
                                    />
                                </Route>

                                <Route path="*" element={<ErrorComponent />} />
                            </Route>
                        </Routes>
                        <UnsavedChangesNotifier />
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>

 <BrowserRouter>
            <GitHubBanner />
            <ThemeProvider theme={LightTheme}>
                <CssBaseline />
                <GlobalStyles
                    styles={{ html: { WebkitFontSmoothing: "auto" } }}
                />
                <RefineSnackbarProvider>
                    <Refine
                        routerProvider={routerProvider}
                        dataProvider={dataProvider(
                            "https://api.fake-rest.refine.dev",
                        )}
                        notificationProvider={notificationProvider}
                        resources={[
                            {
                                name: "posts",
                                list: "/posts",
                                create: "/posts/create",
                                edit: "/posts/edit/:id",
                            },
                        ]}
                        options={{
                            syncWithLocation: true,
                            warnWhenUnsavedChanges: true,
                        }}
                    >
                        <Routes>
                            <Route
                                element={
                                    <Layout>
                                        <Outlet />
                                    </Layout>
                                }
                            >
                                <Route
                                    index
                                    element={
                                        <NavigateToResource resource="posts" />
                                    }
                                />

                                <Route path="/posts">
                                    <Route index element={<PostList />} />
                                    <Route
                                        path="create"
                                        element={<PostCreate />}
                                    />
                                    <Route
                                        path="edit/:id"
                                        element={<PostEdit />}
                                    />
                                </Route>

                                <Route path="*" element={<ErrorComponent />} />
                            </Route>
                        </Routes>
                        <UnsavedChangesNotifier />
                    </Refine>
                </RefineSnackbarProvider>
            </ThemeProvider>
        </BrowserRouter>

You can use Layout component's Title prop to change

helpful-purple•2y ago

Do you mean this?

vicious-gold•2y ago

oh sorry. are u using nextjs ?

helpful-purple•2y ago

nooo typescript.tsx

vicious-gold•2y ago

yes you can use this layout component

helpful-purple•2y ago

Okey wish me good luck, thx you Alican It doesnt work, I dont unterstand

vicious-gold•2y ago

i will debug and return you

helpful-purple•2y ago

Ey Alican, we are using next.js Sorry

evident-indigo•2y ago

we are using nextjs and mui. We copied the pages from inferencer and just want to change the Sidebar Icon (when collapsed and when opened). In V3 this was very easy, now I cant find it 😄

vicious-gold•2y ago

Hi, i created nextjs project from scratch you can use this code snippet

const MyTitle = ({ collapsed }: { collapsed: boolean }) => {
  if (collapsed) {
    return <h2>MT</h2>
  }

  return <h2>My Title</h2>
}

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />
    }

    return (
      <Layout Header={Header} Title={(props) => <MyTitle collapsed={props.collapsed} />}>
        <Component {...pageProps} />
      </Layout>
    )
  }

const MyTitle = ({ collapsed }: { collapsed: boolean }) => {
  if (collapsed) {
    return <h2>MT</h2>
  }

  return <h2>My Title</h2>
}

function MyApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const renderComponent = () => {
    if (Component.noLayout) {
      return <Component {...pageProps} />
    }

    return (
      <Layout Header={Header} Title={(props) => <MyTitle collapsed={props.collapsed} />}>
        <Component {...pageProps} />
      </Layout>
    )
  }