QML: Add sidebar example

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>

qml/articles/7.Adding_a_sidebar.md

@@ -0,0 +1,53 @@
+# Falkon QML Tutorial - 7. Adding a sidebar
+
+Hello, in this chapter I will show you how to create a custom sidebar.
+
+## Create sidebar
+
+```qml
+    Falkon.SideBar {
+        name: 'qml-tutorial7-sidebar'
+        title: i18n('Tutorial 7 - QML SideBar')
+        icon: 'falkon'
+        checkable: false
+        shortcut: 'Ctrl+Shift+Alt+S'
+        Rectangle {
+            /* Actual UI and some drawing logic */
+        }
+    }
+```
+
+### Falkon.SideBar
+
+#### name
+Internal name of the sidebar. This is required property.
+
+#### title
+Sidebar title visible when sidebar is enabled and also displayed in the
+menu when selecting sidebars.
+
+#### icon
+Icon for sidebar, well I do not know if it is used properly since I did
+not see it anywhere in the program window.
+
+#### checkable
+Should be for the menu, I am not very sure of its usage.
+
+#### shortcut
+Looks like a global keyboard shortcut to show&hide the sidebar.
+
+#### default item
+There has to be a "body" of sidebar of some sort to display. Use some
+Qml stuff here. (I lack Qml knowledge.)
+
+## Example
+The example will add a sidebar and in it will be an image and a button.
+This example is ripped of from Falkon default "Hello Qml" extension with
+addition of a keyboard shortcut.
+(I am not gonna re-invent a wheel.)
+
+![Window with sidebar and view menu](../images/tutorial7/sidebar_and_view_menu.png)
+
+### Code
+The code for this example can be found at
+[extensions/qml_tutorial_7](../extensions/qml_tutorial_7)

qml/extensions/qml_tutorial_7/main.qml

@@ -0,0 +1,43 @@
+import org.kde.falkon 1.0 as Falkon
+import QtQuick.Controls 2.3
+import QtQuick 2.3
+
+Falkon.PluginInterface {
+
+    init: function(state, settingsPath) {
+        console.log(i18n('"Tutorial7" plugin loaded'))
+    }
+
+    testPlugin: function() {
+        return true
+    }
+
+    unload: function() {
+        console.log(i18n('"Tutorial7" plugin unloaded'))
+    }
+
+    /* Taken from "Hello Qml" example */
+    Falkon.SideBar {
+        name: 'qml-tutorial7-sidebar'
+        title: i18n('Tutorial 7 - QML SideBar')
+        icon: 'falkon'
+        checkable: true
+        shortcut: 'Ctrl+Shift+Alt+S'
+        Rectangle {
+            Image {
+                source: 'qrc:/icons/other/startpage.svg'
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }
+
+            Button {
+                text: i18n('Hello Qml Plugin')
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+            }
+        }
+    }
+
+}

qml/extensions/qml_tutorial_7/metadata.desktop

@@ -0,0 +1,11 @@
+[Desktop Entry]
+Name=Tutorial7 QML
+Comment=Example QML extension with sidebar
+Icon=
+Type=Service
+X-Falkon-Type=Extension/Qml
+
+X-Falkon-Author=Juraj Oravec
+X-Falkon-Email=jurajoravec@mailo.com
+X-Falkon-Version=1.0.0
+X-Falkon-Settings=false