How to make a submenu unfoldable like in primefaces

Question

I'm using the newest version of Primefaces+ JSF and want to build a website with a sidemenu like in the primefaces (see the sidebar on the left to navigate)

here are some screenshots to show u more of the example i want in my code:

here u can see a menu button folded:

here u can see the menu button unfolded: how can i implement this?

I WANT THIS. how can i implement this with primefaces and using JSF. Its important that this function is FOLDABLE. I want to be able to click on Contextmenu and make it open the submenu with items

                    <p:submenu label="Contextmenu"
                               icon="pi pi-comments"
                               widgetVar="submenuWidgetVar"
                               onstart="PF('statusDialog').show()"
                               oncomplete="PF('statusDialog').hide()"
                               action="#{mainView.navigateTo('communicationchannel')}"
                               update=":contentdiv :topbardiv :sidebarmenu"
                               style="padding-inline: 0.5em; padding-block: 1em; font-weight: #{menuManager.getItemFontWeight(6)}"
                               onclick="PF('submenuWidgetVar').toggle()">

                        <p:submenu label="Additional Items"
                                   icon="pi pi-folder"
                                   widgetVar="additionalItemsWidgetVar"
                                   onclick="PF('additionalItemsWidgetVar').toggle()">

                            <p:menuitem value="Item 1"
                                        label="Item 1"
                                        onclick=""/>
                            <!-- Additional components or content for the first listed item -->

                            <p:menuitem value="Item 2"
                                        label="Item 2"
                                        action="#{mainView.handleItem2Click}"/>
                            <!-- Additional components or content for the second listed item -->

                            <!-- Add more p:menuitem components as needed -->

                        </p:submenu>