Show only part of Qt Qml Drawer

I want to show only half of a QML Drawer. The idea is to keep some important information in the visible part of the drawer and then let the user show the full drawer with more information.

From the documentation I thought that the

position property should be suitable for this:

Drawer {
  modal: false
  interactive: false
  position: 0.5 // does not work
}

But setting the position does not have an effect. Is it possible to show only a part of the drawer?

As mentioned in my comment, you may want to turn your concept inside out, and have the Drawer inherit its size from its contents, and have the contents change, rather than hardcode its size and manipulate its position.

Here is a full example that shows the idea. The drawer contains a RowLayout which contains "info" and "extra info" - the extra info's visibility is toggled via interaction, and thus changes the size of the drawer, which always stays at the 100% open position, but changes width automatically.

import QtQuick 2.12
import QtQml 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    id: root
    width: 640
    height: 480
    visible: true

    Drawer {
        id: drawer
        height: root.height
        // width automatically derived from RowLayout child's implicitWidth

        onClosed: detailed.visible = false

        RowLayout {
            height: parent.height
            spacing: 0

            Rectangle {
                id: detailed
                color: "lightcyan"
                Layout.fillHeight: true
                Layout.preferredWidth: 200
                visible: false // when not visible, this does not add to the RowLayout's implicitWidth

                Text {
                    anchors {
                        centerIn: parent
                    }
                    text: "Extra Info\n Click to close"
                }

                MouseArea {
                    anchors {
                        fill: parent
                    }

                    onClicked:  {
                        detailed.visible = false
                    }
                }
            }

            Rectangle {
                color: "lightpink"
                Layout.fillHeight: true
                Layout.preferredWidth: 200

                Text {
                    anchors {
                        centerIn: parent
                    }
                    text: "Regular Info\n Click to open extra info"
                }

                MouseArea {
                    anchors {
                        fill: parent
                    }

                    onClicked:  {
                        detailed.visible = true // toggling visibility automatically makes the Drawer wider
                    }
                }
            }
        }
    }

    MouseArea {
        id: mouse
        anchors {
            fill: parent
        }

        onClicked:  {
            drawer.open()
        }
    }

    Text {
        anchors {
            centerIn: parent
        }
        text: "Click to open drawer"
    }
}