How to make collapse paneItem in navigationpane in fluent ui in flutter

Question

I am trying to do collapse paneItem in navigationpane after a lot of searcb and i didn't found anything about that if anyone used fluent ui with flutter and know how to do that it will be nice

That is mycode:

import 'dart:ui';

import 'package:fluent_ui/fluent_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FluentApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  int _selectedindex = 0;
  bool _visible = true;
  TextEditingController search = TextEditingController();
  final autoSuggestBox = TextEditingController();
  final values = ['Blue', 'Green', 'Yellow', 'Red'];
  String? comboBoxValue;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    search.text = 'Search';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return NavigationView(
      appBar: NavigationAppBar(
        title: Text(widget.title),
      ),
      pane: NavigationPane(
          displayMode: PaneDisplayMode.compact,
          onChanged: (newindex) {
            setState(() {
              _selectedindex = newindex;
            });
          },
          footerItems: [
            PaneItemSeparator(),
            PaneItem(
              icon: const Icon(FluentIcons.settings),
              title: const Text('Settings'),
            ),
          ],
          selected: _selectedindex,
          autoSuggestBox: AutoSuggestBox(
            controller: TextEditingController(),
            placeholder: 'Search',
            trailingIcon: Icon(FluentIcons.search),
            items: const ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
          ),
          autoSuggestBoxReplacement: const Icon(FluentIcons.search),
          items: [
            PaneItem(
                icon: const Icon(FluentIcons.settings),
                title: const Text('page 0')),
            PaneItemHeader(header: Text('data')),
            PaneItem(
                icon: const Icon(FluentIcons.settings),
                title: const Text('page 1')),
          ]),
      content: NavigationBody(index: _selectedindex, children: [
        ScaffoldPage(
          padding: EdgeInsets.only(top: 0),
          header: _visible
              ? InfoBar(
                  title: const Text('Update available'),
                  content:
                      const Text('Restart the app to apply the latest update.'),
                  severity: InfoBarSeverity.info,
                  onClose: () {
                    setState(() => _visible = false);
                  })
              : null,
          content: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 200,
                  child: AutoSuggestBox(
                      controller: autoSuggestBox,
                      items: const [
                        'Blue',
                        'Green',
                        'Red',
                        'Yellow',
                        'Grey',
                      ],
                      onSelected: (text) {
                        print(text);
                      }),
                ),
                SizedBox(
                  height: 20,
                ),
                SizedBox(
                  width: 200,
                  child: Combobox<String>(
                    placeholder: Text('Selected list item'),
                    isExpanded: true,
                    items: values
                        .map((e) => ComboboxItem<String>(
                              value: e,
                              child: Text(e),
                            ))
                        .toList(),
                    value: comboBoxValue,
                    onChanged: (value) {
                      // print(value);
                      if (value != null) setState(() => comboBoxValue = value);
                    },
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                FilledButton(
                  style: ButtonStyle(
                      backgroundColor: ButtonState.all(Colors.blue)),
                  onPressed: () {
                    // showDialog(
                    //   context: context,
                    //   builder: (context) {
                    //     return ContentDialog(
                    //       title: Text('No WiFi connection'),
                    //       content: Text('Check your connection and try again'),
                    //       actions: [
                    //         Button(
                    //             child: Text('Ok'),
                    //             onPressed: () {
                    //               Navigator.pop(context);
                    //             })
                    //       ],
                    //     );
                    //   },
                    // );
                  },
                  child: const Icon(FluentIcons.add),
                )
              ],
            ),
          ),
        ),
        const ScaffoldPage(
          header: PageHeader(
              title: Text(
            'Your Page 1',
            textAlign: TextAlign.center,
          )),
          content: Center(child: Text('Page 1')),
        ),
        const ScaffoldPage(
          header: PageHeader(
              title: Text(
            'Your Page 2',
            textAlign: TextAlign.center,
          )),
          content: Center(child: Text('Page 2')),
        ),
        const ScaffoldPage(
          header: PageHeader(
              title: Text(
            'Your Page 3',
            textAlign: TextAlign.center,
          )),
          content: Center(child: Text('Page 3')),
        ),
      ]),
    );
  }
}

I am trying to do multi-level of paneItem in navigationpane in fluent ui in flutter but i don't know how to do that if anyone used fluent ui with flutter and know how to do that it will be nice