[Jonathan]

I’m setting up a Felgo App that has both TabControl and a Side Drawer Navigation for all platforms (each with a different mix of navigation items).

To open the Side Drawer, I’m using IconButtonBarItem on the first page of each major section, but the clickable area seems to not include the icon itself and consists of an invisible sliver of the navigation bar just to the right of the icon. This is true for all platform themes. Below is a simplified reconstruction of my app.

Main.qml

import Felgo 3.0
import QtQuick 2.0

App {    
    id: app
    onInitTheme: { // Custom theme settings }
    MainPage { }
}

 

MainPage.qml

import Felgo 3.0
import QtQuick 2.0
import "pages"

Page {
    id: mainPage
    SideNav { id: sideNav }
    TabControl {
        tabPosition: Qt.BottomEdge
        showIcon: true
        NavigationItem {
            icon: IconType.briefcase
            AccountsPage { }
        }
        NavigationItem {
            icon: IconType.arrowdown
            ReceivePage { }
        }
        NavigationItem {
            icon: IconType.arrowup
            SendPage { }
        }
        NavigationItem {
            icon: IconType.thlist
            ActivityPage { }
        }
    }
}

 

pages/AccountsPage.qml

import Felgo 3.0
import QtQuick 2.0

NavigationStack {
    id: stack
    Page {
        title: qsTr("Accounts")

        leftBarItem: IconButtonBarItem {  // <-- ICON NOT CLICKABLE
            icon: IconType.bars
            onClicked: sideNav.open()
        }
        // Page contents
    }
}

 

pages/SideNav.qml

import Felgo 3.0
import QtQuick 2.0

AppDrawer {
    id: sideNav
    z: 1
    // SideNav content
    }
}

 

[Jonathan]

UPDATE:

I figured out the issue. The width of the AppDrawer.slideInDist property was obscuring the left navigation button. When I adjusted the width down to dp(16), it was no longer in the way.

[GüntherFelgo Team]

Hi Jonathan,

your solution is correct. When dealing with multiple items that receive touch input by e.g. using a MouseArea, overlapping touch areas can prevents touch input from going through to underlying components.

For the drawer, the slideInDist property sets the size of the touch-area for the drawer slide-in gesture.