sidebar todo

.config/quickshell/modules/common/Appearance.qml

@@ -162,7 +162,7 @@ Singleton {
 
     animation: QtObject {
         property QtObject elementDecel: QtObject {
-            property int duration: 180
+            property int duration: 200
             property int type: Easing.OutCirc
             property int velocity: 650
         }
@@ -171,8 +171,9 @@ Singleton {
             property int type: Easing.OutExpo
         }
         property QtObject positionShift: QtObject {
-            property int duration: 160
+            property int duration: 300
             property int type: Easing.InOutExpo
+            property int velocity: 650
         }
     }
 

.config/quickshell/modules/common/widgets/NavRailButton.qml

@@ -36,7 +36,6 @@ Button {
                     duration: Appearance.animation.elementDecel.duration
                     easing.type: Appearance.animation.elementDecel.type
                 }
-
             }
             MaterialSymbol {
                 id: navRailButtonIcon

.config/quickshell/modules/common/widgets/StyledTabButton.qml

@@ -0,0 +1,41 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Io
+
+TabButton {
+    id: button
+    property string buttonText
+    property string buttonIcon
+    property bool selected: false
+    height: buttonBackground.height
+
+    background: Rectangle {
+        id: buttonBackground
+        radius: Appearance.rounding.small
+        implicitHeight: 37
+        color: (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : Appearance.transparentize(Appearance.colors.colLayer1Hover, 1))
+        
+        Behavior on color {
+            ColorAnimation {
+                duration: Appearance.animation.elementDecel.duration
+                easing.type: Appearance.animation.elementDecel.type
+            }
+        }
+    }
+    contentItem: StyledText {
+        id: buttonTextWidget
+        anchors.centerIn: buttonBackground
+        horizontalAlignment: Text.AlignHCenter
+        text: buttonText
+        color: selected ? Appearance.m3colors.m3primary : Appearance.colors.colOnLayer1
+        Behavior on color {
+            ColorAnimation {
+                duration: Appearance.animation.elementDecel.duration
+                easing.type: Appearance.animation.elementDecel.type
+            }
+        }
+    }
+}