Styling the navigation bar

Starting with the easy part, let’s first move our hard-coded colors and icon pixel size fromNavigationButtoninto Style.qml:

readonly property color colourNavigationBarBackground: "#000000"readonly property color colourNavigationBarFont: "#ffffff"readonly property int pixelSizeNavigationBarIcon: 42

We now need to think about how we want to size the elements of our button. We have an icon which we want to be square, so the width and height will be the same. Next, to that, we have a text description that will be the same height as the icon but will be wider:

The width of the entire component is the width of the icon plus the width of the description. The height of the entire component is the same as both the height of the icon and description; however, it gives us more flexibility to make the height the same as whichever is the larger of the two. That way, if we ever decide to make one item larger than the other, we know that the component will be large enough to contain...