Replace/update toolbar with a responsive/touch-friendly version (Replace with Admin Menu)

[quicksketch]

Drupal 8 updated the Toolbar module so that it has a "mobile mode" which displays along the left-side of the screen. There is a D7 backport of this functionality at https://drupal.org/project/navbar.

The situation for Backdrop is slightly different. We've removed the Shortcut functionality from Backdrop in #76, which is the primary reason for Navbar being a menu of menus. Instead of a Navbar-like interface, I'd love to see Backdrop's toolbar take an approach that is closer to admin_menu. I'm hoping for something similar to this:

• The toolbar top-level navigation is the root items in the administration menu (like D7 admin_menu).
• The toolbar provides hover-over navigation for desktop computers (again like admin_menu), but also behaves like a mobile (hamburger) menu on small screens. The Flexnav library demonstrates this functionality extremely well, though we don't necessarily need to use that library.
• I love the search functionality of admin_menu 3.x, but to help reduce confusion with the site-wide search, it may be better to put the search inside the "Help" menu, mimicking the menu-searching functionality of Mac OS X and Google Docs.
• The toolbar should be extensible (like Toolbar in D8) to allow other modules to provide other top-level functionality options (like the clear-cache menu or user switcher provided by admin_menu).

[Bojhan]

I would agree with this approach. I think that admin_menu works really well. The search functionality could still use some work. I think that people will always assume it works for all pieces of content from admin to their actual site.

[behindthepage]

I agree too. The first thing I did with every drupal site was to disable toolbar and install admin_menu.

[quicksketch]

Of the potential starting points, I think the Admin Menu module itself is the right module to start with. The existing options:

• Navbar: The D7 Backport of Toolbar requires all kinds of dependencies that we probably won't have in Backdrop: Underscore, Modernizr, Backbone, and Breakpoints.
• D8 Toolbar: Basically all the same dependencies as the D7 backport, only all in core.
• Admin Menu: Easily compatible with Backdrop, no library dependencies, but no responsive or touch support. Unfortunately bloated with a bit too much contrib functionality.
• D7 Toolbar: Extremely simple but no dropdown functionality at all. Also not responsive.

Of these, admin menu is definitely the easiest module to adapt to our purposes, so I've been working on trimming it down and adding the critical functionality (touch support, responsive) that we require.

[quicksketch]

Okay, I filed backdrop/backdrop#207 to get this rolling. Sorry I've been working on this the last few days without posting an update.

It's hard to see from the pull request how much changed from the D7 version, so I made a diff of the overall changes as well:
https://gist.github.com/quicksketch/fffaaa941a3f0ab926c8

Here are the changes summarized:

• Converted variables to config system.
• Merged in the appearance of the "admin_menu_toolbar" submodule into the main module.
• Combined the RTL stylesheet with the main stylesheet.
• Eliminated use of "hover" in the CSS and JS, since hover events are not supported on touch-devices. Added in event handling for touchstart and touchend, making it so the menu can be operated with touch devices consistently.
• Added responsive behavior to window resizing. If the window becomes too narrow, all of the admin menu moves into a single dropdown. Likewise all "extra" functionality (search, user links, logged-in users) collapses when needed.
• Tweaked the "search" functionality to improve the UX and work on touch devices.
• Removed a bunch of contrib-specific integration, including Devel module integration (user switching), Drupal.org issue queue links, toggling developer modules, and various admin interface "tweaks" that aren't related to the menu at all.
• Moved output and theming code from .module to .inc to reduce loading.
• Updated tests to accommodate for changes.

I'll work on testing this functionality over the next couple of days, but I'd also love any feedback. Design-wise, I largely avoided anything new (i.e. there's no hamburger icon yet) and I didn't create CSS for the a "hamburger mobile mode", since that will also require some styling. At this point it's basically just a touch- (but not necessarily mobile-) friendly version of Admin Menu.

[quicksketch]

Screenshots in action. All of these are from a Nexus 7 Android tablet, but I've also tested successfully on an iPhone 4, IE 8/9/10, Firefox, and Chrome. The module automatically collapses the "extra" items first if there is not enough space, then collapses the entire menu into a dropdown if there's still not enough space.

Full menu mode (top level items expanded, the "ugly blue" is the focus indicator from Android which I don't think can be modified)

Collapsed mode (note that the menu and "extra" items can collapse separately, the extra items first)

Collapsed mode extra menu:

Search in collapsed mode (note replacements cover other extra options):

Search in full menu mode:

[behindthepage]

Hi @quicksketch . I just downloaded and tried installing and am getting this error on the verify requirements page.

The following modules are required but were not found. 
Move them into the appropriate modules subdirectory, such as /modules. 
Missing modules: Toolbar

The dependency needs to be removed from /profiles/standard/standard.info

Regards
Geoff

[behindthepage]

Excellent @quicksketch.It works really well and looks good. I love how the menu search works, showing you where the link is in the admin menu. It will help people to learn where things are. Finally a decent toolbar.

It needs to be enabled automatically when Backport is installed. I know you know this. :-)

Kudos and thanks for Backdrop. It is going to be awesome!

Regards
Geoff

[quicksketch]

It needs to be enabled automatically when Backport is installed. I know you know this. :-)

Ah! Of course, I actually forgot that part. I didn't fully search/replace for "toolbar". I'll update the PR.

[ronliskey]

Looks great! Glad you based it on admin menu

[quicksketch]

I've update the PR to include Admin Menu on install (sorry about that!) as well as checked to make sure Toolbar wasn't referenced anywhere else in the code. I also renamed the "Drupal.admin" behaviors to "Drupal.adminMenu", since I don't think we should be so presumptuous with our namespacing. Lastly I fixed the minor padding issues you can see in the last 3 screenshots above when the search menu is open, which only happened in Chrome.

[quicksketch]

I updated the title in this issue to reflect what's going on in here. We'll still need a followup to make it "mobile friendly", since this still isn't going to be ideal on a phone. On a table, the dropdown menus actually work pretty well.

[behindthepage]

You would have to be desperate to admin a Drupal/backdrop site from a phone, wouldn't you?

[quicksketch]

You would have to be desperate to admin a Drupal/backdrop site from a phone, wouldn't you?

Yeah, maybe where we live. In a lot of countries phones are really the primary devices, but I'm not sure if that audience really overlaps strongly with Backdrop's administrative users. In any case, long term it'd be good to get a better menu solution for small screens. One of my friends pointed out https://www.airbnb.com/help has a great sliding navigation that can go infinitely levels deep. It looks great but only would allow deepest level items to be clicked on, which isn't currently the case with Admin Menu. Anyway, it's something to keep an eye on; though it's not something we need to address immediately.

A week ago I updated the PR to support the upgrade path correctly. I think this is all ready to go, though it'll need more work in the future. It definitely beats the pants off of Toolbar module.

[quicksketch]

I've merged in backdrop/backdrop#207. The door is open to further improvement of course. Search could be improved as well as better small-screen device support, but for most users this is a big win. Yay!