fix(demo): replace deprecated use of slint's StyleMetrics

Fixes warning due to use of depricated public API.

Pulls in latest version of side_bar.slint
https://github.com/slint-ui/slint/blob/master/examples/gallery/ui/side_bar.slint
after merging PR
slint-ui/slint#4947

demo/ui/widgets/side_bar.slint

@@ -1,30 +1,44 @@
 // Copyright © SixtyFPS GmbH <[email protected]>
 // SPDX-License-Identifier: MIT
 
-import { StyleMetrics } from "std-widgets.slint";
+import { HorizontalBox, VerticalBox, Palette } from "std-widgets.slint";
 
 component SideBarItem inherits Rectangle {
+    in property <bool> selected;
+    in property <bool> has-focus;
+    in-out property <string> text <=> label.text;
+
     callback clicked <=> touch.clicked;
-    in-out property<string> text <=> label.text;
-    in property<bool> selected;
-    in property<bool> has-focus;
 
     min-height: l.preferred-height;
 
+    states [
+        pressed when touch.pressed : {
+            state.opacity: 0.8;
+        }
+        hover when touch.has-hover : {
+            state.opacity: 0.6;
+        }
+        selected when root.selected : {
+            state.opacity: 1;
+        }
+        focused when root.has-focus : {
+            state.opacity: 0.8;
+        }
+    ]
+
     state := Rectangle {
         opacity: 0;
-        background: StyleMetrics.window-background;
+        background: Palette.background;
 
         animate opacity { duration: 150ms; }
     }
 
-    l := HorizontalLayout {
+    l := HorizontalBox {
         y: (parent.height - self.height) / 2;
-        padding: StyleMetrics.layout-padding;
         spacing: 0px;
 
         label := Text {
-            color: StyleMetrics.default-text-color;
             vertical-alignment: center;
          }
     }
@@ -33,43 +47,23 @@ component SideBarItem inherits Rectangle {
         width: 100%;
         height: 100%;
     }
-
-    states [
-        pressed when touch.pressed : {
-            state.opacity: 0.8;
-        }
-        hover when touch.has-hover : {
-            state.opacity: 0.6;
-        }
-        selected when root.selected : {
-            state.opacity: 1;
-        }
-        focused when root.has-focus : {
-            state.opacity: 0.8;
-        }
-    ]
 }
 
 export component SideBar inherits Rectangle {
-    in property<[string]> model: [];
-    out property<int> current-item: 0;
-    in property<string> title <=> label.text;
-    out property<int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
-    width: 180px;
+    in property <[string]> model: [];
+    in property <string> title <=> label.text;
+    out property <int> current-item: 0;
+    out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
 
+    width: 180px;
     forward-focus: fs;
-
     accessible-role: tab;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
 
     Rectangle {
-        background: StyleMetrics.window-background.darker(0.2);
+        background: Palette.background.darker(0.2);
 
         fs := FocusScope {
-            x:0;
-            width: 0px; // Do not react on clicks
-            property<int> focused-tab: 0;
-
             key-pressed(event) => {
                 if (event.text == "\n") {
                      root.current-item = root.current-focused;
@@ -93,13 +87,17 @@ export component SideBar inherits Rectangle {
                 }
                 return reject;
             }
+
+            property <int> focused-tab: 0;
+
+            x: 0;
+            width: 0; // Do not react on clicks
         }
     }
 
-    VerticalLayout {
-        padding-top: StyleMetrics.layout-padding;
-        padding-bottom: StyleMetrics.layout-padding;
-        spacing: StyleMetrics.layout-spacing;
+    VerticalBox {
+        padding-left: 0px;
+        padding-right: 0px;
         alignment: start;
 
         label := Text {
@@ -111,17 +109,18 @@ export component SideBar inherits Rectangle {
             alignment: start;
             vertical-stretch: 0;
             for item[index] in root.model : SideBarItem {
+                clicked => { root.current-item = index; }
+
                 has-focus: index == root.current-focused;
                 text: item;
                 selected: index == root.current-item;
-                clicked => { root.current-item = index; }
             }
         }
 
         VerticalLayout {
-            bottom := VerticalLayout {
-                padding-left: StyleMetrics.layout-padding;
-                padding-right: StyleMetrics.layout-padding;
+            bottom := VerticalBox {
+                padding-top: 0px;
+                padding-bottom: 0px;
 
                 @children
              }