optimistic-gold
optimistic-gold16mo ago

Show show data on List page

I want a page to appeared on the Menu, but instead of List page by default. I wanna use the show data instead
4 Replies
kapa.ai
kapa.ai16mo ago
Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the Show page instead of the List page in the menu of your refine application, you can utilize the useMenu hook. This hook allows you to create a custom menu for your application. Here is an example of how you can use it:
import React from "react";
import { useMenu, LayoutProps, ITreeMenu } from "@refinedev/core";
import { Link } from "react-router-dom";

const Layout: React.FC<LayoutProps> = ({ children }) => {
const { menuItems, selectedKey } = useMenu();

const renderMenuItems = (items: ITreeMenu[]) => {
return (
<>
{menuItems.map(({ key, name, label, icon, route }) => {
const isSelected = key === selectedKey;
return (
<li key={name}>
<Link
to={route}
style={{
fontWeight: isSelected ? "bold" : "normal",
}}
>
{icon}
<span>{label ?? name}</span>
</Link>
</li>
);
})}
</>
);
};

return (
<div>
<div>
<Link to="/">
<img
src="<https://refine.dev/img/refine_logo.png">
alt="Logo"
/>
</Link>
<ul>{renderMenuItems(menuItems)}</ul>
</div>
<div>{children}</div>
</div>
);
};
import React from "react";
import { useMenu, LayoutProps, ITreeMenu } from "@refinedev/core";
import { Link } from "react-router-dom";

const Layout: React.FC<LayoutProps> = ({ children }) => {
const { menuItems, selectedKey } = useMenu();

const renderMenuItems = (items: ITreeMenu[]) => {
return (
<>
{menuItems.map(({ key, name, label, icon, route }) => {
const isSelected = key === selectedKey;
return (
<li key={name}>
<Link
to={route}
style={{
fontWeight: isSelected ? "bold" : "normal",
}}
>
{icon}
<span>{label ?? name}</span>
</Link>
</li>
);
})}
</>
);
};

return (
<div>
<div>
<Link to="/">
<img
src="<https://refine.dev/img/refine_logo.png">
alt="Logo"
/>
</Link>
<ul>{renderMenuItems(menuItems)}</ul>
</div>
<div>{children}</div>
</div>
);
};
In this example, the useMenu hook is used to get the menu items and the selected key. The renderMenuItems function is used to render the menu items. Each menu item is a link that navigates to the route specified in the route property of the menu item. You can customize the route property to point to the Show page of the resource you want to display in the menu. For more information, refer to the useMenu documentation (https://refine.dev/docs/api-reference/core/hooks/ui/useMenu/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai16mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
mute-gold
mute-gold16mo ago
Hello @tads8799, unfortunately this is not customizable. sider links navigates to list resource. you can create your own Sider with useMenu or you can swizzle and customize it according to your needs https://refine.dev/docs/packages/documentation/cli/#swizzle
CLI | refine
refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
optimistic-gold
optimistic-goldOP16mo ago
Thank you so much I find a workaround that I'll still route it like this
<Route index element={<SystemInfoShow />} />
<Route index element={<SystemInfoShow />} />
But in the SystemInfoShow component, I'll use the useCustom instead of useShow It just don't have the show page UI.