SettingsSidebar: add a show_title_buttons option

data/styles/Index.scss

@@ -2,5 +2,6 @@
 @import '_common.scss';
 
 @import 'CategoryView.scss';
+@import 'Plug.scss';
 @import 'SettingsPage.scss';
 @import 'SettingsSidebar.scss';

data/styles/Plug.scss

@@ -0,0 +1,31 @@
+toolbarview {
+    &.undershoot-top scrolledwindow {
+        overshoot.top {
+            background:
+                linear-gradient(
+                    to top,
+                    #{'alpha(@accent_color, 0)'} 80%,
+                    #{'alpha(@accent_color, 0.25)'} 100%
+                ),
+                linear-gradient(
+                    #{'@borders'},
+                    rgba(black, 0.05) 1px,
+                    rgba(black, 0.0) rem(3px)
+                );
+        }
+
+        undershoot.top {
+            background:
+                linear-gradient(
+                    #{'@borders'},
+                    rgba(black, 0.05) 1px,
+                    rgba(black, 0.0) rem(3px)
+                );
+        }
+    }
+
+    headerbar {
+        background: inherit;
+        box-shadow: none;
+    }
+}

data/styles/SettingsSidebar.scss

@@ -1,23 +1,28 @@
-settingssidebar list {
-    min-width: rem(200px);
+settingssidebar {
+    background: #{'@insensitive_bg_color'};
 
-    row,
-    > .title-4 {
-        padding: rem(6px);
-    }
+    list {
+        background: inherit;
+        min-width: rem(200px);
 
-    row {
-        overlay {
-            // IconSize.LARGE + padding
-            min-width: calc(32px + #{rem(6px)});
+        row,
+        > .title-4 {
+            padding: rem(6px);
         }
 
-        overlay:dir(ltr) {
-            margin-right: rem(6px);
-        }
+        row {
+            overlay {
+                // IconSize.LARGE + padding
+                min-width: calc(32px + #{rem(6px)});
+            }
+
+            overlay:dir(ltr) {
+                margin-right: rem(6px);
+            }
 
-        overlay:dir(rtl) {
-            margin-left: rem(6px);
+            overlay:dir(rtl) {
+                margin-left: rem(6px);
+            }
         }
     }
 }

lib/SettingsSidebar.vala

@@ -18,6 +18,11 @@ public class Switchboard.SettingsSidebar : Gtk.Widget {
      */
     public Gtk.Stack stack { get; construct; }
 
+    /**
+     * Whether to show back and title buttons in the header area
+     */
+    public bool show_title_buttons { get; set;}
+
     /**
      * The name of the currently visible Granite.SettingsPage
      */
@@ -75,7 +80,18 @@ public class Switchboard.SettingsSidebar : Gtk.Widget {
             hscrollbar_policy = Gtk.PolicyType.NEVER,
             child = listbox
         };
-        scrolled.set_parent (this);
+
+        var headerbar = new Adw.HeaderBar () {
+            show_end_title_buttons = false,
+            show_title = false
+        };
+
+        var toolbarview = new Adw.ToolbarView () {
+            content = scrolled,
+            top_bar_style = FLAT
+        };
+        toolbarview.add_top_bar (headerbar);
+        toolbarview.set_parent (this);
 
         on_sidebar_changed ();
         stack.pages.items_changed.connect (on_sidebar_changed);
@@ -100,6 +116,8 @@ public class Switchboard.SettingsSidebar : Gtk.Widget {
         stack.notify["visible-child-name"].connect (() => {
             visible_child_name = stack.visible_child_name;
         });
+
+        bind_property ("show-title-buttons", toolbarview, "reveal-top-bars", SYNC_CREATE);
     }
 
     ~SettingsSidebar () {