Show parent Nav as active as well

[gazi786]

If a dependent route is selected how can I make the parent nav active as well. That is have the Mui-selected class attached to the parent node as well.

[apedroferreira]

Hi, you should be able to make it work with navigation pattern matching? https://mui.com/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Otherwise feel free to share your specific configuration!

[gazi786]

Since the navigation is recursively rendered using the component:

<DashboardSidebarSubNavigation
        subNavigation={navigation}
        onLinkClick={handleNavigationLinkClick}
        isMini={isMini}
        isFullyExpanded={isNavigationFullyExpanded}
        hasDrawerTransitions={hasDrawerTransitions}
        selectedItemId={selectedItemIdRef.current}
      />

in the DashboardLayout component...

So, would it be easy to add a prop, say, isParentActive, that adds the Mui-selected class to the Parent or even use the selectedItemId reference to implement the logic?

[gazi786]

Hi, you should be able to make it work with navigation pattern matching? https://mui.com/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Otherwise feel free to share your specific configuration!

trying this but pattern changing the url.

Do I have to add the paths to my createBrowserRouter?

https://codesandbox.io/p/sandbox/dazzling-taussig-y7ld4c?from-embed=

[gazi786]

Got it using pattern matching; we can achieve what I was after. Just play around with the regex patterning.

[gazi786]

Hi, you should be able to make it work with navigation pattern matching? https://mui.com/toolpad/core/react-dashboard-layout/#navigation-pattern-matching

Otherwise feel free to share your specific configuration!

if working with react-router

set your route...

dynamic route:

const RedirectToSync = () => <Navigate to="sync" replace />;
const baseRoutes = [
    {
        path: '',
        component: Dashboard,
        isPrivate: true,
        hideTabs: true
    },
    {
        path: '/',
        component: Dashboard,
        isPrivate: true,
        hideTabs: true
    },
    {
        path: '/utilities',
        component: Utilities,
        isPrivate: true,
        hideTabs: true,
        children: [
            {
                path: '',
                component: RedirectToSync
            },
            {
                path: 'sync',
                component: SyncRefresh
            },
            {
                path: 'reset',
                component: Reset
            }
        ]
    }
];

In your component:

const UtilitiesContainer = () => {
    let navigate = useNavigate();

    const location = useLocation();

    const parentPath = location.pathname.startsWith('/utilities');

    const activeTab = location.pathname.split('/').pop();

    const handleTabChange = (tab) => {
        navigate(`/utilities/${tab}`);
    };

    return (
        <Grid container spacing={2} size={12}>
            {/* Vertical Tabs */}
            <Grid size={{ xs: 12, lg: 3 }}>
                <AppBar className="container-appbar">
                    <Toolbar className="container-toolbar">
                        <Typography variant="h6" noWrap>
                            Tools
                        </Typography>
                    </Toolbar>
                </AppBar>
                <Paper elevation={2} sx={{ borderRadius: '5px', px: 0 }}>
                    {parentPath && (
                        <List
                            className="container-nav-list"
                            orientation="vertical"
                            //value={currentTab} // Track the current path
                            aria-label="Utility Navigation"
                            sx={{ borderRight: 1, borderColor: 'divider' }}>
                            {utilitiesNavigation.map((nav, index) => (
                                <Box key={index}>
                                    <ListItem className="container-nav">
                                        <ListItemButton
                                            className={`container-nav-item ${
                                                activeTab === nav.actionTab ? 'Mui-selected' : ''
                                            }`}
                                            selected={activeTab === nav.actionTab}
                                            onClick={() =>
                                                handleTabChange(nav.actionTab || 'sync')
                                            }>
                                            <ListItemIcon>{nav.icon}</ListItemIcon>
                                            <ListItemText
                                                primary={nav.label}
                                                secondary={nav.description}
                                            />
                                            {activeTab === nav.actionTab && (
                                                <ArrowForwardIosOutlinedIcon
                                                    sx={{ marginLeft: 'auto' }}
                                                />
                                            )}
                                        </ListItemButton>
                                    </ListItem>
                                    <Divider component="li" sx={{ width: '100%' }} />
                                </Box>
                            ))}
                        </List>
                    )}
                </Paper>
            </Grid>

            <Grid size={9} sx={{ flex: 1 }}>
                <Paper elevation={2} sx={{ borderRadius: '5px' }}>
                    <AppBar className="container-appbar">
                        <Toolbar className="container-toolbar">
                            <Typography variant="h6" noWrap>
                                {
                                    utilitiesNavigation.find((nav) => activeTab === nav.actionTab)
                                        ?.label
                                }
                            </Typography>
                        </Toolbar>
                    </AppBar>

                    <Outlet />
                </Paper>
            </Grid>
        </Grid>
    );
};

UtilitiesContainer.displayName = 'UtilitiesContainer';
export default UtilitiesContainer;

//Navigation that goes into AppProvider

<AppProvider
navigations:{{
        kind: 'header',
        title: 'Application Tools'
    },
    {
        segment: 'utilities',
        title: 'Utilities',
        icon: <BuildOutlinedIcon />,
        pattern: 'utilities{/:actionTab}*'
    }}