Left Panel Fix/Unfix controlled by menu bars

[jimbok8]

I would like to have a left panel that:

• slides out when the menu bars are clicked
• no overlay
• content width is reduced
• menu bars remain visible
• clicking menu bars again hides left panel
• content width is increased

I have tried some variations of Layout but cannot get to work as above. Principally, the menu bars always disappear so there is no means of closing the left panel.

Could this be a future option?
Is there a workaround to achieve this now?
Thanks.
Jim

[vegegoku]

We can implement this in our next milestone for sure.
The workaround is a little bit complex, since you need to call fixLeftPanelPosition every time you open the menu and call unfixLeftPanelPosition every time you close it, and this wont show the menu-bars when it is open so you need to add a close button to the menu itself.

[jimbok8]

I have finally managed to get a 'workaround' going! Hopefully this may be of use to some, or at least give an idea of what I would like to be a 'standard' feature. Thanks. Jim

package com.design57;

import com.google.gwt.core.client.EntryPoint;
import static elemental2.dom.DomGlobal.document;
import org.dominokit.domino.ui.Typography.*;
import org.dominokit.domino.ui.tree.*;
import org.dominokit.domino.ui.header.*;
import org.dominokit.domino.ui.button.*;
import org.dominokit.domino.ui.layout.*;
import org.dominokit.domino.ui.search.*;
import org.dominokit.domino.ui.cards.*;
import org.dominokit.domino.ui.tabs.*;
import static org.jboss.elemento.Elements.b;
import org.dominokit.domino.ui.icons.*;
import org.dominokit.domino.ui.collapsible.*;
import org.dominokit.domino.ui.grid.*;
import org.dominokit.domino.ui.style.*;
import elemental2.dom.*;
import org.dominokit.domino.ui.utils.*;
/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class App implements EntryPoint {

    private Layout layout;

    /**
     * This is the entry point method.
     */
    @Override
    public void onModuleLoad() {

//===================================================================================
// new anonymous class with additions

        layout = new Layout("TrackMap") {       
            
            boolean leftPanelOpen = false;
            
            public void myToggleLeftPanel(){
                if (!leftPanelOpen){
                    myShowLeftPanel();
                    leftPanelOpen = true;
                } else {
                    myHideLeftPanel();
                    leftPanelOpen = false;
                }
            }
            
            // overirde show(ColorScheme theme) to install new button
            @Override
            public Layout show(ColorScheme theme) {         
        
                Icon ic = Icons.ALL.menu();
                ic.setCssProperty("font-size", "30px");
                ic.setCssProperty("color", "white");
            
                Button burger = Button.create(ic).addClickListener(evt -> {
                            myToggleLeftPanel();
                });
                
                burger.setCssProperty("margin-left", "-3px");
                burger.setCssProperty("margin-top", "8px");
                burger.setCssProperty("background-color", "#2196F3");
                burger.setCssProperty("box-shadow", "0px 0px");
            
                getNavigationBar().getMenuToggleItem().appendChild(burger);

                return super.show(theme);
            }
            
            
            @Override
            public Layout showLeftPanel() { 
                return this;
            }           
            
            public Layout myShowLeftPanel() {
                DominoElement.of(document.body).removeCss("ls-closed");

                getLeftPanel().removeCss("slide-out-left");
                DominoElement.of(document.body).addCss("panel-open");

                DominoElement.of(document.body).addCss("l-fixed");
                return this;
            }

            @Override
            public Layout hideLeftPanel() {             
                return this;
            }

            public Layout myHideLeftPanel() {
                if (!Style.of(document.body).containsCss("ls-closed")) Style.of(document.body).addCss("ls-closed");
                DominoElement.of(document.body).removeCss("l-fixed");
                DominoElement.of(document.body).removeCss("panel-open");
                getLeftPanel().addCss("slide-out-left");
                return this;
            }

        };
//===================================================================================
// below here is standard layout setup to just add some content

        String SAMPLE_TEXT = "Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an. Pri ut tation electram moderatius. Per te suavitate democritum. Duis nemore probatus ne quo, ad liber essent aliquid pro. Et eos nusquam accumsan, vide mentitum fabellas ne est, eu munere gubergren sadipscing mel.";

        layout.apply(self -> self.getTopBar()
            .appendChild(LayoutActionItem.create(Icons.ALL.settings())
                    .addClickListener(evt -> layout.toggleRightPanel()))
            );
                

        layout.getRightPanel()
            .appendChild(Tree.create("Menu")
                    .appendChild(TreeItem.create("Menu 1", Icons.ALL.widgets()))
                    .appendChild(TreeItem.create("Menu 2", Icons.ALL.widgets()))
                    .appendChild(TreeItem.create("Menu 3", Icons.ALL.widgets()))
                    .addItemClickListener(treeItem -> {
                        layout.setContent(Card.create(treeItem.getValue())
                                .appendChild(Paragraph.create("Welcome to domino-ui , you are viewing " + treeItem.getValue() + " content")));
                    })
            .element()
            );
                
        layout.getLeftPanel()       
           .appendChild(
                Accordion.create().appendChild(
                        AccordionPanel.create(
                                "Menu item 1", TextNode.of("Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an."))
                                .show())
                    .appendChild(
                        AccordionPanel.create(
                                "Menu item 2", TextNode.of("Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an.")))
                    .appendChild(
                        AccordionPanel.create(
                                "Menu item 3", TextNode.of("Lorem ipsum dolor sit amet, ut duo atqui exerci dicunt, ius impedit mediocritatem an."))
                )               
            .element()
            );
                

        layout.getContentPanel().appendChild(
            Card.create(
                    "EXAMPLE TAB",
                    "Add quick, dynamic tab functionality to transition through panes of local content")
                .appendChild(
                    TabsPanel.create()
                        .appendChild(
                            Tab.create("HOME")
                                .appendChild(b().textContent("Home Content"))
                                .appendChild(Paragraph.create(SAMPLE_TEXT)))
                        .appendChild(
                            Tab.create("PROFILE")
                                .appendChild(b().textContent("Profile Content"))
                                .appendChild(Paragraph.create(SAMPLE_TEXT)))
                        .appendChild(
                            Tab.create("MESSAGES")
                                .appendChild(b().textContent("Messages Content"))
                                .appendChild(Paragraph.create(SAMPLE_TEXT))
                                .activate())
                        .appendChild(
                            Tab.create("SETTINGS")
                                .appendChild(b().textContent("Settings Content"))
                                .appendChild(Paragraph.create(SAMPLE_TEXT)))
                )
                .element()
                );
        layout.show(ColorScheme.BLUE);                          
    }
}

[vegegoku]

Now the user can set the left panel open style and pick one of OVERLAY or SHRINK_CONTENT

layout.setLeftPanelOpenStyle(Layout.LeftPanelOpenStyle.SHRINK_CONTENT);