From 7ee4c497e51fade37517880450fbac44143f4124 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Mon, 23 Sep 2024 22:17:56 -0700
Subject: [PATCH 1/3] Added submap custom module.

---
 customModules/config.ts             |  62 +++++
 customModules/submap/index.ts       |  76 ++++++
 customModules/theme.ts              |  16 ++
 modules/bar/Bar.ts                  |   3 +
 modules/bar/Exports.ts              |   2 +
 options.ts                          |  19 ++
 scss/style/customModules/style.scss | 368 +++++++++++++++-------------
 7 files changed, 377 insertions(+), 169 deletions(-)
 create mode 100644 customModules/submap/index.ts

diff --git a/customModules/config.ts b/customModules/config.ts
index 5e722143b..c20055505 100644
--- a/customModules/config.ts
+++ b/customModules/config.ts
@@ -380,6 +380,68 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                     type: 'string',
                 }),
 
+                /*
+                 ************************************
+                 *            SUBMAP                *
+                 ************************************
+                 */
+                Header('Submap'),
+                Option({
+                    opt: options.bar.customModules.submap.enabledIcon,
+                    title: 'Enabled Icon',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.disabledIcon,
+                    title: 'Disabled Icon',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.enabledText,
+                    title: 'Enabled Text',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.disabledText,
+                    title: 'Disabled Text',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.label,
+                    title: 'Show Label',
+                    type: 'boolean',
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.spacing,
+                    title: 'Spacing',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.leftClick,
+                    title: 'Left Click',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.rightClick,
+                    title: 'Right Click',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.middleClick,
+                    title: 'Middle Click',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.scrollUp,
+                    title: 'Scroll Up',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.bar.customModules.submap.scrollDown,
+                    title: 'Scroll Down',
+                    type: 'string',
+                }),
+
                 /*
                  ************************************
                  *            WEATHER               *
diff --git a/customModules/submap/index.ts b/customModules/submap/index.ts
new file mode 100644
index 000000000..163bf5b26
--- /dev/null
+++ b/customModules/submap/index.ts
@@ -0,0 +1,76 @@
+const hyprland = await Service.import('hyprland');
+import options from 'options';
+import { module } from '../module';
+
+import { inputHandler } from 'customModules/utils';
+import Button from 'types/widgets/button';
+import { Variable as VariableType } from 'types/variable';
+import { Attribute, Child } from 'lib/types/widget';
+import { BarBoxChild } from 'lib/types/bar';
+
+const {
+    label,
+    enabledIcon,
+    disabledIcon,
+    enabledText,
+    disabledText,
+    leftClick,
+    rightClick,
+    middleClick,
+    scrollUp,
+    scrollDown,
+} = options.bar.customModules.submap;
+
+const submapStatus: VariableType<boolean> = Variable(false);
+
+hyprland.connect('submap', () => {
+    submapStatus.value = !submapStatus.value;
+});
+
+export const Submap = (): BarBoxChild => {
+    const submapModule = module({
+        textIcon: Utils.merge(
+            [submapStatus.bind('value'), enabledIcon.bind('value'), disabledIcon.bind('value')],
+            (status, enabled, disabled) => {
+                return status ? enabled : disabled;
+            },
+        ),
+        tooltipText: Utils.merge(
+            [submapStatus.bind('value'), enabledText.bind('value'), disabledText.bind('value')],
+            (status, enabled, disabled) => {
+                return status ? enabled : disabled;
+            },
+        ),
+        boxClass: 'submap',
+        label: Utils.merge(
+            [submapStatus.bind('value'), enabledText.bind('value'), disabledText.bind('value')],
+            (status, enabled, disabled) => {
+                return status ? enabled : disabled;
+            },
+        ),
+        showLabelBinding: label.bind('value'),
+        props: {
+            setup: (self: Button<Child, Attribute>) => {
+                inputHandler(self, {
+                    onPrimaryClick: {
+                        cmd: leftClick,
+                    },
+                    onSecondaryClick: {
+                        cmd: rightClick,
+                    },
+                    onMiddleClick: {
+                        cmd: middleClick,
+                    },
+                    onScrollUp: {
+                        cmd: scrollUp,
+                    },
+                    onScrollDown: {
+                        cmd: scrollDown,
+                    },
+                });
+            },
+        },
+    });
+
+    return submapModule;
+};
diff --git a/customModules/theme.ts b/customModules/theme.ts
index 3e3008f1f..8517f3d01 100644
--- a/customModules/theme.ts
+++ b/customModules/theme.ts
@@ -110,6 +110,22 @@ export const CustomModuleTheme = (): Scrollable<GtkWidget, Attribute> => {
                     type: 'color',
                 }),
 
+                Header('submap'),
+                Option({ opt: options.theme.bar.buttons.modules.submap.text, title: 'Text', type: 'color' }),
+                Option({ opt: options.theme.bar.buttons.modules.submap.icon, title: 'Icon', type: 'color' }),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.background,
+                    title: 'Label Background',
+                    type: 'color',
+                }),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.icon_background,
+                    title: 'Icon Background',
+                    subtitle:
+                        "Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
+                    type: 'color',
+                }),
+
                 Header('Weather'),
                 Option({ opt: options.theme.bar.buttons.modules.weather.icon, title: 'Icon', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.modules.weather.text, title: 'Text', type: 'color' }),
diff --git a/modules/bar/Bar.ts b/modules/bar/Bar.ts
index 789898572..b5eff25fc 100644
--- a/modules/bar/Bar.ts
+++ b/modules/bar/Bar.ts
@@ -20,6 +20,7 @@ import {
     Netstat,
     KbInput,
     Updates,
+    Submap,
     Weather,
     Power,
 } from './Exports';
@@ -57,6 +58,7 @@ type Section =
     | 'netstat'
     | 'kbinput'
     | 'updates'
+    | 'submap'
     | 'weather'
     | 'power'
     | 'systray';
@@ -108,6 +110,7 @@ const widget = {
     netstat: (): Button<Child, Attribute> => WidgetContainer(Netstat()),
     kbinput: (): Button<Child, Attribute> => WidgetContainer(KbInput()),
     updates: (): Button<Child, Attribute> => WidgetContainer(Updates()),
+    submap: (): Button<Child, Attribute> => WidgetContainer(Submap()),
     weather: (): Button<Child, Attribute> => WidgetContainer(Weather()),
     power: (): Button<Child, Attribute> => WidgetContainer(Power()),
 };
diff --git a/modules/bar/Exports.ts b/modules/bar/Exports.ts
index c6a540a2e..6a17b2f8b 100644
--- a/modules/bar/Exports.ts
+++ b/modules/bar/Exports.ts
@@ -17,6 +17,7 @@ import { Storage } from 'customModules/storage/index';
 import { Netstat } from 'customModules/netstat/index';
 import { KbInput } from 'customModules/kblayout/index';
 import { Updates } from 'customModules/updates/index';
+import { Submap } from 'customModules/submap/index';
 import { Weather } from 'customModules/weather/index';
 import { Power } from 'customModules/power/index';
 
@@ -40,6 +41,7 @@ export {
     Netstat,
     KbInput,
     Updates,
+    Submap,
     Weather,
     Power,
 };
diff --git a/options.ts b/options.ts
index 5b96f2535..7b0d9aa1c 100644
--- a/options.ts
+++ b/options.ts
@@ -320,6 +320,13 @@ const options = mkOptions(OPTIONS, {
                         icon_background: opt(colors.base2),
                         spacing: opt('0.45em'),
                     },
+                    submap: {
+                        background: opt(colors.base2),
+                        text: opt(colors.teal),
+                        icon: opt(colors.teal),
+                        icon_background: opt(colors.base2),
+                        spacing: opt('0.45em'),
+                    },
                 },
             },
             menus: {
@@ -963,6 +970,18 @@ const options = mkOptions(OPTIONS, {
                 scrollUp: opt(''),
                 scrollDown: opt(''),
             },
+            submap: {
+                label: opt(true),
+                enabledIcon: opt('󰌐'),
+                disabledIcon: opt('󰌌'),
+                enabledText: opt('Submap On'),
+                disabledText: opt('Submap off'),
+                leftClick: opt(''),
+                rightClick: opt(''),
+                middleClick: opt(''),
+                scrollUp: opt(''),
+                scrollDown: opt(''),
+            },
             weather: {
                 label: opt(true),
                 unit: opt<UnitType>('imperial'),
diff --git a/scss/style/customModules/style.scss b/scss/style/customModules/style.scss
index c67d2a267..a9ee46694 100644
--- a/scss/style/customModules/style.scss
+++ b/scss/style/customModules/style.scss
@@ -4,31 +4,31 @@
  * #################################
  */
 .bar-button-label {
-  margin-left: 0.5em;
-  color: $text;
+    margin-left: 0.5em;
+    color: $text;
 }
 
 .module-icon {
-  font-size: 1em;
+    font-size: 1em;
 }
 
 .style2 {
-  .bar-button-icon {
-    border-top-left-radius: $bar-buttons-radius;
-    border-bottom-left-radius: $bar-buttons-radius;
-    padding: $bar-buttons-padding_y 0em;
-    padding-left: $bar-buttons-padding_x;
-    padding-right: 0.5em;
-    background: $text;
-    color: $bar-background;
-  }
-
-  .bar-button-label {
-    padding: $bar-buttons-padding_y 0em;
-    padding-right: $bar-buttons-padding_x;
-    padding-left: 0.5em;
-    margin-left: 0em;
-  }
+    .bar-button-icon {
+        border-top-left-radius: $bar-buttons-radius;
+        border-bottom-left-radius: $bar-buttons-radius;
+        padding: $bar-buttons-padding_y 0em;
+        padding-left: $bar-buttons-padding_x;
+        padding-right: 0.5em;
+        background: $text;
+        color: $bar-background;
+    }
+
+    .bar-button-label {
+        padding: $bar-buttons-padding_y 0em;
+        padding-right: $bar-buttons-padding_x;
+        padding-left: 0.5em;
+        margin-left: 0em;
+    }
 }
 
 /* 
@@ -37,47 +37,46 @@
  * #################################
  */
 @mixin styleModule($class, $textColor, $iconColor, $iconBackground, $labelBackground, $spacing, $fontSize: 1em) {
-  .bar_item_box_visible {
-    &.#{$class} {
-      background: $labelBackground;
+    .bar_item_box_visible {
+        &.#{$class} {
+            background: $labelBackground;
 
-      &.style2 {
-        background: transparent;
-      }
+            &.style2 {
+                background: transparent;
+            }
 
-      &:hover {
-        opacity: 0.5;
-      }
+            &:hover {
+                opacity: 0.5;
+            }
+        }
     }
-  }
-
 
