Use Adw.NavigationSplitView

JoseExposito · Oct 20, 2023 · 36cd91f · 36cd91f
1 parent c99bebb
commit 36cd91f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/src/main-view/content/index.js b/src/main-view/content/index.js
@@ -23,9 +23,9 @@ import TapView from './tap-view';
 
 const { Adw, GObject, Gtk } = imports.gi;
 
-class Content extends Gtk.Box {
+class Content extends Adw.NavigationPage {
   _init() {
-    super._init({ orientation: Gtk.Orientation.VERTICAL });
+    super._init();
     this.appSelected = this.appSelected.bind(this);
 
     // Stack
@@ -52,9 +52,10 @@ class Content extends Gtk.Box {
     header.set_title_widget(this.stackSwitcher);
 
     // Layout
-    this.append(header);
-    this.append(this.stack);
-    this.set_size_request(200, -1);
+    this.toolbar = new Adw.ToolbarView();
+    this.toolbar.add_top_bar(header);
+    this.toolbar.set_content(this.stack);
+    this.set_child(this.toolbar);
   }
 
   appSelected(appName) {

diff --git a/src/main-view/index.js b/src/main-view/index.js
@@ -21,17 +21,24 @@ import { ALL_ID, isAll } from '~/config/all-apps';
 import Sidebar from './sidebar';
 import Content from './content';
 
-const { GObject, Gtk } = imports.gi;
+const { Adw, GObject } = imports.gi;
 
-class MainView extends Gtk.Paned {
+class MainView extends Adw.Bin {
   _init() {
-    super._init({ orientation: Gtk.Orientation.HORIZONTAL });
+    super._init();
 
     this.sidebar = new Sidebar();
     this.content = new Content();
 
-    this.set_start_child(this.sidebar);
-    this.set_end_child(this.content);
+    this.splitView = new Adw.NavigationSplitView({
+      hexpand: true,
+      vexpand: true,
+      min_sidebar_width: 250,
+      sidebar_width_fraction: 0.3,
+    });
+    this.splitView.set_sidebar(this.sidebar);
+    this.splitView.set_content(this.content);
+    this.child = this.splitView;
 
     this.sidebar.connect('appSelected', (self, appName) => this.content.appSelected(appName));
     this.sidebar.connect('addApp', () => this.emit('addApp'));

diff --git a/src/main-view/sidebar/index.js b/src/main-view/sidebar/index.js
@@ -22,14 +22,15 @@ import SidebarRow from './sidebar-row';
 
 const { Adw, GObject, Gtk } = imports.gi;
 
-class Sidebar extends Gtk.Box {
+class Sidebar extends Adw.NavigationPage {
   _init() {
-    super._init({ orientation: Gtk.Orientation.VERTICAL });
+    super._init();
 
     // Add the application list inside a scroll window
     this.list = new Gtk.ListBox();
     this.list.selection_mode = Gtk.SelectionMode.BROWSE;
     this.list.vexpand = true;
+    this.list.get_style_context().add_class('navigation-sidebar');
 
     const scrolled = new Gtk.ScrolledWindow();
     scrolled.vexpand = true;
@@ -56,11 +57,11 @@ class Sidebar extends Gtk.Box {
     header.set_title_widget(new Adw.WindowTitle({ title: _('Applications') }));
 
     // Layout
-    this.append(header);
-    this.append(scrolled);
-    this.append(footer);
-    this.set_size_request(200, -1);
-    this.baseline_position = Gtk.BaselinePosition.BOTTOM;
+    this.toolbar = new Adw.ToolbarView();
+    this.toolbar.add_top_bar(header);
+    this.toolbar.set_content(scrolled);
+    this.toolbar.add_bottom_bar(footer);
+    this.set_child(this.toolbar);
 
     this.list.connect('row_selected', (self, row) => {
       if (!row) {