How to implement a menu sidebar, that slides in and out?

asked 2018-10-21 17:48:39 +0300

jsommer
3324 ●97 ●142 ●154

updated 2018-10-21 17:50:13 +0300

I wand to implement a menu sidebar with the following requirements:

1. The user should be able to slide in and out the sidebar
2. The expanded sidebar should overlapp the page content respectively columns
3. The list should beginn from the bottom to improve one hand control

A Drawer or DockedPanel seem to be the appropriate UI elements. It's possible to embed SilicaListView in both of them. I'm struggling with the following challenges:

• The Drawer has a full trasparent background. How to confiugre a background like the DockedPanel? The Drawer's animation feels more fluent than the animation of the DockedPanel.
• I could only manage to align the SilicaListView to the top of the panel, not at the button. I didn't found any property to invert the alignment.

Here are some code snippets:

DockedPanel {
         id: panel

         height: parent.height
         width: Theme.itemSizeExtraLarge+ 2 * Theme.paddingLarge

         dock: Dock.Right

         SilicaListView {
               anchors.fill : parent

               model: ListModel {
                        ListElement { content: "one" }
                        ListElement { content: "two" }
                        ListElement { content: "three" }
                        ListElement { content: "four" }
                        ListElement { content: "five" }
               }

               VerticalScrollDecorator {}

               delegate: ListItem {
                    id: menuItem
                    Label {
                             x: Theme.horizontalPageMargin
                             y: Theme.paddingLarge
                             text: content
                             anchors.leftMargin: Theme.horizontalPageMargin
                             anchors.bottom: parent.Bottom
                             color: menuItem.highlighted ? Theme.highlightColor : Theme.primaryColor
                    }
               }
         }
     }

And this is the one for the Drawer:

Drawer {
    id: leftMenu

    anchors.fill: parent
    dock: Dock.Left

    background: SilicaListView {
        anchors.fill: parent
        model: 5

        VerticalScrollDecorator {}

        delegate: ListItem {
            id: listItem

            Label {
                x: Theme.horizontalPageMargin
                text: "Menu Item " + modelData
                anchors.verticalCenter: parent.verticalCenter
                color: listItem.highlighted ? Theme.highlightColor : Theme.primaryColor
            }
        }
    }
}