[Tim]

Is there a way to customize the look of the navigation items in a drawer?  I’d like to have one of the items bold and have a section header that is not a navigation item.  For example:

Food
Gifts
Rentals
Shows
Visitor Info (Section Header that is centered in the drawer and not left justified like the others)
Admissions
Hours
Buy Tickets

[AlexFelgo Team]

Hi,

you’ll have to create an own item based on the AppDrawer fur such a level of customization. You can then set it as drawer of your navigation.

Cheers,
Alex

[Tim]

Hi Alex,

Sorry, I’m not following you.  Is there an example out there on this? Anything other than a NavigationItem throws an error.

Thanks,

Tim

[AlexFelgo Team]

Hi Tim,

sorry that was actual party wrong advice. The “drawer” property of the Navigation is actually only an alias to the internal drawer and cannot simply be replaced.

The first part still applies though. You’ll have to create a custom AppDrawer component with your desired buttons and sections. To hide the default drawer, you can set the navigationMode of the Nagivation to: navigationModeNone

You can get or set the current active item in the Navigation with this property: https://felgo.com/doc/felgo-navigation/#currentIndex-prop

We’ll have a look if we can simplify this with our next update.

Cheers,
Alex

[Tim]

I can’t get this to work properly.  I created a custom AppDrawer and added a Navigation component inside the AppDrawer component but it adds the Page from the NavigationStack to the drawer and not to the main page.  Is there a quick sample code that uses the AppDrawer and Navigation?

Thanks,

Tim

[Silvio]

Hi guys,

Alex said “We’ll have a look if we can simplify this with our next update.”. Has it been done?

I actually need to create a badge notification status on menu items. On Android it works fine, but in iOS menu they are just not shown. How can I fix that?

[AlexFelgo Team]

Since this question was also asked via email, I am posting this also here for reference. This example adds a custom item above the tab navigation, to display notification badges along with the navigation items in the bottom tab navigation:

import QtQuick 2.0
import Felgo 3.0

App {
  id: app

  Navigation {
    id: navigation
    // Use tabs on all platforms
    navigationMode: navigationModeTabs
    // Tabs can be accessed and further modified like this
    tabs.showOnlySelectedLabel: false

    NavigationItem {
      title: "Tab 1"
      icon: IconType.heart
      badgeValue: "2"

      NavigationStack {
        Page {
          title: "Tab 1"
        }
      }
    }

    NavigationItem {
      title: "Tab 2"
      icon: IconType.car

      NavigationStack {
        Page {
          title: "Tab 2"
        }
      }
    }
  }

  // Custom overlay with badges
  Item {
    id: badgeOverlay
    width: parent.width
    height: dp(Theme.navigationTabBar.height) + nativeUtils.safeAreaInsets.bottom
    anchors.bottom: parent.bottom

    Row {
      // We can access the NavigationItems using the navItems property
      Repeater {
        model: navigation.navItems

        delegate: Item {
          width: badgeOverlay.width / navigation.navItems.length
          height: dp(Theme.navigationTabBar.height)

          Rectangle {
            // Only show if badeValue exists
            visible: modelData.badgeValue ? true : false
            width: dp(16)
            height: dp(16)
            color: "red"
            radius: width/2
            anchors.centerIn: parent
            anchors.verticalCenterOffset: -dp(12)
            anchors.horizontalCenterOffset: dp(15)

            AppText {
              text: modelData.badgeValue
              color: "white"
              font.pixelSize: sp(12)
              anchors.centerIn: parent
            }
          }
        }
      }
    }
  }
}

Cheers,
Alex