how to expand CollapsedSidebar(showing Icons only) when clicking on icon and it is a dropdown

[FlexyMarkets]

my Navigation data

import DashboardIcon from '@mui/icons-material/Dashboard';
import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
import CellTowerOutlinedIcon from '@mui/icons-material/CellTowerOutlined';
import CurrencyExchangeOutlinedIcon from '@mui/icons-material/CurrencyExchangeOutlined';

export const NAVIGATION = [
{
segment: 'dashboard',
title: 'Dashboard',
icon: ,
},
{
segment: 'dashboard/setting',
title: 'Setting',
icon: ,
children: [
{
segment: 'profile',
title: 'Profile',
icon: ,
},
{
segment: 'wallet-address',
title: 'Wallet Address',
icon: ,
},
{
segment: 'bank-KYC',
title: 'Bank KYC',
icon: ,
},
{
segment: 'Set-transaction-password',
title: 'Set Transaction Password',
icon: ,
},
],
},
{
segment: 'dashboard/network',
title: 'Network',
icon: ,
children: [
{
segment: 'direct-team',
title: 'Direct Team',
icon: ,
},
{
segment: 'all-team',
title: 'All Team',
icon: ,
},
{
segment: 'unilevel',
title: 'Unilevel',
icon: ,
},
{
segment: 'business-history',
title: 'Business History',
icon: ,
},
],
},
{
segment: 'dashboard/income',
title: 'Income',
icon: ,
children: [
{
segment: 'level-income',
title: 'Level Income',
icon: ,
},
{
segment: 'matching-income',
title: 'Matching Income',
icon: ,
},
{
segment: 'staking-matching-income',
title: 'Staking Matching Income',
icon: ,
}
],
}
];

my dashboardLayout

import { Outlet } from 'react-router-dom';
import { createTheme } from '@mui/material/styles';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { NAVIGATION } from './Navigation';
import Footer from '../footer/Footer';
import { ReactRouterAppProvider } from '@toolpad/core/react-router';
import { Stack, Tooltip, IconButton } from '@mui/material';
import { ThemeSwitcher } from '@toolpad/core/DashboardLayout';
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';

const headerIcon = [
{
icon: ,
title: "Notification"
},
{
icon: ,
title: "Account"
},
{
icon:
}
]

const demoTheme = createTheme({
cssVariables: {
colorSchemeSelector: 'data-toolpad-color-scheme',
},
colorSchemes: { light: true, dark: true },
breakpoints: {
values: {
xs: 0,
sm: 1000,
md: 1200,
lg: 1536,
},
},
components: {
MuiListItem: {
styleOverrides: {
root: {
'&.Mui-selected': {
backgroundColor: 'red',
color: '#fff',
},
},
},
},
},
});

function headerIcons() {
return (
<Stack sx={{
flexDirection: "row",
gap: ".5rem",
alignItems: "center",
cursor: "pointer"
}}>
{
headerIcon.map((ele, i) =>

<IconButton sx={{ p: (i === 2) ? "0" : "auto" }}>{ele.icon}

)
}

)
}

function DashboardLayoutComponent() {

return (
    <ReactRouterAppProvider
        theme={demoTheme}
        branding={{
            title: "",
            logo: <img src="/logo512.png" alt="My Logo" />
        }}
        navigation={NAVIGATION}
    >
        <DashboardLayout
            sidebarExpandedWidth={290}
            slots={{
                toolbarActions: headerIcons,
            }}
        >
            <Outlet />
            <Footer />
        </DashboardLayout>
    </ReactRouterAppProvider>
);

}

export default DashboardLayoutComponent;

as you can see in my navigation I have three dropdown so the thing is when I am collapsing my sidebar I can see the icons only at sidebar so when I click to the icon which is belonging to the dropdown it is relocating me to the segment path and I can see the blank page instead I want it to expend the sidebar if it is a dropdown.... so please help me out how to do it?

as here in the image you can see the dashboard page because dashboard is not a dropdown it is itself a page

and now here you can see the blank screen as the setting is not it self a page it is a dropdown but as the sidebar is not expanding by clicking on the icon it is sending me to the segment path of the setting which is not a actual a path it is just a drop down and inside the drop down I have my pages setting is the parent I know I can expand the sidebar by clicking on the menu but what if someone is directly clicking on the icon I should not show the blank page instead I want to expand the side bar If it is dropdown then they can select the page from there.....

[apedroferreira]

Hi, yes, the collapsed version of the sidebar provides links to the parent routes, which does not match the expanded version of the sidebar.
The changes in #4276 will fix this by providing the same navigation in both versions of the sidebar, including nested items. We will try to include this change in one of the upcoming releases.

In the meantime, maybe you could set a fallback route where you currently have the blank page?

[aadimr]

when will be your upcoming releases? any rough idea?

[apedroferreira]

Probably in the next couple of weeks.