Closes #18 - Implemented the ability to make the bar float with configurable spacing. (#19)

modules/bar/Bar.ts

@@ -93,7 +93,10 @@ export const Bar = (monitor: number) => {
         visible: true,
         anchor: ["top", "left", "right"],
         exclusivity: "exclusive",
+        child: Widget.Box({
+            class_name: 'bar-panel-container',
             child: Widget.CenterBox({
+                class_name: 'bar-panel',
                 css: 'padding: 1px',
                 startWidget: Widget.Box({
                     class_name: "box-left",
@@ -126,5 +129,6 @@ export const Bar = (monitor: number) => {
                     },
                 }),
             })
+        })
     });
 };

options.ts

@@ -54,6 +54,11 @@ const options = mkOptions(OPTIONS, {
             }
         },
         bar: {
+            floating: opt(false),
+            margin_top: opt("0.5em"),
+            margin_bottom: opt("0em"),
+            margin_sides: opt("0.5em"),
+            border_radius: opt("0.4em"),
             transparent: opt(false),
             background: opt(colors.crust),
             buttons: {

scss/style/bar/bar.scss

@@ -2,11 +2,22 @@
 @import "../../variables";
 
 .bar {
-  background: if($bar-transparent, transparent, $bar-background);
 
   .transparent {
     background: transparent;
   }
+
+  .bar-panel-container {
+    margin-top: if($bar-floating, $bar-margin_top, 0em);
+    margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
+    margin-left: if($bar-floating, $bar-margin_sides, 0em);
+    margin-right: if($bar-floating, $bar-margin_sides, 0em);
+  }
+
+  .bar-panel {
+    background: if($bar-transparent, transparent, $bar-background);
+    border-radius: if($bar-floating, $bar-border_radius, 0em);
+  }
 }
 
 .bar_item_box_visible {

scss/variables.scss

@@ -11,6 +11,11 @@ $notification-text: #cdd6f4;
 $notification-labelicon: #b4befe;
 $notification-close_button-background: #f38ba8;
 $notification-close_button-label: #11111b;
+$bar-floating: false;
+$bar-margin_top: 0.5em;
+$bar-margin_bottom: 0em;
+$bar-margin_sides: 0.5em;
+$bar-border_radius: 0.4em;
 $bar-transparent: false;
 $bar-background: #11111b;
 $bar-buttons-monochrome: false;

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

@@ -14,6 +14,13 @@ export const BarSettings = () => {
                 Header('Layouts'),
                 Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Please refer to the github README for instructions: https://github.com/Jas-SinghFSU/HyprPanel', type: 'object' }, 'bar-layout-input'),
 
+                Header('Spacing'),
+                Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }),
+                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' }),
+                Option({ opt: options.theme.bar.border_radius, title: 'Border Radius', subtitle: 'Only applies if floating is enabled', type: 'string' }),
+
                 Header('Dashboard'),
                 Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }),