[DashboardLayout] Add navigation actions

docs/data/toolpad/core/components/app-provider/AppProviderBasic.js

@@ -60,7 +60,7 @@ DemoPageContent.propTypes = {
 function AppProviderBasic(props) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('page');
 
  const router = React.useMemo(() => {
  return {

docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx

@@ -64,7 +64,7 @@ interface DemoProps {
 export default function AppProviderBasic(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('page');
 
  const router = React.useMemo<Router>(() => {
  return {

docs/data/toolpad/core/components/app-provider/AppProviderTheme.js

@@ -14,12 +14,12 @@ const NAVIGATION = [
  title: 'Main items',
  },
  {
- slug: '/page',
+ segment: '/page',
  title: 'Page',
  icon: <DashboardIcon />,
  },
  {
- slug: '/page-2',
+ segment: '/page-2',
  title: 'Page 2',
  icon: <TimelineIcon />,
  },
@@ -30,8 +30,8 @@ const customTheme = extendTheme({
  light: {
  palette: {
  background: {
- default: '#E2FAFF',
- paper: '#D9FAFF',
+ default: '#F9F9FE',
+ paper: '#EEEEF9',
  },
  },
  },
@@ -78,7 +78,7 @@ DemoPageContent.propTypes = {
 function AppProviderTheme(props) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('page');
 
  const router = React.useMemo(() => {
  return {

docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx

@@ -14,12 +14,12 @@ const NAVIGATION: Navigation = [
  title: 'Main items',
  },
  {
- slug: '/page',
+ segment: '/page',
  title: 'Page',
  icon: <DashboardIcon />,
  },
  {
- slug: '/page-2',
+ segment: '/page-2',
  title: 'Page 2',
  icon: <TimelineIcon />,
  },
@@ -30,8 +30,8 @@ const customTheme = extendTheme({
  light: {
  palette: {
  background: {
- default: '#E2FAFF',
- paper: '#D9FAFF',
+ default: '#F9F9FE',
+ paper: '#EEEEF9',
  },
  },
  },
@@ -82,7 +82,7 @@ interface DemoProps {
 export default function AppProviderTheme(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('page');
 
  const router = React.useMemo<Router>(() => {
  return {

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js

@@ -92,7 +92,7 @@ DemoPageContent.propTypes = {
 function DashboardLayoutBasic(props) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('dashboard');
 
  const router = React.useMemo(() => {
  return {

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx

@@ -96,7 +96,7 @@ interface DemoProps {
 export default function DashboardLayoutBasic(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('dashboard');
 
  const router = React.useMemo<Router>(() => {
  return {

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js

@@ -56,7 +56,7 @@ DemoPageContent.propTypes = {
 function DashboardLayoutBranding(props) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('dashboard');
 
  const router = React.useMemo(() => {
  return {

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx

@@ -60,7 +60,7 @@ interface DemoProps {
 export default function DashboardLayoutBranding(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('dashboard');
 
  const router = React.useMemo<Router>(() => {
  return {

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigationActions.js

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
+import PersonIcon from '@mui/icons-material/Person';
+import CallIcon from '@mui/icons-material/Call';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import CallMadeIcon from '@mui/icons-material/CallMade';
+import CallReceivedIcon from '@mui/icons-material/CallReceived';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+const demoTheme = extendTheme({
+ breakpoints: {
+ values: {
+ xs: 0,
+ sm: 600,
+ md: 600,
+ lg: 1200,
+ xl: 1536,
+ },
+ },
+});
+
+function DemoPageContent({ pathname }) {
+ return (
+ <Box
+ sx={{
+ py: 4,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ textAlign: 'center',
+ }}
+ >
+ <Typography>Dashboard content for {pathname}</Typography>
+ </Box>
+ );
+}
+
+DemoPageContent.propTypes = {
+ pathname: PropTypes.string.isRequired,
+};
+
+function DashboardLayoutNavigationActions(props) {
+ const { window } = props;
+
+ const [pathname, setPathname] = React.useState('contacts');
+
+ const router = React.useMemo(() => {
+ return {
+ pathname,
+ searchParams: new URLSearchParams(),
+ navigate: (path) => setPathname(String(path)),
+ };
+ }, [pathname]);
+
+ const [popoverAnchorEl, setPopoverAnchorEl] = React.useState(null);
+
+ const isPopoverOpen = Boolean(popoverAnchorEl);
+ const popoverId = isPopoverOpen ? 'simple-popover' : undefined;
+
+ const handlePopoverButtonClick = (event) => {
+ event.stopPropagation();
+ setPopoverAnchorEl(event.currentTarget);
+ };
+
+ const handlePopoverClose = (event) => {
+ event.stopPropagation();
+ setPopoverAnchorEl(null);
+ };
+
+ // Remove this const when copying and pasting into your project.
+ const demoWindow = window !== undefined ? window() : undefined;
+
+ return (
+ // preview-start
+ <AppProvider
+ navigation={[
+ {
+ segment: '/contacts',
+ title: 'Contacts',
+ icon: <PersonIcon />,
+ action: <Chip label={7} color="primary" size="small" />,
+ },
+ {
+ segment: '/calls',
+ title: 'Calls',
+ icon: <CallIcon />,
+ action: (
+ <React.Fragment>
+ <IconButton
+ aria-describedby={popoverId}
+ onClick={handlePopoverButtonClick}
+ sx={{ ml: 1 }}
+ >
+ <MoreHorizIcon />
+ </IconButton>
+ <Menu
+ id={popoverId}
+ open={isPopoverOpen}
+ anchorEl={popoverAnchorEl}
+ onClose={handlePopoverClose}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'right',
+ }}
+ disableAutoFocus
+ disableAutoFocusItem
+ >
+ <MenuItem onClick={handlePopoverClose}>New call</MenuItem>
+ <MenuItem onClick={handlePopoverClose}>Mark all as read</MenuItem>
+ </Menu>
+ </React.Fragment>
+ ),
+ children: [
+ {
+ segment: '/made',
+ title: 'Made',
+ icon: <CallMadeIcon />,
+ action: <Chip label={12} color="success" size="small" />,
+ },
+ {
+ segment: '/received',
+ title: 'Received',
+ icon: <CallReceivedIcon />,
+ action: <Chip label={4} color="error" size="small" />,
+ },
+ ],
+ },
+ ]}
+ router={router}
+ theme={demoTheme}
+ window={demoWindow}
+ >
+ <DashboardLayout>
+ <DemoPageContent pathname={pathname} />
+ </DashboardLayout>
+ </AppProvider>
+ // preview-end
+ );
+}
+
+DashboardLayoutNavigationActions.propTypes = {
+ /**
+ * Injected by the documentation to work in an iframe.
+ * Remove this when copying and pasting into your project.
+ */
+ window: PropTypes.func,
+};
+
+export default DashboardLayoutNavigationActions;