diff --git a/client/ui/qml/Controls2/DrawerType.qml b/client/ui/qml/Controls2/DrawerType.qml
index 4ea24091..c22d00c2 100644
--- a/client/ui/qml/Controls2/DrawerType.qml
+++ b/client/ui/qml/Controls2/DrawerType.qml
@@ -50,22 +50,24 @@ Drawer {
         if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) {
             PageController.updateNavigationBarColor(0xFF1C1D21)
         }
-    }
-
-    onOpened: {
-        isOpened = true
 
         if (needCloseButton) {
             PageController.drawerOpen()
         }
     }
 
-    onClosed: {
-        isOpened = false
-
+    onAboutToHide: {
         if (needCloseButton) {
             PageController.drawerClose()
         }
+    }
+
+    onOpened: {
+        isOpened = true
+    }
+
+    onClosed: {
+        isOpened = false
 
         var initialPageNavigationBarColor = PageController.getInitialPageNavigationBarColor()
         if (initialPageNavigationBarColor !== 0xFF1C1D21) {
diff --git a/client/ui/qml/Pages2/PageHome.qml b/client/ui/qml/Pages2/PageHome.qml
index 61fff248..0d39a51e 100644
--- a/client/ui/qml/Pages2/PageHome.qml
+++ b/client/ui/qml/Pages2/PageHome.qml
@@ -61,6 +61,7 @@ PageType {
         drag.maximumY: root.height - buttonContent.collapsedHeight
         drag.minimumY: 100
 
+        /** If drag area is released at any point other than min or max y, transition to the other state */
         onReleased: {
             if (buttonContent.state === "collapsed" && buttonContent.y < dragArea.drag.maximumY) {
                 buttonContent.state = "expanded"
@@ -96,8 +97,11 @@ PageType {
     ColumnLayout {
         id: buttonContent
 
+        /** Initial height of button content */
         property int collapsedHeight: 0
+        /** True when expanded objects should be visible */
         property bool expandedVisibility: buttonContent.state === "expanded" || (buttonContent.state === "collapsed" && dragArea.drag.active === true)
+        /** True when collapsed objects should be visible */
         property bool collapsedVisibility: buttonContent.state === "collapsed" && dragArea.drag.active === false
 
         Drag.active: dragArea.drag.active
@@ -109,6 +113,7 @@ PageType {
             buttonContent.state = "collapsed"
         }
 
+        /** Set once based on first implicit height change once all children are layed out */
         onImplicitHeightChanged: {
             if (buttonContent.state === "collapsed" && collapsedHeight == 0) {
                 collapsedHeight = implicitHeight
@@ -133,6 +138,7 @@ PageType {
             }
         }
 
+        /** Two states of buttonContent, great place to add any future animations for the drawer */
         states: [
             State {
             name: "collapsed"