I found this dashboard layout on the MUI website and integrated it into my project, installed all the dependencies, but something strange is happening with the way it handles the main content. No matter how I modify the sidebar, it always tries to route based on the segment. The dashboard is in the /admin folder, and the menu items should point to routes like /admin/tickets and /admin/tools, etc.
When I provide /tickets in the segment, it only routes to localhost/tickets, and if I provide /admin/tickets, it literally routes to this exact URL. I tried adding the path, but it still routes based on the segment. Could anyone help? I’ve read through the entire MUI documentation, but I can’t find the solution.
BenUK is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
"use client"
import * as React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
import CategoryIcon from '@mui/icons-material/Category';
import BuildIcon from '@mui/icons-material/Build';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
const NAVIGATION = [
{
segment: 'tickets',
title: 'Tickets',
icon: <ConfirmationNumberIcon />,
path: '/admin/tickets',
},
{
segment: 'categories',
title: 'Categories',
icon: <CategoryIcon />,
path: '/admin/categories',
},
{
segment: 'tools',
title: 'Tools',
icon: <BuildIcon />,
path: '/admin/tools',
},
];
const demoTheme = createTheme({
cssVariables: {
colorSchemeSelector: 'data-toolpad-color-scheme',
},
colorSchemes: { light: true, dark: true },
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 600,
lg: 1200,
xl: 1536,
},
},
});
export default function DashboardLayoutBranding({ children }) {
return (
<ThemeProvider theme={demoTheme}>
<AppProvider
navigation={NAVIGATION}
branding={{
logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
title: "Ben's Ticketing System",
}}
>
<DashboardLayout>
{children}
</DashboardLayout>
</AppProvider>
</ThemeProvider>
);
}
DashboardLayoutBranding.propTypes = {
children: PropTypes.node.isRequired,
};
BenUK is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.