Navbar improvement ideas

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.
  • ??
• 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?

Possible path: navbar module

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.

Alternative page headers: modules/zones visibility per screen size

I'm thinking it might be tricky for site admins to configure the top_modules and topbar_modules module zones to be responsive and work well and look good in small devices, especially if they're accustomed to putting banner ads or other content in those zones in addition to the typical logo, menu, and search and log-in forms (even these are probably not so easy).

Control module zone visibility

One solution for this is let them configure those zones as they always have, but have a selector for the whole zone to indicate "display in large screens only". The site then has a simpler navbar for small displays. For example, the top modules zone has the extra content for large displays, and the topbar zone displays at all screen sizes and has limited content so is nicely responsive.

Control module visibility

Or when configuring the modules for those zones, each module has a selector to indicate visibility per screen size, so heavy-content or large-size modules are hidden. But in this case the way to have two module zones working well in all screen sizes needs to be documented. Possibly the top zone would just have the logo/branding - a responsive image and some text - and the topbar zone would be the collapsing navbar.