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•16mo 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•16mo ago

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

correct-apricot•16mo 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).

typical-coralOP•16mo 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.

Show show data on List page

Did you find this page helpful?