use MobileComponents.SplitDrawer

as suggested in the vdg meeting, use a splitdrawer and put the
applet categories there

shell/contents/explorer/WidgetExplorer.qml

@@ -24,19 +24,17 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 import org.kde.kquickcontrolsaddons 2.0
+import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
 
 import QtQuick.Window 2.1
 import QtQuick.Layouts 1.1
 
 import org.kde.plasma.private.shell 2.0
 
-PlasmaCore.FrameSvgItem {
+Rectangle {
     id: main
-    imagePath: "widgets/background"
-    enabledBorders: PlasmaCore.FrameSvgItem.NoBorder
 
-    width: Math.max(heading.paintedWidth, units.gridUnit * 16)
+    color: theme.backgroundColor
-    height: 800//Screen.height
 
     property alias containment: widgetExplorer.containment
 
@@ -64,7 +62,30 @@ PlasmaCore.FrameSvgItem {
         //view: desktop
         onShouldClose: main.closed();
     }
-
+    MobileComponents.SplitDrawer {
+        visible: true
+        anchors.fill: parent
+        drawer: PlasmaExtras.ScrollArea {
+            ListView {
+                model: widgetExplorer.filterModel
+                delegate: PlasmaComponents.ListItem {
+                    enabled: true
+                    visible: !model.separator
+                    height: model.separator ? 0 : implicitHeight
+                    PlasmaComponents.Label {
+                        text: model.display
+                    }
+                    onClicked: {
+                        list.contentX = 0
+                        list.contentY = 0
+                        heading.text = model.display
+                        widgetExplorer.widgetsModel.filterQuery = model.filterData
+                        widgetExplorer.widgetsModel.filterType = model.filterType
+                    }
+                }
+            }
+        }
+        ColumnLayout {
             GridLayout {
                 id: topBar
                 anchors {
@@ -73,7 +94,6 @@ PlasmaCore.FrameSvgItem {
                     right: parent.right
                     topMargin: 0
                     leftMargin: units.smallSpacing
-            rightMargin: main.margins.right
                 }
                 columns: 2
 
@@ -109,12 +129,6 @@ PlasmaCore.FrameSvgItem {
                 }
             }
 
-    PlasmaCore.FrameSvgItem {
-        id: backgroundHint
-        imagePath: "widgets/viewitem"
-        prefix: "normal"
-        visible: false
-    }
             PlasmaExtras.ScrollArea {
                 anchors {
                     top: topBar.bottom
@@ -124,7 +138,6 @@ PlasmaCore.FrameSvgItem {
                     topMargin: units.smallSpacing
                     leftMargin: units.smallSpacing
                     bottomMargin: units.smallSpacing
-            rightMargin: main.margins.right
                 }
                 ListView {
                     id: list
@@ -200,6 +213,9 @@ PlasmaCore.FrameSvgItem {
                 }
             }
 
+        }
+
+    }
     Component.onCompleted: {
         main.getWidgetsButton = getWidgetsButton
         main.categoryButton = categoryButton