use multieffect for shadows

.config/quickshell/modules/sidebarRight/SidebarRight.qml

@@ -7,6 +7,7 @@ import "./quickToggles/"
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
 import Quickshell.Io
 import Quickshell
@@ -65,6 +66,16 @@ Scope {
                 color: Appearance.colors.colLayer0
                 radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1
 
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    source: sidebarRightBackground
+                    anchors.fill: sidebarRightBackground
+                    shadowEnabled: true
+                    shadowColor: Appearance.colors.colShadow
+                    shadowVerticalOffset: 1
+                    shadowBlur: 0.5
+                }
+
                 Keys.onPressed: (event) => {
                     if (event.key === Qt.Key_Escape) {
                         sidebarRoot.hide();
@@ -164,17 +175,6 @@ Scope {
                 }
             }
 
-            // Shadow
-            DropShadow {
-                anchors.fill: sidebarRightBackground
-                horizontalOffset: 0
-                verticalOffset: 2
-                radius: Appearance.sizes.elevationMargin
-                samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
-                color: Appearance.colors.colShadow
-                source: sidebarRightBackground
-            }
-
         }
     }
 

.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml

@@ -4,8 +4,8 @@ import "root:/services"
 import "root:/modules/common/functions/color_utils.js" as ColorUtils
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Effects
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
@@ -173,25 +173,15 @@ Item {
             Behavior on color {
                 animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
             }
-        }
 
-        DropShadow {
-            id: fabShadow
-            anchors.fill: fabBackground
-            source: fabBackground
-            horizontalOffset: 0
-            verticalOffset: fabButton.hovered ? 4 : 2
-            radius: fabButton.hovered ? Appearance.sizes.fabHoveredShadowRadius : Appearance.sizes.fabShadowRadius
-            samples: fabShadow.radius * 2 + 1
-            color: Appearance.colors.colShadow
-            z: fabBackground.z - 1
-
-            Behavior on verticalOffset {
-                NumberAnimation {
-                    duration: Appearance.animation.elementMoveFast.duration
-                    easing.type: Appearance.animation.elementMoveFast.type
-                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
-                }
+            layer.enabled: true
+            layer.effect: MultiEffect {
+                source: fabBackground
+                anchors.fill: fabBackground
+                shadowEnabled: true
+                shadowColor: Appearance.colors.colShadow
+                shadowBlur: 0.6
+                shadowVerticalOffset: fabButton.hovered ? 4 : 2
             }
         }