sidebar navigation item anims

.config/quickshell/modules/bar/Bar.qml

@@ -133,7 +133,7 @@ Scope {
                     anchors.right: parent.right
                     implicitHeight: barHeight
                     width: Appearance.sizes.barPreferredSideSectionWidth
-                    spacing: 20
+                    spacing: 5
                     layoutDirection: Qt.RightToLeft
             
                     Rectangle {

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

@@ -12,7 +12,7 @@ ToolTip {
     background: Rectangle {
         color: Appearance.colors.colTooltip
         radius: Appearance.rounding.small
-        implicitWidth: tooltipText.implicitWidth + 2 * padding
+        width: tooltipText.width + 2 * padding
     }
     StyledText {
         id: tooltipText

.config/quickshell/modules/sidebarRight/SidebarCalendar.qml

@@ -37,14 +37,92 @@ Rectangle {
                     buttonIcon: modelData.icon
                     onClicked: {
                         calendarRow.selectedTab = index
-                        console.log("Selected tab:", calendarRow.selectedTab)
                     }
                 }
             }
         }
-        Item { // Todo the real content goes here!
+        StackLayout {
+            id: tabStack
             Layout.fillWidth: true
             Layout.fillHeight: true
+            property int realIndex: 0
+            // currentIndex: 0
+            Connections {
+                target: calendarRow
+                function onSelectedTabChanged() {
+                    // console.log("Real index changed to: " + tabStack.realIndex)
+                    delayedStackSwitch.start()
+                    tabStack.realIndex = calendarRow.selectedTab
+                }
+            }
+            Timer {
+                id: delayedStackSwitch
+                interval: Appearance.animation.elementDecel.duration
+                repeat: false
+                onTriggered: {
+                    tabStack.currentIndex = calendarRow.selectedTab
+                }
+            }
+
+            Component {
+                id: calendarWidget
+                Rectangle {
+                    anchors.fill: parent
+                    color: "pink"
+                    width: 30; height: 30;
+                    radius: Appearance.rounding.small
+                    StyledText {
+                        anchors.margins: 10
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.top: parent.top
+                        text: "## Calendar\n- Lorem ipsum\n- Dolor shit amet\n\nSigma Ohayo rc1 Pro+ Premium Hippuland hi ask vaxry for pleas fix 123 Billions must lorem ipsum ipsum yesterdays tears are tomorrows coom awawawa"
+                        wrapMode: Text.WordWrap
+                        textFormat: Text.MarkdownText
+                    }
+                }
+            }
+            Component {
+                id: todoWidget
+                Rectangle {
+                    anchors.fill: parent
+                    color: "lavender"
+                    width: 30; height: 30;
+                    radius: Appearance.rounding.small
+                    StyledText {
+                        anchors.margins: 10
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.top: parent.top
+                        text: "## To Do\n- Lorem ipsum\n- Dolor shit amet\n\nSigma Ohayo rc1 Pro+ Premium Hippuland hi ask vaxry for pleas fix 123 Billions must lorem ipsum ipsum yesterdays tears are tomorrows coom awawawa"
+                        wrapMode: Text.WordWrap
+                        textFormat: Text.MarkdownText
+                    }
+                }
+            }
+
+            Repeater {
+                model: [
+                    { type: "calendar" },
+                    { type: "todo" }
+                ]
+                Item {
+                    id: tabItem
+                    property int tabIndex: index
+                    property string tabType: modelData.type
+                    property int animDistance: 5
+                    opacity: (tabStack.currentIndex === tabItem.tabIndex && tabStack.realIndex === tabItem.tabIndex) ? 1 : 
+                        (tabStack.currentIndex === tabItem.tabIndex && tabStack.realIndex !== tabItem.tabIndex) ? 0 :
+                        (tabStack.realIndex === tabItem.tabIndex) ? 1 : 0
+                    y: (tabStack.realIndex === tabItem.tabIndex) ? 0 : (tabStack.realIndex < tabItem.tabIndex) ? animDistance : -animDistance
+                    Behavior on opacity { NumberAnimation { duration: Appearance.animation.elementDecel.duration; easing.type: Easing.OutCubic } }
+                    Behavior on y { NumberAnimation { duration: Appearance.animation.elementDecel.duration * 2; easing.type: Easing.OutCubic } }
+                    Loader {
+                        anchors.fill: parent
+                        sourceComponent: (tabType === "calendar") ? calendarWidget : todoWidget
+                    }
+                }
+            }
         }
     }
 }

.config/quickshell/modules/sidebarRight/quickToggles/Bluetooth.qml

@@ -36,6 +36,8 @@ QuickToggleButton {
         }
     }
     StyledToolTip {
-        content: `${Bluetooth.bluetoothEnabled ? Bluetooth.bluetoothDeviceName : "Bluetooth"} | Right-click to configure`
+        content: `${(Bluetooth.bluetoothEnabled && Bluetooth.bluetoothDeviceName.length > 0) ? 
+            Bluetooth.bluetoothDeviceName : "Bluetooth"} | Right-click to configure`
+
     }
 }