History: Navbar improvement ideas
Preview of version: 3
Bootstrap has a mobile-first philosophy, so things are built to be usable on small devices first and then scaled up/modified to work well on larger displays.
Tiki comes from the other direction, made for pc displays. The legacy site header carries that baggage.
Goal: Have a useful and attractive site header/navbar that adapts well to all screen sizes, and is as flexible as possible in accommodating content of the site.
Approaches:
- Use Bootstrap code (or equivalent) as closely as possible.
- It'll scale naturally for all displays (plus).
- This limits large-display content - how to have banner ads, non-menu/search/login content, etc.(minus).
- Use legacy Tiki site header modules, etc.
- This displays fine in medium (maybe) and large screens.
- This is almost unusable in small displays as the site header take up the whole screen.
- Coping strategies
- Use Bootstrap visibility classes to display modules appropriately for each screen size (http://getbootstrap.com/css/#responsive-utilities-classes).
- Mostly this is to hide non-responsive modules in small views (plus).
- This means extra work at the admin-modules stage, and it's not documented yet (minus).
- Take advantage of the pagetop module zone to place a small-device menu that's hidden in larger views (currently in use at themes.to.o).
- Provides an escape from what could be a mess in the collapsed site header.
- This means making a duplicate menu and adding it in admin-menus.
- ??
- Use Bootstrap visibility classes to display modules appropriately for each screen size (http://getbootstrap.com/css/#responsive-utilities-classes).
- Next steps
- Make navbar with "super-module fluffy" custom module
- Should produce the desired collapsible header (plus).
- Why is a profile/custom module needed to provide a basic feature? (minus)
- Should alternative menu display ideas be introduced (slidebars -http://plugins.adchsm.me/slidebars/, etc.)?
- Is there a way to revise the code to get both a proper collapsing menu in small screens and the legacy site header contents/appearance in desktop view?
- Make navbar with "super-module fluffy" custom module
Possible path:
Is there a way to have, in module admin, a "navbar" module. This would be a type of "fluffy/super-module" with the special quality of having two parts: a navbar-header and a navbar-collapse section. This would implement the standard Bootstrap navbar construction. But in the Tiki way the contents would be configurable. The admin could choose what goes in the navbar-header section (site logo, site title, text, icon, etc.) and what goes in the navbar-collapse section (menu, search form, login form, non-menu link(s), text, notification icons, etc.). The element id would be set automatically. Maybe this would be a two step process in which the navbar module would be created and saved first, then its sections would appear as module zones, to receive their contents.