NavigationDrawer.qml

import QtQuick 2.4

Item {
    id: root
    default property alias data: contentItem.data
    readonly property bool showing: listView.currentIndex === 0
    property double peekWidth: 48
    property double touchWidth: 32
    property double paneWidth: Math.min(root.width - 128, 640)
    Text { text: paneWidth }

    function toggle() {
        listView.slide(!showing);
    }
    function show() {
        listView.slide(true);
    }
    function hide() {
        listView.slide(false);
    }
    anchors.fill: parent

    Item {
        id: clippingItem
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
        }
        width: Math.max(touchWidth, paneWidth + contentItem._offset - listView.contentX + listView.originX)
        z: 1
        clip: true

        ListView {
            id: listView

            function slide(show) {
                paneAnimation.to = show ? originX : paneWidth + originX;
                paneAnimation.easing.type = show ? Easing.OutCubic : Easing.InCubic;
                paneAnimation.start();
            }

            function peek(show) {
                peekAnimation.stop();
                peekAnimation.to = show ? peekWidth : 0;
                peekAnimation.easing.type = show ? Easing.OutCubic : Easing.InCubic;
                peekAnimation.start();
            }

            anchors {
                top: parent.top
                bottom: parent.bottom
            }
            width: root.width

            orientation: Qt.Horizontal
            snapMode: ListView.SnapToItem
            highlightRangeMode: ListView.StrictlyEnforceRange
            boundsBehavior: Flickable.StopAtBounds
            rightMargin: contentItem.peekOffset

            model: 2
            currentIndex: 1

            onMovementStarted: peekAnimation.stop()
            onMovementEnded: contentItem.peekOffset = 0

            Timer {
                id:timer
                running: mouser.pressed
                interval: 200;
                onTriggered: listView.peek(true)
            }

            MouseArea {
                id: mouser
                enabled: !showing
                anchors.fill: parent
                onReleased: listView.peek(false);
            }

            Binding on contentX {
                when: lol.pressed
                value: 300 - rect.x
            }

            Rectangle {
                id: rect
                x: 300
                visible: false
                width: 50
                height: width
                MouseArea {
                    id: lol
                    enabled: false
                    anchors.fill: parent
                    //anchors.leftMargin: paneWidth
                    preventStealing: drag.target
                    //onPressed: contentItem.peekOffset = mouse.x
                    onPressed: print("pressed" + listView.contentX)
                    onReleased: print("onReleased" + listView.contentX)
                    onCanceled: print("PROUTPROUTPROUT")
                    drag {
                        target: rect
                        onTargetChanged: print("target : " + drag.target)
                        axis: Drag.XAxis
                        maximumX: 100000
                        minimumX: -10000
                        threshold: 50
                    }
                }
            }


            delegate: Item {
                anchors {
                    top: parent.top
                    bottom: parent.bottom
                }
                width: paneWidth
            }

            NumberAnimation {
                id: peekAnimation
                target: contentItem
                property: "peekOffset"
                duration: 200
            }

            NumberAnimation {
                id: paneAnimation
                target: listView
                property: "contentX"
                duration: 500
            }

            Rectangle {
                id: contentItem
                property double peekOffset
                property double swipeOffset
                property double _offset: (mouser.pressed || listView.dragging || peekAnimation.running) ? peekOffset : Math.min(peekOffset, width + Math.max(- listView.contentX  + listView.originX, - paneWidth))
                anchors {
                    top: parent.top
                    bottom: parent.bottom
                }
                color: "white"
                x: Math.min(_offset - listView.contentX + listView.originX, 0)
                width: paneWidth
            }
        }
    }

    Rectangle {
        anchors.fill: parent
        color: Qt.rgba(0, 0, 0, 0.3)
        opacity: view.opacity
        MouseArea {
            id: wut
            enabled: showing
            anchors.fill: parent
            onClicked: hide();
        }
    }
    Rectangle {
        id: view
        anchors {
            top: parent.top
            bottom: parent.bottom
        }
        x: contentItem.x
        width: contentItem.width
        opacity: (contentItem.width + contentItem.x) / 32
    }
}