responsive look and right way of show/hide UI elements

Webix JS
1

I read article http://docs.webix.com/desktop__responsive_layout.html but I still wonder what is the correct way of building typical UI that look good for both desktop and mobile.
For example, I need on desktop UI to have two columns, left with list of items and right with main widgets. And for mobile I want left column to be hidden, but instead menu should be added on top of right column.
I’m using something like this to achieve this:

webix.ui({
	type:"line",
	responsive:true, 
	cols: [
		{ view:"list", id:"leftMenu",
			data:["Users", "Reports", "Settings"],
			ready:function(){
				this.select(this.getFirstId());

				if ($$('leftMenu').isVisible()) $$('headerMenu').hide();
				else $$('headerMenu').show();
			}
		},
		mainUI
	]
});

webix.event(window, "resize", function(){

	webix.delay(function(){
		if ($$('leftMenu').isVisible()) $$('headerMenu').hide();
		else $$('headerMenu').show();
	}, this, [], 500);
	
});

But I’m not sure that this is correct or easiest solution

2

I’m curious about this question as well. BTW @yurash, can you please indent all code so it shows properly?

3

Hello,

It is possible change layout from cols to rows, but “responsive” layouts do not allow to show menu on the top. Unfortunately, the library does not have a built-in alternative to your solution.

The easiest way would be using two different UIs. However, in this case UI won’t be changed on window resize:

...
    if(webix.env.touch)
        webix.ui({
            rows:[
                  topMenu,
                  mainLayout
            ]
        });
    else
        webix.ui({
            cols:[
                  leftMenu,
                  mainLayout
            ]
        });
...
4

Webix 4.0 will provide an extra events which will allow to describe such kind of operations ( show menu on top, when side menu is hidden )