Collapse Dashboard like on FreeNAS Beta UI ?

[opnsenseuser]

It solely depends on the problem it tries to solve. What are you trying to solve?


Cheers,
Franco

Actually, I just wanted to know what's possible. I'm just still scouting and reading in the mvc matter.
I have already considered two approaches.

One option would be to hover an arrow next to or below the navigation bar. just do not know exactly where and how this should look.
the second possibility would be as in freenas a symbol in the headline to display. this would then reduce or enlarge the navigation bar.

for the symbol in the header definitely a own class or a div would have to be generated so that it can be positioned. the same probably applies to the arrow next to or below or above the navigation bar.

at least that's my current idea.

best regards rené

[franco]

If we need classes in CSS for reuse or vital components (like the menu) that's fine. If this is about an arbitrary page that needs better styling it's best avoided (exceptions apply for specific reasons).

Second option sounds sensible, there's also an "opnsense" header symbol to collapse the full logo to and we already have the menu icons and skip the text. Easier said than done, but I hope you get what I mean to say. :)


Cheers,
Franco

[opnsenseuser]

If we need classes in CSS for reuse or vital components (like the menu) that's fine. If this is about an arbitrary page that needs better styling it's best avoided (exceptions apply for specific reasons).

Second option sounds sensible, there's also an "opnsense" header symbol to collapse the full logo to and we already have the menu icons and skip the text. Easier said than done, but I hope you get what I mean to say. :)


Cheers,
Franco

I do not want to bother you for long. but maybe you can help me or give a tip!

I'm currently coding the navigation collapse for the navigation sidebar by opnsense.
After I have dealt with the Grid System of bootstrap like col-xm-12, etc. and I understood how bootstrap works, I wanted to test a very simple button in the head div of opnsense.
I know that it depends on the columns used, etc. whether and from what resolution, etc. things displayed or not displayed.

But now I have a problem, that I can not explain myself.

If I insert a button in the default.volt or in the base_menu_system.volt, it will only be displayed on certain pages. no matter where I insert this. when i click on dashboard, the button never appears, but when i click for example on service "web-proxy" or service "hello world" the button appears. Why? where do I have to start here? see my screenshots.

I want the button to appear on every page! actually I would like to do it like freenas!

I would be grateful for every tip.

Regards rene

[franco]

Hi René,

The button only appears on MVC pages, the dashboard and others are not MVC pages, you can see from the *.php at the end. This is normal and why I said please focus on one type of pages, we will fix the others when the time comes. This is not a blocker.

The other code is in /usr/local/www/fbegin.inc


Cheers,
Franco

[opnsenseuser]

I just wanted to show you the current interstate of my sidebar project.

The sidebar is enlarged to the original sidebar in a mouseover. if you leave the area of ​​the sidebar with the mouse, it will be collapsed again and the content will be wider. so I think it was desired.

I'm not quite finished yet. There have to be some visual and small technical adjustments.
I'm not completely satisfied yet.

Technically I use a short javascript and the rest is unchanged with bootstrap or css.

If I have more news, I will post it here again.

best regards to the whole community! :-)

[opnsenseuser]

I opted for another solution, but I think it is better.

Here is a new intermediate.

regards rené

[fvanroie]

Neat! That looks very cool indeed. Good job!

[marjohn56]

Very cool indeed... Nice work René 8)

[opnsenseuser]

I have now put my idea in a nutshell.
I do not know if that is desirable at all, but it would be the logical progression for me if you want a collapsed sidebar.
What do you think?

see my screenshots

[marjohn56]

Well I like it... but that's just me. I'm easily pleased. :)

[opnsenseuser]

Well I like it... but that's just me. I'm easily pleased. :)

thank you, Martin
I wonder if this is also what Franco and the community want, or should I just reduce the layout to the sidebar?

best regards, rene

By the way....this Sidebar is fully working

[marjohn56]

I'm sure Franco, Ad and all the others will chime in with their thoughts.

[opnsenseuser]

Technical description:

With the arrow in the "head" area you can switch between the normal sidebar and the collapsed sidebar.

Currently you can select by hover the main menu and by clicking on this you get as usual in the next level->This is what i would like to change.
Would be very happy to serve the sidebar only by hover.
So also to reach the lower levels.

But to all left, all sublinks which have one or more sublinks have to get a visual support.
Otherwise you would have to select each link per hover to determine where there are more submenus.

Of course, I have also taken on the Tablet view, which is already integrated in opnsense, taken into account. So if the window size is smaller than a certain value, the arrow disappears in the head area and the Tablet dropdown menu button appears as before.

So what do you think franco? What do you think community ?

Please give me your thoughts and inspiration ?

regards rené

[franco]

Hi René,

I really like it!

The collapsible option is certainly best. We can store it in the browser session so it's remembered for all pages and also offer a default setting for normal or collapsed so it's that way always after login.

Are you ready for a PR? :)


Cheers,
Franco

[opnsenseuser]

Hi Franco,

please give me until Sunday time. I want to fix a few things.
And I would ask you if you find something that does not fit in the source code or should be changed, change or tell me. I am not perfect. Besides, I'm sure you can tweak it. Maybe some pros can test and tweak the thing.

thanks franco.
I will contact you on sunday and will then send the individual files main.css main.scss and the default.volt and the fbegin.inc to Martin. Is that alright for you if we do that?

best regards
René