How to create Material Design navigation drawer in Qt using qml

Question

I'm trying to create a navigation drawer like the image below:

First I tried it with ListView

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

ApplicationWindow{

    id: window
    visible: true

    width: 640
    height: 480
    title: "Dashboard"

    Material.theme: Material.Light
    Material.primary: "#1de9b6"
    Material.accent: "#3d5afe"

    header: ToolBar{

        RowLayout{

            anchors.fill: parent

            ToolButton{
                id: btnDrawer
                icon.source:  "qrc:/icons/icons/ic_drawer.svg"
                onClicked: {

                    if(!navDrawer.opened)
                        navDrawer.open()

                    if(navDrawer.opened)
                        navDrawer.close()

                }
            }

            Item{
                Layout.fillWidth: true
            }

            ToolButton{
                id: btnUsuario
                icon.source: "qrc:/icons/icons/ic_bullet_menu.svg"
            }

        }

    }

    Drawer{

        id: navDrawer

        y: header.height
        width: window.width / 3
        height: window.height - header.height

        ListView{

            model: ListModel{

                ListElement{
                    icon: "qrc:/icons/icons/ic_people.svg"
                    name: "Hopsede"
                }

            }

            delegate: Item{


                Image{
                    source: icon
                }

                Text{
                    text: name
                }

            }

        }

    }

}

And this is the result:

Not cool. Now i tried using Layouts

Almost good, but still not clickable and not hoverable effect, now finaly i tried used buttons:

This time it was far from looking like a navigation drawer, I intend to make the entire desktop application using material design for having a good appearance, but I'm not able to replicate some components like this

Answer 1

Your root delegate item has no size, which is why everything is jumbled together. The docs for ListView say:

The ListView will lay out the items based on the size of the root item in the delegate.

So you need to either give it a size, or use an item that has an implicit size, like ItemDelegate :

delegate: ItemDelegate {
    text: model.name
    width: parent.width
    icon.source: model.icon
}

Note that in that example, the width is set so that it takes up the entire ListView . If you don't do that, it will still have a valid size, it will just likely be too small.

You probably also want to make the ListView fill the Drawer :

anchors.fill: parent