Added the ability to change the layer of the bar (#146)

modules/bar/Bar.ts

@@ -229,6 +229,7 @@ export const Bar = (() => {
             visible: true,
             anchor: ["top", "left", "right"],
             exclusivity: "exclusive",
+            layer: options.theme.bar.layer.bind("value"),
             child: Widget.Box({
                 class_name: 'bar-panel-container',
                 child: Widget.CenterBox({

options.ts

@@ -120,6 +120,7 @@ const options = mkOptions(OPTIONS, {
         },
         bar: {
             floating: opt(false),
+            layer: opt<"top" | "bottom" | "overlay" | "background">("top"),
             margin_top: opt("0.5em"),
             opacity: opt(100),
             margin_bottom: opt("0em"),

widget/settings/pages/config/bar/index.ts

@@ -19,6 +19,7 @@ export const BarSettings = () => {
                 Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', subtitle: 'Spacing between the buttons in the bar.', type: 'string' }),
                 Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),
+                Option({ opt: options.theme.bar.layer, title: 'Layer', type: 'enum', subtitle: 'Layer determines the Z index of your bar.', enums: ["top", "bottom", "overlay", "background"] }),
                 Option({ opt: options.theme.bar.margin_top, title: 'Margin Top', subtitle: 'Only applies if floating is enabled', type: 'string' }),
                 Option({ opt: options.theme.bar.margin_bottom, title: 'Margin Bottom', subtitle: 'Only applies if floating is enabled', type: 'string' }),
                 Option({ opt: options.theme.bar.margin_sides, title: 'Margin Sides', subtitle: 'Only applies if floating is enabled', type: 'string' }),