-  .module-label.#{$class} {
-    color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
-    margin-left: $spacing;
-    border-radius: $bar-buttons-radius;
-  }
-
-  .module-icon.#{$class} {
-    color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
-    font-size: if($fontSize, $fontSize, 1em);
-  }
+    .module-label.#{$class} {
+        color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
+        margin-left: $spacing;
+        border-radius: $bar-buttons-radius;
+    }
 
-  .style2 {
     .module-icon.#{$class} {
-      background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
-      padding-right: $spacing;
-      color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
+        font-size: if($fontSize, $fontSize, 1em);
     }
 
-    .module-label.#{$class} {
-      background: $labelBackground;
-      padding-left: $spacing * 1.5;
-      margin-left: 0em;
-      border-top-left-radius: 0em;
-      border-bottom-left-radius: 0em;
+    .style2 {
+        .module-icon.#{$class} {
+            background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
+            padding-right: $spacing;
+            color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
+        }
+
+        .module-label.#{$class} {
+            background: $labelBackground;
+            padding-left: $spacing * 1.5;
+            margin-left: 0em;
+            border-top-left-radius: 0em;
+            border-bottom-left-radius: 0em;
+        }
     }
-  }
 }
 
 /* 
@@ -85,19 +84,20 @@
  * #      Ram Module Styling       #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'ram',
-  // label color
-  $bar-buttons-modules-ram-text,
-  // icon color
-  $bar-buttons-modules-ram-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-ram-icon_background,
-  // label background
-  $bar-buttons-modules-ram-background,
-  // inner spacing
-  $bar-buttons-modules-ram-spacing //
+@include styleModule(
+    //
+    // class name
+    'ram',
+    // label color
+    $bar-buttons-modules-ram-text,
+    // icon color
+    $bar-buttons-modules-ram-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-ram-icon_background,
+    // label background
+    $bar-buttons-modules-ram-background,
+    // inner spacing
+    $bar-buttons-modules-ram-spacing //
 );
 
 /* 
@@ -105,21 +105,22 @@
  * #      Cpu Module Styling       #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'cpu',
-  // label color
-  $bar-buttons-modules-cpu-text,
-  // icon color
-  $bar-buttons-modules-cpu-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-cpu-icon_background,
-  // label background
-  $bar-buttons-modules-cpu-background,
-  // inner spacing
-  $bar-buttons-modules-cpu-spacing,
-  // custom font size
-  1.05em //
+@include styleModule(
+    //
+    // class name
+    'cpu',
+    // label color
+    $bar-buttons-modules-cpu-text,
+    // icon color
+    $bar-buttons-modules-cpu-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-cpu-icon_background,
+    // label background
+    $bar-buttons-modules-cpu-background,
+    // inner spacing
+    $bar-buttons-modules-cpu-spacing,
+    // custom font size
+    1.05em //
 );
 
 /* 
@@ -127,21 +128,22 @@
  * #    Storage Module Styling     #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'storage',
-  // label color
-  $bar-buttons-modules-storage-text,
-  // icon color
-  $bar-buttons-modules-storage-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-storage-icon_background,
-  // label background
-  $bar-buttons-modules-storage-background,
-  // inner spacing
-  $bar-buttons-modules-storage-spacing,
-  // custom font size
-  1.3em //
+@include styleModule(
+    //
+    // class name
+    'storage',
+    // label color
+    $bar-buttons-modules-storage-text,
+    // icon color
+    $bar-buttons-modules-storage-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-storage-icon_background,
+    // label background
+    $bar-buttons-modules-storage-background,
+    // inner spacing
+    $bar-buttons-modules-storage-spacing,
+    // custom font size
+    1.3em //
 );
 
 /* 
@@ -149,21 +151,22 @@
  * #    Netstat Module Styling     #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'netstat',
-  // label color
-  $bar-buttons-modules-netstat-text,
-  // icon color
-  $bar-buttons-modules-netstat-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-netstat-icon_background,
-  // label background
-  $bar-buttons-modules-netstat-background,
-  // inner spacing
-  $bar-buttons-modules-netstat-spacing,
-  // custom font size
-  1.2em //
+@include styleModule(
+    //
+    // class name
+    'netstat',
+    // label color
+    $bar-buttons-modules-netstat-text,
+    // icon color
+    $bar-buttons-modules-netstat-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-netstat-icon_background,
+    // label background
+    $bar-buttons-modules-netstat-background,
+    // inner spacing
+    $bar-buttons-modules-netstat-spacing,
+    // custom font size
+    1.2em //
 );
 
 /* 
@@ -171,21 +174,22 @@
  * #    KB Layout Module Styling   #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'kblayout',
-  // label color
-  $bar-buttons-modules-kbLayout-text,
-  // icon color
-  $bar-buttons-modules-kbLayout-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-kbLayout-icon_background,
-  // label background
-  $bar-buttons-modules-kbLayout-background,
-  // inner spacing
-  $bar-buttons-modules-kbLayout-spacing,
-  // custom font size
-  1.2em //
+@include styleModule(
+    //
+    // class name
+    'kblayout',
+    // label color
+    $bar-buttons-modules-kbLayout-text,
+    // icon color
+    $bar-buttons-modules-kbLayout-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-kbLayout-icon_background,
+    // label background
+    $bar-buttons-modules-kbLayout-background,
+    // inner spacing
+    $bar-buttons-modules-kbLayout-spacing,
+    // custom font size
+    1.2em //
 );
 
 /* 
@@ -193,21 +197,45 @@
  * #    Updates Module Styling     #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'updates',
-  // label color
-  $bar-buttons-modules-updates-text,
-  // icon color
-  $bar-buttons-modules-updates-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-updates-icon_background,
-  // label background
-  $bar-buttons-modules-updates-background,
-  // inner spacing
-  $bar-buttons-modules-updates-spacing,
-  // custom font size
-  1.2em //
+@include styleModule(
+    //
+    // class name
+    'updates',
+    // label color
+    $bar-buttons-modules-updates-text,
+    // icon color
+    $bar-buttons-modules-updates-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-updates-icon_background,
+    // label background
+    $bar-buttons-modules-updates-background,
+    // inner spacing
+    $bar-buttons-modules-updates-spacing,
+    // custom font size
+    1.2em //
+);
+
+/* 
+ * #################################
+ * #     Submap Module Styling     #
+ * #################################
+ */
+@include styleModule(
+    //
+    // class name
+    'submap',
+    // label color
+    $bar-buttons-modules-submap-text,
+    // icon color
+    $bar-buttons-modules-submap-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-submap-icon_background,
+    // label background
+    $bar-buttons-modules-submap-background,
+    // inner spacing
+    $bar-buttons-modules-submap-spacing,
+    // custom font size
+    1.2em //
 );
 
 /* 
@@ -215,21 +243,22 @@
  * #    Weather Module Styling     #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'weather-custom',
-  // label color
-  $bar-buttons-modules-weather-text,
-  // icon color
-  $bar-buttons-modules-weather-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-weather-icon_background,
-  // label background
-  $bar-buttons-modules-weather-background,
-  // inner spacing
-  $bar-buttons-modules-weather-spacing,
-  // custom font size
-  1.2em //
+@include styleModule(
+    //
+    // class name
+    'weather-custom',
+    // label color
+    $bar-buttons-modules-weather-text,
+    // icon color
+    $bar-buttons-modules-weather-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-weather-icon_background,
+    // label background
+    $bar-buttons-modules-weather-background,
+    // inner spacing
+    $bar-buttons-modules-weather-spacing,
+    // custom font size
+    1.2em //
 );
 
 /* 
@@ -237,19 +266,20 @@
  * #    Power Module Styling       #
  * #################################
  */
