HIdeable menu bar

[RobM]

I am looking for a hideable menu bar similar to what you might find on your Samsung phone for the top bar. Can someone point me at a good example of doing that? I would like all but a small portion of the menu bar to collapse when swiped or pressed s/t the user still has an icon to click/swipe in order to unhide the menu bar.

[RobM]

I have something rather simple working:

        NumberAnimation
        {
            id: animationClose
            target: block_1
            property: "y"
            to: 110
            duration: 1000
        }
        NumberAnimation
        {
            id: animationOpen
            target: block_1
            property: "y"
            to: 0
            duration: 1000
        }
        Rectangle
        {
          id: rect
          anchors.horizontalCenter: rowthinger.horizontalCenter
          anchors.bottom: rowthinger.top
          height: 15
          width: 250
          radius: 10
          MouseArea
          {
            anchors.fill: rect

            onClicked:
            {
              if(!block_1.isClosed)
              {
                animationClose.start()
                block_1.isClosed = true
              }
              else
              {
                animationOpen.start()
                block_1.isClosed = false
              }
            }
          }
        }

It's attached to a row of buttons so the whole thing slides away or back out when the Rectangle is clicked. However, I feel like there is a more appropriate way of doing this using States, no?