R
Refine

ask-any-question

Change Logo in default Sidebar

Sstormy-gold3/20/2023
Hey where can I change the Sidebar Logo in refine? I cant find it ...
No description
Kkapa.ai3/20/2023
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. ----------------------
Kkapa.ai3/20/2023
<@244579825140891648> kapa.ai is still learning and improving, please let us how it did by reacting below
Hharsh-harlequin3/20/2023
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>
Sstormy-gold3/20/2023
Yes i am using refine@4. Can you give me more specific code i dont understand how to do this
Hharsh-harlequin3/20/2023
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
Sstormy-gold3/20/2023
No description
Sstormy-gold3/20/2023
Do you mean this?
Hharsh-harlequin3/20/2023
oh sorry. are u using nextjs ?
Sstormy-gold3/20/2023
nooo typescript.tsx
Hharsh-harlequin3/20/2023
yes you can use this layout component
Sstormy-gold3/20/2023
Okey wish me good luck, thx you Alican It doesnt work, I dont unterstand
Hharsh-harlequin3/20/2023
i will debug and return you
Sstormy-gold3/20/2023
Ey Alican, we are using next.js Sorry
Cconscious-sapphire3/20/2023
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 πŸ˜„
Hharsh-harlequin3/20/2023
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>
)
}
Sstormy-gold3/20/2023
Thank you, it worked πŸ™‚
Hharsh-harlequin3/20/2023
πŸ™πŸ» πŸš€
Cconscious-sapphire3/20/2023
Thank you so much! πŸ™‚
Cconscious-sapphire3/20/2023
Hm, we found a bug. We want to use a img as a header element, not a h2. Changing that works, but only on the list page, not on the edit page and so on...
No description
No description
Cconscious-sapphire3/20/2023
const MyTitle = ({ collapsed }: { collapsed: boolean }) => {
if (collapsed) {
return <a href="/"> <img src={'images/sider/logo.png'} width={45} /> </a>;
}

return <a href="/"> <img src={'images/sider/banner.png'} width={200} /> </a>;
};
const MyTitle = ({ collapsed }: { collapsed: boolean }) => {
if (collapsed) {
return <a href="/"> <img src={'images/sider/logo.png'} width={45} /> </a>;
}

return <a href="/"> <img src={'images/sider/banner.png'} width={200} /> </a>;
};
Hharsh-harlequin3/20/2023
probably your path is broken on src '/images/sider/banner.png'can you try this ? i added "/" to start
Cconscious-sapphire3/20/2023
I'll try it in a sec. somehow some pages do not work anymore, even on the last commit, on which everything was fine yesterday
Hharsh-harlequin3/20/2023
i don't think it's releated to title component
Cconscious-sapphire3/20/2023
no it isnt. I've found the issue: If you clear the cookies and start from the beginning and the first action you do is "show" on a item, it doesnt work. It only works, if u open the item on the edit page. After you've done that at least one time, the show page works
No description
Hharsh-harlequin3/20/2023
can you give me your show page code
Cconscious-sapphire3/20/2023
1/2
export default function CaseShow() {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;

const record = data?.data;

const date = new Date(record?.createdAt);

const dateFormat = date.getDate() + "/" + ('0' + (date.getMonth() + 1)).slice(-2) + "/" + date.getFullYear() + ", " + ('0' + (date.getHours() - 1)).slice(-2) + ":" + ('0' + (date.getMinutes())).slice(-2) + ":" + ('0' + (date.getSeconds())).slice(-2);

return (
<Show isLoading={isLoading}>
<Stack gap={1}>
<Typography variant="body1" fontWeight="bold">
Id
</Typography>
<NumberField value={record?.id ?? ""} />
<Typography variant="body1" fontWeight="bold">
Created At
</Typography>
<TextField value={dateFormat} />
<Typography variant="body1" fontWeight="bold">
Title
</Typography>
<TextField value={record?.title} />
<Typography variant="body1" fontWeight="bold">
Short Description
</Typography>
<TextField value={record?.shortDescription} />
<Typography variant="body1" fontWeight="bold">
Status
</Typography>
<TextField value={record?.state} />
<Typography variant="body1" fontWeight="bold">
Ranked
</Typography>

export default function CaseShow() {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;

const record = data?.data;

const date = new Date(record?.createdAt);

const dateFormat = date.getDate() + "/" + ('0' + (date.getMonth() + 1)).slice(-2) + "/" + date.getFullYear() + ", " + ('0' + (date.getHours() - 1)).slice(-2) + ":" + ('0' + (date.getMinutes())).slice(-2) + ":" + ('0' + (date.getSeconds())).slice(-2);

return (
<Show isLoading={isLoading}>
<Stack gap={1}>
<Typography variant="body1" fontWeight="bold">
Id
</Typography>
<NumberField value={record?.id ?? ""} />
<Typography variant="body1" fontWeight="bold">
Created At
</Typography>
<TextField value={dateFormat} />
<Typography variant="body1" fontWeight="bold">
Title
</Typography>
<TextField value={record?.title} />
<Typography variant="body1" fontWeight="bold">
Short Description
</Typography>
<TextField value={record?.shortDescription} />
<Typography variant="body1" fontWeight="bold">
Status
</Typography>
<TextField value={record?.state} />
<Typography variant="body1" fontWeight="bold">
Ranked
</Typography>

2/2
<Checkbox checked={record?.isRanked} disabled />
<Typography variant="body1" fontWeight="bold">
Timebased
</Typography>
<Checkbox checked={record?.timeBased} disabled />
<Typography variant="body1" fontWeight="bold">
Likes
</Typography>
<NumberField value={record?.likes} />
<Typography variant="body1" fontWeight="bold">
Favorites
</Typography>
<NumberField value={record?.numberOfFavorites} />
<Typography variant="body1" fontWeight="bold">
Difficulty
</Typography>
<TextField value={record?.difficulty} />
</Stack>
</Show>
);
}
<Checkbox checked={record?.isRanked} disabled />
<Typography variant="body1" fontWeight="bold">
Timebased
</Typography>
<Checkbox checked={record?.timeBased} disabled />
<Typography variant="body1" fontWeight="bold">
Likes
</Typography>
<NumberField value={record?.likes} />
<Typography variant="body1" fontWeight="bold">
Favorites
</Typography>
<NumberField value={record?.numberOfFavorites} />
<Typography variant="body1" fontWeight="bold">
Difficulty
</Typography>
<TextField value={record?.difficulty} />
</Stack>
</Show>
);
}
Hharsh-harlequin3/20/2023
can you add this to number fields ?
<NumberField value={record?.likes || "-"} />
<NumberField value={record?.numberOfFavorites || "-"} />
<NumberField value={record?.likes || "-"} />
<NumberField value={record?.numberOfFavorites || "-"} />
sorry about that. this is known issue. we will fix this soon when undefined passed to NumberField. its throw error. we will fix soon
Cconscious-sapphire3/20/2023
works like a charm! Dont be sorry! You guys are doing an amazing job πŸ˜„
Sstormy-gold3/20/2023
True!!!
Hharsh-harlequin3/20/2023
i'm glad to hear that πŸ₯Ή thanks
Cconscious-sapphire3/20/2023
this worked as well! πŸ˜„

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
How to add a custom breadcrumb items?I have a nested routes and in that nested routes list page the breadcrumb is not show. How to add a Data provider requests in loop when using ViteI am trying to migrate my Refine with Remix app to Vite. This app is still at the very beginning, itInferencer: Translation of DataGrid Columns doesnt workHello everyone! I noticed that the Translation on all of the default pages doesnt work on the DataGRefine beginner: How to use supabase queries? In Inferencer TemplatesHello everyone, I am new to React, Refine and NextJS. I trying to build a website with my supabase dHow to Fix this broke Sider Component from V3.xxHi, I wanted to use this custom sider that I repurposed from a v3.xx app to work on a 4.xx one. I baunable to run websiteI have installed all the dependencies successfully without any error but whenever i am running commaRemove Refine WatermarkHey I am developing a University Project with Refine. I need do remove the Refine Watermark. How canHelpHey everyone. I'm developing a courier management system for my university project. Is there anyone getIdentityHi, is there a way we can update the state of our getIdentity, after updating a certain component beinferencerHi how can we pass a custom json or typed object to the inferencer to scaffold crud operationsHow can I custom resource name in Notification when create or delete successHi guys. I want to change default resource name in Notification when create or delete success.502: Bad Gateway in directus exampleHere you have error https://refine.dev/docs/examples/data-provider/directus/ in sandbox.HeyHey I have recently raised an issue on UI i wanna work on that issue can anyone help me in how I caquery data cannot be undefinedI created a new Refine app, using the Remix framework and Headless components. I tried to implementUpgraded a new project to R4 Isn t goingUpgraded a new project to R4, Isn't going too good. Need to rewrite many things.Firebase Microsoft LoginHi everyone !! I'm new to Refine. I am trying to Implement Firebase signInWithEmailAndPassword and FUse json+ld data formatHi guys πŸ‘‹ !! I'm new to refine. Actually i have a API which return me data in json+ld format and iHey Γ–mer 5479 have yet to upgrade to v4Hey @Omer, have yet to upgrade to v4 as we're now in the process of going live with the current versHey Γ–mer 5479 I have also upgraded toHey @Omer, I have also upgraded to refine v4 and transition was very smooth using codemod. Any issueMake api calls to a custom endpoint and not the resource nameHi all , I currently have 4 resources : users , roles , permissions , providers . I want to update r