-@include styleModule( //
-  // class name
-  'powermodule',
-  // label color
-  $red,
-  // icon color
-  $bar-buttons-modules-power-icon,
-  // icon background if split style is used
-  $bar-buttons-modules-power-icon_background,
-  // label background
-  $bar-buttons-modules-power-background,
-  // inner spacing
-  $bar-buttons-modules-power-spacing,
-  // custom font size
-  1.3em //
+@include styleModule(
+    //
+    // class name
+    'powermodule',
+    // label color
+    $red,
+    // icon color
+    $bar-buttons-modules-power-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-power-icon_background,
+    // label background
+    $bar-buttons-modules-power-background,
+    // inner spacing
+    $bar-buttons-modules-power-spacing,
+    // custom font size
+    1.3em //
 );

From 66579e71c6fc78320c9237b4b4b137346d9f0e00 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Mon, 23 Sep 2024 22:18:18 -0700
Subject: [PATCH 2/3] Captilazation is muy importante.

---
 customModules/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/customModules/theme.ts b/customModules/theme.ts
index 8517f3d01..39f9d774d 100644
--- a/customModules/theme.ts
+++ b/customModules/theme.ts
@@ -110,7 +110,7 @@ export const CustomModuleTheme = (): Scrollable<GtkWidget, Attribute> => {
                     type: 'color',
                 }),
 
