From bc2d18b2852f1c693d61b7ab0f358400d40c6f3a Mon Sep 17 00:00:00 2001
From: Juraj Oravec <jurajoravec@mailo.com>
Date: Thu, 14 Jul 2022 11:00:31 +0200
Subject: [PATCH] QML: Switch to Pane for sidebar tutorial

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
---
 qml/articles/7.Adding_a_sidebar.md     | 20 +++++++++++---------
 qml/extensions/qml_tutorial_7/main.qml |  3 ++-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/qml/articles/7.Adding_a_sidebar.md b/qml/articles/7.Adding_a_sidebar.md
index 9fce1f4..707de5c 100644
--- a/qml/articles/7.Adding_a_sidebar.md
+++ b/qml/articles/7.Adding_a_sidebar.md
@@ -5,16 +5,18 @@ 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 */
-        }
+import QtQuick.Controls 2.3
+
+Falkon.SideBar {
+    name: 'qml-tutorial7-sidebar'
+    title: i18n('Tutorial 7 - QML SideBar')
+    icon: 'falkon'
+    checkable: false
+    shortcut: 'Ctrl+Shift+Alt+S'
+    Pane {
+        /* Actual UI and some drawing logic */
     }
+}
 ```
 
 ### Falkon.SideBar
diff --git a/qml/extensions/qml_tutorial_7/main.qml b/qml/extensions/qml_tutorial_7/main.qml
index 8b3d63d..3817c9c 100644
--- a/qml/extensions/qml_tutorial_7/main.qml
+++ b/qml/extensions/qml_tutorial_7/main.qml
@@ -23,7 +23,8 @@ Falkon.PluginInterface {
         icon: 'falkon'
         checkable: true
         shortcut: 'Ctrl+Shift+Alt+S'
-        Rectangle {
+
+        Pane {
             Image {
                 source: 'qrc:/icons/other/startpage.svg'
                 anchors.verticalCenter: parent.verticalCenter