Theme: Allow navigation menu to be always collapsed

[gnadelwartz]

For small devices and on module request, see SourceForge.

[iliajie]

Almost finished. Will do latest tests at night and you will have it. 😉

[gnadelwartz]

Unbelievable! You are a genius..

[iliajie]

Done. Please give it a good try before it goes to the final release.

[gnadelwartz]

nice, but I need to make the window very small to make the menu disappear.
on phone woerks as expected, on table no chance to hide menu, also when in portrait mode
any chance to.

• adjust with below witch menu disappers?
• diplay toggle button to always hide / schw menu?

[iliajie]

Kay, I don't understand what you're talking about. I added an option Always collapsed in theme settings, under Navigation Menu part.

[gnadelwartz]

Ok, didn't find it. I'll have an other look after boys day. Do you also implement a control for screen width for auto collapse? Am 7. März 2018 7:10:57 Nachm. schrieb Ilia Rostovtsev <notifications@github.com>:

…

Kay, I don't understand what you're talking about. I add an option _Always collapsed_ in theme settings, under Navigation Menu part. -- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: #1032 (comment)

[iliajie]

Screen width? Do you mean if the content (right) part will also get bigger? If so - of course I did!

[gnadelwartz]

Hi, back from boy's day :)

I like your implemenation and also found the permanent collapsed option .. nevertheless some whishes:

• there seems to be a fixed value around 720px for screen width, below which auto collapse is enabled. on my mobile it hides the menu by default, but not on tablet, even in portrait mode (uprigth). It would be nice to auto collapse menu if I go from landscape to portait mode.
  

• This may be solved by a an option to set the value below which auto collapse is enabled.
  

• when you open the collapsed menu the hamburger stays with blue color, while menu may have other color. It may look better if you change hamburger background color to the same used in menu when open:
  

• If you show it always like in the picture above, then a user may has the possibility to hide menu temporary, eg. for better viewing of big lists

hope it's explained better now :-)

[iliajie]

Sure, the theme is so simple in its core. Let's raise complexity a bit more! I'll try! 😉

[gnadelwartz]

Hey boy. who is Mr. Perfect ;-))

BTW: you may able to remove the "always hide" option if you interpret most rigth position of "Auto hide" slider as "always"

[datavectors]

I was posting comments at webmin forum but I guess I should post here on authentic-theme.
I have experimented with the new nav pane collapse feature.
My monitor resolution is 1024x768 in Ubuntu 16.04.

When the nav pane is collapsed the right pane expands to full screen width. However if I now show (uncollapse) the nav pane it in fact obscures part of the right pane still set at 100% width. I expected the left and right panes to adjust width.

I have learned by experimenting that when using a custom module I can dynamically change settings by changing values in
/etc/webmin/authentic-theme/settings.js

For example I can change settings_navigation_always_collapse=false;
to true then restart webmin.

This next point might be a separate issue but when I hover cursor over the pie diagrams in System Information page the cursor arrow changes to another image. I don't remember seeing this effect before. The cursor changes back to arrow when moved away from pie charts.

[iliajie]

Kay, I'm not sure why we should show the switch always. Having it in the same color as the menu - okay, sounds reasonable. I will do it. But there are around 10 themes, as far as I remember to go integration with.

I think there is no reason to make things more complex with the logic. We have the option to always hide the navigation menu. Go with it, if you need to? If you still think otherwise, please convince me.

@datavectors I didn't understand what you were trying to say. Sorry. What did not work for you?

[gnadelwartz]

I'm fine with your decision about the switch. any chance for adjustable auto collapse width?

[datavectors]

I will try to be clearer.

(1) Nav pane collapsed:

<===================================⇒ only right pane is displayed at 100% browser width
⇔ left nav pane is collapsed

(2) Nav pane expanded:

<===================================⇒ right pane is still displayed at 100% browser width
<=========> left nav pane is open at 264 px default width
and overlays the right pane

(3) Preferred display after expanding nav pane from collapsed state:

                    <========================⇒  right pane is displayed at (100% - 264 px) width

<=========> left nav pane is open at 264 px default width

[gnadelwartz]

If a user opens the collapsed menu he usually want's to go away, so why it's needed to resize the content window?

[iliajie]

Kay, okay. At first I made the switch (you call it hamburger) blend with the menu color. Give it a try.

[gnadelwartz]

very cool! l call it hamburger because the menu symbol looks like a hamburger with one paddy :-)

it's also called hamburger menu on android and iOS and others http://codetheory.in/android-navigation-drawer/

[iliajie]

Cool. Anyway, hamburgers are not healthy. 😉

[iliajie]

Okay, I have made a fix, that will keep the menu hidden for all devices with resolution lower than 1152px in the width. There are also changes at how fixed right slider behave. Now it's required minimum resolution of 1400px for it to be shown as fixed.

It's really easier now to work on devices with smaller screens. Give it a try and you will see.

Thank you all.

[gnadelwartz]

nice! works likea charm. first I was afraid 1152 is to big, but seems my tablet has a viewport of 1200*800 works perfekt!