Description

Hi folks

When I have nested children in my navigation bar and I toggle the compact button, the first-level child appears as a popup, but the second-level child does not. how to make it work ?

Not compact sidebar

Compact sidebar upon hovering

heres my MENU ITEMS:
export const MENU_ITEMS: NavigationMenuItem[] = [
{ label: 'Navigation', type: 'label' },
{
label: 'Transaction',
icon: 'i-material-symbols:inventory',
children: [
{
label: 'GL POS Sales Amount',
icon: 'i-material-symbols:article-shortcut-outline',
children: [
{
label: 'Process',
icon: 'uim:process',
to: '/pos-gl',
},
],
},
{
label: 'GL POS Sales Quantity',
icon: 'i-material-symbols:inventory',
children: [
{
label: 'Process',
icon: 'uim:process',
to: '/pos-inventory',
},
],
},
{
label: 'Purchase Order',
icon: 'i-icon-park-outline:order',
children: [
{
label: 'Load',
icon: 'material-symbols:database',
to: '/purchase-order/load',
},
{
label: 'Process',
icon: 'uim:process',
to: '/purchase-order/process',
},
],
},
{
label: 'PO Receiving',
icon: 'i-cuida:box-outline',
children: [
{
label: 'Load',
icon: 'material-symbols:database',
to: '/po-receiving/load',
},
{
label: 'Process',
icon: 'uim:process',
to: '/po-receiving/process',
},
],
},
{
label: 'AP Invoice',
icon: 'i-hugeicons:invoice-02',
children: [
{
label: 'Load',
icon: 'material-symbols:database',
to: '/ap-invoice/load',
},
{
label: 'Process',
icon: 'uim:process',
to: '/ap-invoice/process',
},
],
},
{
label: 'AP Payment',
icon: 'i-hugeicons:payment-01',
children: [
{
label: 'Load',
icon: 'material-symbols:database',
to: '/ap-payment/load',
},
{
label: 'Process',
icon: 'uim:process',
to: '/ap-payment/process',
},
],
},
],
},
],
},
];

Thank you nuxt ui fam.