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
kapa.ai
kapa.ai256d 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.ai256d ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
evolutionary-blush
evolutionary-blush255d 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).
harsh-harlequin
harsh-harlequin255d 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.
More Posts
parent resource permissionI have two resource under a parent named settings. here settings is not an actual resource but we seswizzle create form RefinePageHeaderClassNames is not defineddefault generate is not properly workingSet Null as default value in useSelect``` const { selectProps } = useSelect<IUser>({ resource: "users", optionLabel: "name", accessControlProvider is set first but login is done afterwards so I get role afterwardsaccessControlProvider is set first but login is done afterwards so I get role afterwardsset a global stateset a global state variableProblem with using Autocomplete MUIThere are no errors when using Inferencer. As soon as I create the page, an error occurs.Make resource dynamic?Can we make resources dynamic according to user role?UI framework recommendationAre there any recommendations about UI frameworks for refine? Which one has best support by refine ahow to code Edit form with Chakra RadioGroup form componentunable to populate default value of radiowarnWhenUnsavedChangesin my create page I have a few mui elemenets and my own custom element. i passed warnWhenUnsavedChanInferencer customize queryHello! Can someone please tell me how I can customize the request in the Inferencer for graphql querSingular resource nameI'm looking for a way to set a resource name that is not pluralized, like `dashboard` singular. It suseForm with action edit adds a / after pathuseForm with action edit adds a / after pathrefine build with uglify option on viterefine build with uglify option on vite