feat(widget/volume): enhance volume widget with audio menu settings a…

…nd updated callbacks

Added new audio menu configuration options including blur effect, round corners, and alignment settings. Updated mouse event callbacks for improved functionality, allowing for toggling the volume menu and mute actions.

docs/widgets/(Widget)-Volume.md

@@ -5,7 +5,8 @@
 | `label_alt`  | string | `'{volume[percent]}%'`                                                  | The alternative format string for the volume label. Useful for displaying additional volume details. |
 | `tooltip`  | boolean  | `True`        | Whether to show the tooltip on hover. |
 | `volume_icons` | list  | `['\ueee8', '\uf026', '\uf027', '\uf027', '\uf028']`                    | A list of icons representing different volume levels. The icons are used based on the current volume percentage. |
-| `callbacks`  | dict   | `{'on_middle': 'do_nothing', 'on_right': 'do_nothing'}`                  | Callbacks for mouse events on the volume widget. |
+| `callbacks`  | dict   | `{'on_left': 'toggle_volume_menu', 'on_middle': 'do_nothing', 'on_right': 'toggle_mute'}`                  | Callbacks for mouse events on the volume widget. |
+| `audio_menu` | dict | `{'blur': True, 'round_corners': True, 'round_corners_type': 'normal', 'border_color': 'System', 'alignment': 'right', 'direction': 'down', 'distance': 6}` | Menu settings for the widget. |
 | `animation`         | dict    | `{'enabled': True, 'type': 'fadeInOut', 'duration': 200}`               | Animation settings for the widget.                                          |
 | `container_padding`  | dict | `{'top': 0, 'left': 0, 'bottom': 0, 'right': 0}`      | Explicitly set padding inside widget container. |
 
@@ -23,8 +24,18 @@ volume:
       - "\uf027"  # Icon for 11-30% volume
       - "\uf027"  # Icon for 31-60% volume
       - "\uf028"  # Icon for 61-100% volume
+     audio_menu:
+       blur: True
+       round_corners': True
+       round_corners_type': 'normal'
+       border_color': 'System'
+       alignment': 'right'
+       direction': 'down'
+       distance': 6
+    },
     callbacks:
-      on_right: "exec cmd.exe /c start ms-settings:sound"
+      on_left: "toggle_volume_menu"
+      on_right: "toggle_mute"
 ```
 
 ## Description of Options
@@ -33,6 +44,14 @@ volume:
 - **label_alt**: The alternative format string for the volume label. Useful for displaying additional volume details.
 - **tooltip**: Whether to show the tooltip on hover.
 - **volume_icons**: A list of icons representing different volume levels. The icons are used based on the current volume percentage.
+- **audio_menu**: A dictionary specifying the menu settings for the widget. It contains the following keys:
+  - **blur**: Enable blur effect for the menu.
+  - **round_corners**: Enable round corners for the menu (this option is not supported on Windows 10).
+  - **round_corners_type**: Set the type of round corners for the menu (normal, small) (this option is not supported on Windows 10).
+  - **border_color**: Set the border color for the menu (this option is not supported on Windows 10).
+  - **alignment**: Set the alignment of the menu (left, right).
+  - **direction**: Set the direction of the menu (up, down).
+  - **distance**: Set the distance of the menu from the widget.
 - **callbacks**: A dictionary specifying the callbacks for mouse events. The keys are `on_middle` and `on_right`, and the values are the names of the callback functions.
 - **animation:** A dictionary specifying the animation settings for the widget. It contains three keys: `enabled`, `type`, and `duration`. The `type` can be `fadeInOut` and the `duration` is the animation duration in milliseconds.
 - **container_padding**: Explicitly set padding inside widget container. Use this option to set padding inside the widget container. You can set padding for top, left, bottom and right sides of the widget container.
@@ -43,4 +62,33 @@ volume:
 .volume-widget .widget-container {}
 .volume-widget .label {}
 .volume-widget .icon {}
-```
+```
+
+## Style for the Audio Menu
+```css
+.volume-slider {
+    border: none;
+}
+.volume-slider::groove {}
+.volume-slider::handle{} 
+.audio-menu {
+    background-color:rgba(17, 17, 27, 0.4); 
+}
+.audio-container .device {
+    background-color:transparent;
+    border: none;
+    padding:6px 8px 6px 4px;
+    margin: 2px 0;
+    font-size: 12px;
+    border-radius: 4px;
+}
+.audio-container .device.selected {
+    background-color: rgba(255, 255, 255, 0.085);
+}
+.audio-container .device:hover {
+    background-color: rgba(255, 255, 255, 0.06);
+}
+```
+
+## Preview of the Widget
+![Volume Widget](assets/119849t2-ty6f89d1-as5e-9982-t6d7ddbdda70.png)