SideBar Menu

Support
#1

Tried my first sideBar menu, looks beautiful.
I have few questions:

  1. Is it possible to make it re-sizable manually?
  2. Will this side bar menu be hidden when opened from a small device, say mobile automatically or I have to write code?

Any plan to demo different possibilities?

#2

Further,
For #1 above, I’m using v split that meets partial needs but it will be better if we can have option to click that will keep the side bar menu pushed to the left hidden and it can be made visible by an action

By #2 I’m meaning typical menu behaviour between desktop and smartphone client.

#3

Hi,

You can use SplitPanel and relative width 100% for menu panel to allow users to resize menu panel. If you want to hide menu completely by some action - just use setVisible(false/true) for menu panel.

We are going to add responsive CSS styles and responsive main window template, but this functionality will be released later in one of the next bug fix versions. If you want to have responsive menu right now then you can write this CSS manually, DOM structure of SideMenu component is designed to be as flexible as possible with custom CSS.

#4

Thanks. I would rather wait for the next bug fix release.

#5

Hi,

In case 1. you have to rework your template and move menu header out of the scrollbar, currently, default CSS rules do not support this behaviour. For 2. question I recommend adding/removing your own stylename for hiding/opening mode of panel for sideMenuWrap component.

#6

Hi
I am using the new template for responsive side bar menu from the Studio. It’s working very good. I have some improvement requirements and need help.

  1. when I have menu menu items, especially expanded the header of the side bar panel moves up. How can I keep the header portion of the left-side bar menu panel can be kept fixed. I want only the menu part to be scrolled. see image: menu1
  2. from user point of view, sometimes the side bar menu needs to be hidden to give more space even in desktop. How can we add a small icon/button and trigger this manually on demand?

menu1

#7

Hi Yuriy
I have modified the standard sidebar menu and now teh scroll bar only scrolls under the header/log of the sidebar menu (see attached image menu3).

To achieve this, I have used vbox for sideMenuPanel instead of cssLayout.

However, I have lost the responsiveness. Is it possible we can bring back the responsiveness while using vbox? If not any other options that i can explore?

menu3

#8

No, you cannot bring responsiveness for vbox child components. It is supported only inside of CssLayout, since responsive rules affect layout in a web browser.