absent-sapphire
absent-sapphire11mo ago

side bar tree view

How can i make the side bar work with a tree view with nested items using <ThemedSiderV2/>
5 Replies
kapa.ai
kapa.ai11mo ago
Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the provided extracts do not contain information on how to make the sidebar work with a tree view with nested items using <ThemedSiderV2/>. The extracts only provide information on how to customize the default <ThemedSiderV2/> component using its props or with the swizzle feature, and how to replace the default <ThemedSiderV2/> component by passing a custom component to the Sider prop. For more detailed information, you may want to refer to the official Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire
absent-sapphireOP11mo ago
@kapa.ai is it possibly to have the resources nested to get a tree view
kapa.ai
kapa.ai11mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, it is possible to have nested resources to get a tree view in the sidebar. Refine provides out-of-the-box support for multi-level menus. You can render menu items recursively to get a multi-level menu. You can update your resources in <Refine/> with meta.parent to nest them inside a label. Here is an example:
import { Refine } from "@refinedev/core";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { Layout } from "components/layout";

const API_URL = "<https://api.fake-rest.refine.dev";>

const App: React.FC = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
resources={[
{
name: "CMS",
},
{
name: "posts",
list: "/CMS/posts",
meta: { parent: "CMS" },
},
{
name: "categories",
list: "/CMS/categories",
meta: { parent: "CMS" },
},
]}
>
<Routes>
<Route
element={
<Layout>
<Outlet />
</Layout>
}
>
<Route index element={<NavigateToResource />} />
<Route path="/posts" element={<div>dummy posts page</div>} />
<Route path="/categories" element={<div>dummy categories page</div>} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};

export default App;
import { Refine } from "@refinedev/core";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { Layout } from "components/layout";

const API_URL = "<https://api.fake-rest.refine.dev";>

const App: React.FC = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
resources={[
{
name: "CMS",
},
{
name: "posts",
list: "/CMS/posts",
meta: { parent: "CMS" },
},
{
name: "categories",
list: "/CMS/categories",
meta: { parent: "CMS" },
},
]}
>
<Routes>
<Route
element={
<Layout>
<Outlet />
</Layout>
}
>
<Route index element={<NavigateToResource />} />
<Route path="/posts" element={<div>dummy posts page</div>} />
<Route path="/categories" element={<div>dummy categories page</div>} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};

export default App;
In this example, the "posts" and "categories" resources are nested under the "CMS" resource. This will create a tree view in the sidebar with "CMS" as a parent and "posts" and "categories" as children. For more information, you can refer to the Refine documentation on useMenu (https://refine.dev/docs/core/hooks/utilities/use-menu#multi-level-menus). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?