sidenav questions

Classic Servoy
1

I’ve got a couple of questions about the sidenav webcomponent.

In a recent webinar it was briefly mentioned that the sidenav component could be made fully responsive.
Is there a sample to show how this is done?
Also how do I change the width of the main form when the sidenav is hidden
Is it possible to have multiple states when expanding?
For example only the icon as the first state, icon and text as a second state and completely hidden?

2

Do you mean the pixel size of the screen with the multiple states ?

for example only icon when the width is < 768 px? hidden > 1024 px etc?

Can you explain what you want to accomplish here?

3

I am looking for something like in this sample:

4

just put in 2 html divs 1 sidebar and 1 container.

where you play with de css media query. This css option captures your screen pixels (in example below)
Now you can set extra css classes in javascript and lets the css do the rest.
If you need more screen media query. Just add an extra media part in the css (example @media(min-width:768px) { /* css classes go here*/} )

maybe this small example get you started:

#sidebar {
position: absolute;
top: 45px;
left: 0px;
bottom: 0px;
width: 180px;
}

#container {
position: absolute;
top: 45px;
left: 180px;
right: 0px;
bottom: 0px;
}

@media(min-width:1024px) {

#sidebar.expanded {
width: 180px;
}
#sidebar.collapsed {
width: 45px;
}

#container.expanded {
left: 180px;
}
#container.collapsed {
left: 45px;
}

}

5

Hi Derk,

Thank you for your reply, but I am not sure how this relates to the sidenav component of servoy.
Do I need to edit the webcomponent files for this to work?

6

Personally I did not work with the sidenav of Servoy yet myself.

But normally what you assume could be possible or just override the css classes

But that al depends on how you build your component

7

jdbruijn:
I am looking for something like in this sample:
Bootstrap Snippet responsive sidebar menu - modified using HTML CSS jQuery

Check out this. It may be what you want.
https://www.servoyforge.net/projects/se … nents/wiki

8

goldcougar:
Check out this. It may be what you want.
https://www.servoyforge.net/projects/se … nents/wiki

Thanks for the tip Scott, I will check it out