-                Header('submap'),
+                Header('Submap'),
                 Option({ opt: options.theme.bar.buttons.modules.submap.text, title: 'Text', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.modules.submap.icon, title: 'Icon', type: 'color' }),
                 Option({

From 602b09437e7befe742ff6f52d2a96e341b6122de Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Mon, 23 Sep 2024 22:27:43 -0700
Subject: [PATCH 3/3] Add border config

---
 customModules/config.ts             |  5 +++++
 customModules/theme.ts              |  1 +
 options.ts                          |  2 ++
 scss/style/customModules/style.scss | 27 +++++++++++++++++++++++++++
 4 files changed, 35 insertions(+)

diff --git a/customModules/config.ts b/customModules/config.ts
index 83da306e7..07092ac04 100644
--- a/customModules/config.ts
+++ b/customModules/config.ts
@@ -416,6 +416,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                  ************************************
                  */
                 Header('Submap'),
+                Option({
+                    opt: options.theme.bar.buttons.modules.submap.enableBorder,
+                    title: 'Button Border',
+                    type: 'boolean',
+                }),
                 Option({
                     opt: options.bar.customModules.submap.enabledIcon,
                     title: 'Enabled Icon',
diff --git a/customModules/theme.ts b/customModules/theme.ts
index c88e885e9..2ac92ff90 100644
--- a/customModules/theme.ts
+++ b/customModules/theme.ts
@@ -131,6 +131,7 @@ export const CustomModuleTheme = (): Scrollable<GtkWidget, Attribute> => {
                         "Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
                     type: 'color',
                 }),
+                Option({ opt: options.theme.bar.buttons.modules.submap.border, title: 'Border', type: 'color' }),
 
                 Header('Weather'),
                 Option({ opt: options.theme.bar.buttons.modules.weather.icon, title: 'Icon', type: 'color' }),
diff --git a/options.ts b/options.ts
index b38801c07..7a5bd92fc 100644
--- a/options.ts
+++ b/options.ts
@@ -351,6 +351,8 @@ const options = mkOptions(OPTIONS, {
                         spacing: opt('0.45em'),
                     },
                     submap: {
+                        enableBorder: opt(false),
+                        border: opt(colors.teal),
                         background: opt(colors.base2),
                         text: opt(colors.teal),
                         icon: opt(colors.teal),
diff --git a/scss/style/customModules/style.scss b/scss/style/customModules/style.scss
index 69bd0d66a..3132ff839 100644
--- a/scss/style/customModules/style.scss
+++ b/scss/style/customModules/style.scss
@@ -279,6 +279,33 @@
     1.2em //
 );
 
+/* 
+ * #################################
+ * #    Submap Module Styling      #
+ * #################################
+ */
+@include styleModule(
+    //
+    // class name
+    'submap',
+    // label color
+    $bar-buttons-modules-submap-text,
+    // icon color
+    $bar-buttons-modules-submap-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-submap-icon_background,
+    // label background
+    $bar-buttons-modules-submap-background,
+    // inner spacing
+    $bar-buttons-modules-submap-spacing,
+    // if border enabled
+    $bar-buttons-modules-submap-enableBorder,
+    // border color
+    $bar-buttons-modules-submap-border,
+    // custom font size
+    1.2em //
+);
+
 /* 
  * #################################
  * #    Weather Module Styling     #