Drawer

XWiki XWiki 15.10+  It's possible  to reuse the behavior implemented for the main menu drawer in custom drawers.

How to use

The different parts of the drawer 'pattern' must be set up in the page HTML:

1. A drawer opener button, with:
   • a reference to the ID of the drawer container in its attribute 'aria-control'
   • the class '.drawer-opener'
2. A drawer container, with:
   • a `dialog` HTML nature
   • a unique ID (same as the 'aria-controls' value of the drawer opener)
   • the class 'drawer-nav' (for basic style)
   • an accessible name that describes the function of the drawer
   • The content to display inside
3. (Optional) A drawer close button:
   • Inside the drawer container
   • With the class '.drawer-close

Additionally, style should be added for the new drawer. As of now, it's recommended to reuse the content of this block from the drawer.less stylesheet. This can be reused either by:

• Adding your own drawer ID on line 29 of the file.
• Copying the style block to your own LESS stylesheet and changing #tmDrawer to your own drawer ID
• Using the rules as a mixin in another LESS file:
• #customDrawer.drawer-nav {
   #tmDrawer.drawer-nav
  }

Example

I updated the drawer.vm template to add my own template. Here are the details of my modifications on this file:

• L102->104: I added a button in the main drawer to open the custom drawer
• L107->113: I added the custom drawer container, which is a dialog with a unique ID, and added some of the content I want to display in it.

In this example, I decided to add my own drawer ID on line 29 of drawer.less.

Video demo of how updating those two files allows to add a fully interactive drawer.