[gnome-characters/bilelmoussaoui/split-headerbar: 3/5] use a HdyLeaflet to split the content

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 0006760f11eaa84c59912c4b3244b5cab0a8423a
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Sun Jun 7 12:46:54 2020 +0200

    use a HdyLeaflet to split the content

 data/mainwindow.ui | 201 ++++++++++++++++++++++++++++++++++-------------------
 src/window.js      |   1 +
 2 files changed, 129 insertions(+), 73 deletions(-)
---
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index 007da24..b4a3b36 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -4,134 +4,189 @@
   <template class="Gjs_MainWindow" parent="HdyApplicationWindow">
     <property name="height-request">660</property>
     <child>
-      <object class="GtkBox">
-        <property name="visible">True</property>
+      <object class="HdyLeaflet">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
         <child>
-          <object class="HdyHeaderBar" id="main-headerbar">
-            <property name="can_focus">False</property>
+          <object class="GtkBox">
             <property name="visible">True</property>
-            <property name="show-close-button">True</property>
-            <property name="has-subtitle">False</property>
-            <property name="title" translatable="yes">Current page</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
             <child>
-              <object class="GtkToggleButton" id="search-active-button">
-                <property name="can_focus">True</property>
+              <object class="HdyHeaderBar" id="sidebar-headerbar">
+                <property name="can_focus">False</property>
                 <property name="visible">True</property>
-                <style>
-                  <class name="image-button" />
-                </style>
                 <child>
-                  <object class="GtkImage" id="search-button-image">
+                  <object class="GtkToggleButton" id="search-active-button">
+                    <property name="can_focus">True</property>
                     <property name="visible">True</property>
-                    <property name="icon-name">edit-find-symbolic</property>
+                    <style>
+                      <class name="image-button" />
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="search-button-image">
+                        <property name="visible">True</property>
+                        <property name="icon-name">edit-find-symbolic</property>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="pack-type">start</property>
+                  </packing>
                 </child>
-              </object>
-              <packing>
-                <property name="pack-type">start</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="back-button">
-                <property name="can_focus">True</property>
-                <property name="visible">False</property>
-                <style>
-                  <class name="image-button" />
-                </style>
                 <child>
-                  <object class="GtkImage" id="back-button-image">
+                  <object class="GtkButton" id="back-button">
+                    <property name="can_focus">True</property>
+                    <property name="visible">False</property>
+                    <style>
+                      <class name="image-button" />
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="back-button-image">
+                        <property name="visible">True</property>
+                        <property name="icon-name">go-previous-symbolic</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="pack-type">start</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkMenuButton" id="menu-button">
+                    <property name="can_focus">False</property>
                     <property name="visible">True</property>
-                    <property name="icon-name">go-previous-symbolic</property>
+                    <property name="use_popover">True</property>
+                    <style>
+                      <class name="image-button" />
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="menu-button-image">
+                        <property name="visible">True</property>
+                        <property name="icon-name">open-menu-symbolic</property>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="pack-type">end</property>
+                  </packing>
                 </child>
               </object>
               <packing>
-                <property name="pack-type">start</property>
+                <property name="position">0</property>
               </packing>
             </child>
             <child>
-              <object class="GtkMenuButton" id="menu-button">
+              <object class="GtkGrid" id="sidebar-grid">
                 <property name="can_focus">False</property>
                 <property name="visible">True</property>
-                <property name="use_popover">True</property>
-                <style>
-                  <class name="image-button" />
-                </style>
+                <property name="hexpand">False</property>
+                <property name="vexpand">True</property>
+                <property name="orientation">vertical</property>
+                <property name="width_request">270</property>
                 <child>
-                  <object class="GtkImage" id="menu-button-image">
+                  <object class="GtkSearchBar" id="search-bar">
                     <property name="visible">True</property>
-                    <property name="icon-name">open-menu-symbolic</property>
+                    <property name="halign">fill</property>
+                    <child>
+                      <object class="GtkSearchEntry" id="search-entry">
+                        <property name="can_focus">True</property>
+                        <property name="halign">fill</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
+                <style>
+                  <class name="sidebar" />
+                </style>
               </object>
               <packing>
-                <property name="pack-type">end</property>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
               </packing>
             </child>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
+            <property name="name">sidebar</property>
           </packing>
         </child>
         <child>
-          <object class="GtkGrid" id="main-grid">
-            <property name="can_focus">False</property>
+          <object class="GtkBox">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="orientation">vertical</property>
-            <property name="valign">fill</property>
             <child>
-              <object class="GtkBox" id="main-hbox">
-                <property name="can_focus">False</property>
+              <object class="HdyWindowHandle" id="header-separator">
                 <property name="visible">True</property>
-                <property name="orientation">horizontal</property>
                 <child>
-                  <object class="GtkGrid" id="sidebar-grid">
-                    <property name="can_focus">False</property>
+                  <object class="GtkSeparator">
                     <property name="visible">True</property>
-                    <property name="hexpand">False</property>
-                    <property name="vexpand">True</property>
+                    <property name="can_focus">False</property>
                     <property name="orientation">vertical</property>
-                    <child>
-                      <object class="GtkSearchBar" id="search-bar">
-                        <property name="visible">True</property>
-                        <property name="halign">fill</property>
-                        <child>
-                          <object class="GtkSearchEntry" id="search-entry">
-                            <property name="can_focus">True</property>
-                            <property name="halign">fill</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <placeholder />
-                    </child>
+                    <style>
+                      <class name="sidebar"/>
+                    </style>
                   </object>
                 </child>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="HdyHeaderBar" id="main-headerbar">
+                <property name="can_focus">False</property>
+                <property name="visible">True</property>
+                <property name="show-close-button">True</property>
+                <property name="has-subtitle">False</property>
+                <property name="title" translatable="yes">Current page</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkGrid" id="main-grid">
+                <property name="can_focus">False</property>
+                <property name="visible">True</property>
+                <property name="orientation">vertical</property>
+                <property name="valign">fill</property>
                 <child>
-                  <object class="GtkVSeparator">
+                  <object class="GtkBox" id="main-hbox">
+                    <property name="can_focus">False</property>
                     <property name="visible">True</property>
+                    <property name="orientation">horizontal</property>
                   </object>
                 </child>
-                <child>
-                  <placeholder />
-                </child>
               </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
             </child>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
+            <property name="name">content</property>
           </packing>
         </child>
       </object>
     </child>
   </template>
+  <object class="GtkSizeGroup">
+    <property name="mode">vertical</property>
+    <widgets>
+      <widget name="sidebar-headerbar"/>
+      <widget name="main-headerbar"/>
+      <widget name="header-separator"/>
+    </widgets>
+  </object>
 </interface>
 
diff --git a/src/window.js b/src/window.js
index 5614223..5018503 100644
--- a/src/window.js
+++ b/src/window.js
@@ -120,6 +120,7 @@ var MainWindow = GObject.registerClass({
         });
 
         this._main_hbox.pack_start(this._mainView, true, true, 0);
+        this._sidebar_grid.show_all();
         this._main_grid.show_all();
 
         // Due to limitations of gobject-introspection wrt GdkEvent