PDA

View Full Version : [CLOSED] Collapse NavBar when it does not fit screen



cslocus
Oct 24, 2019, 1:52 PM
Hello again :P

So using bootstrap, I can have a navbar that when the screen is small enough, will change into a button. How can I do that?

Example: 25294 is actually 25295

fabricio.murta
Oct 24, 2019, 5:45 PM
Hello @cslocus!

Although this is still in the "responsive" subject, the problem is relatively different here. So I moved your post to a new thread so it becomes focused on your specific inquire.

And for the feature you want, the closest I can think of it would be with Tab Panels, like illustrated in this example:

- Tab Panel > Basic > Advanced Tabs (https://mvc5.ext.net/#/TabPanel_Basic/Advanced_Tab/) MVC example

But this is hardly a navigation bar. For this task, we have the Breadcrumb component. While it does not collapse into an icon, when space is not enough, the breadcrumb becomes scrollable. To see this aspect of the breadcrumb, just get the example below, transform the ext:Panel into an ext:Window and then open the example and resize the window to make it too narrow to fit the breadcrumb:

- Toolbar > Breadcrumb > Overview (https://examples5.ext.net/#/Toolbar/Breadcrumb/Overview/)

You can see further documentation on the component in Sencha documentation page for Ext.toolbar.Breadcrumb (https://docs.sencha.com/extjs/7.0.0/classic/Ext.toolbar.Breadcrumb.html).

Hope this helps!

cslocus
Oct 25, 2019, 11:50 AM
Oh well :(

I'll try and work something out, but thank you anyway! I'll certainly use the breadcrumb elsewhere.

Please close the thread.

fabricio.murta
Oct 25, 2019, 9:39 PM
Okay, closing.

One idea would be, building a button with menu (7th sample in this example (https://examples5.ext.net/#/Buttons/Basic/Overview/)) instead of the breadcrumb when width is too narrow, and using the breadcrumb component when width is enough.

It would be just a matter of dynamically adding the component on load (given the rendered width of the component containing the nav bar -- be it the viewport, a window, panel or a grid); and also monitor the resize event. It could work pretty well, but you'd have to rely more on client-side events and coding (javascript) for best performance rebuilding or deciding which component to draw.

Hope this helps!