Further customization of compact navigation bar

[Hopy-Jaden]

Context
I’ve seen that the navigation view rework is set to be released later this year on Discord (very excited about it). As a result, I decided to update this issue to provide some insight. It would be fantastic if adjustments could be made based on these suggestions, making it easier to customize the navigation view in the future. XD

Also, I opened a new issue #1181 as I am not sure if it is a bug or an enhancement.

Display Mode Enhancement

Is your feature request related to a problem? Please describe.
Flutter is a multi-platform framework, solely following winUI into all platform may create unwanted experience, especially when it is not touch-friendly to use the navigation view on mobile due to the small touch area. Also, there are many variation of fluent UI navigation view by Microsoft that cannot accomplished by current library implementation, as illustrated below. There is a need to unify FluentUI design and WinUI design adaptation in different scenarios.

Open-styled Navigation bar in Onedrive desktop and File Explorer	Compact-styled with large Icon in Microsoft Teams	Tab View with large icon in Onedrive Mobile

Describe the solution you'd like
Current implementation for Navigation Pane:

 pane: NavigationPane(
    //
    displayMode: DisplayMode.auto
  ...
 )

Instead of having 6 enums, top, left, open, compact, minimal, auto, having NavigationPaneDisplayMode() would solve the problem:

 pane: NavigationPane(
    displayMode: NavigationPaneDisplayMode(

       // default position of desktop and tablet sized screen: left
       // default position of mobile sized screen: bottom
       // all available position include 'left' (indicator at left of PaneItem), 'right' (indicator at left of PaneItem), 'top' (indicator at bottom of PaneItem), 'bottom' (indicator at bottom of PaneItem)
       // to replace DisplayMode.top, DisplayMode.left
       position: left,

       // default alignment of desktop sized screen: horizontal
       // default alignment of tablet and mobile sized screen: vertical
       // all available alignment include 'horizontal', 'vertical'
       // to replace DisplayMode.open, DisplayMode.compact
       paneItemAlighment: horizontal,

       // default boolean is false
       // to replace DisplayMode.minimal
       isMinimal: false,

       // default boolean of desktop sized screen: false
       // default boolean of tablet and mobile sized screen: true
       isLargeIcon: false,

       // default : true
       showPaneItemLabel: false,
    ),
    items: [
         PaneItem(
            icon: const Icon(FluentIcons.issue_tracking),

            // new parameter to allow change the icon (colour) on selected like onedrive and teams
            // by default same as pane item icon if not specified
            onSelectedIcon: const Icon(FluentIcons.issue_tracking),
         ),
       ],
    ),
  ...
 )

Now, here is some examples on how to use the new parameter:

New Parameter:	position	paneItemAlignment	isMinimal	isLargeIcon	showPaneItemLabel	onSelectedIcon in PaneItem
Case 1: old DisplayMode.open	left	horizontal	false	false	true	same as icon in PaneItem
Case 2: old DisplayMode.compact	left	horizontal	false	false	false	same as icon in PaneItem
Case 3: old DisplayMode.minimal	left	horizontal	true	false	true	same as icon in PaneItem
Case 4: old DisplayMode.top	top	horizontal	false	false	true	same as icon in PaneItem
Case 5: old DisplayMode.left	left	horizontal	false	false	true	same as icon in PaneItem
Case 6: Onedrive Desktop Navigation view	left	horizontal	false	false	true	different from icon in PaneItem
Case 7: Teams Desktop Navigation view	left	vertical	false	true	true	different from icon in PaneItem
Case 8: Onedrive Mobile Navigation View	top	vertical	false	true	true	different from icon in PaneItem

Describe alternatives you've considered
N.A.

Header Item Enhancement

Is your feature request related to a problem? Please describe.
Various Fluent Design applications utilize different combinations of the menu button, back button, search button, and app icon to enhance user experience based on their specific needs, as illustrated in the images below. However, the current version of fluent ui library does not allow for this level of customization.

Whatsapp (by Meta)	Media Player (by Microsoft)	Clock (by Microsoft)

However, sometimes these header item appear in title bar instead as picture showed below, appbar should also be listed into consideration when making header item enhancement.
Variation in app bar in different fluent apps:

Official App Bar guideline by Microsoft:

Describe the solution you'd like

Current implementation for Navigation Pane:

 pane: NavigationPane(

    //menu Button and header in navigation pane
    menuButton: ..
    header: ...

    //auto suggest box in navigation pane
    autoSuggestBox: ...
    autoSuggestBoxReplacement: ...
 ),
 appBar: NavigationAppBar(

    //leading Widget, usually app icon in navigation app bar
    leading: ..
    automaticallyImplyLeading: ..

    //title Widget, usually text widget of app title in navigation app bar
    title: ..

    //action Widget, usually some icons on the right side of the title in navigation app bar
    action: ...
 ),

Instead of having four parameter, an unified parameter "headerItems" in NavigationPane() would solve the problem, which can specify header items in the blue NavigationPane section illustrated in the picture below:

 pane: NavigationPane(

    //default list of <NavigationPaneItem> returned which can be overwritten by user
    //user therefore can choose the presence and order of buttons by customizing the list
    headerItems: [

        // by default not included in this list, but included in list in NavigationAppBar()
        // corresponding back button widget
/*     PaneItemBackButton(
            icon: Icon(FluentIcons.back), // default icon for PaneItemBackButton
        ),      */

        // by default included in list unless it is DisplayMode(mode: minimal)
        // corresponding menu button widget to toggle the pane, replacing "menuButton" and "header" parameter
        PaneItemToggleButton(
            icon: Icon(FluentIcons.menu), // new parameter: default menu icon for PaneItemMenuHeader
            header: PaneItemHeader(), // by default no header shown
        ),

        // by default not included in the list, but can be included by user
        // corresponding auto suggest box widget replacing "autoSuggestBox" and "autoSuggestBoxReplacement" parameter
/*     PaneItemAutoSuggestBox(
            autoSuggestBox: AutoSuggestBox(), // return auto suggest box for this parameter
            replacement: Icon(FluentIcons.search), // default icon for PaneItemAutoSuggestBox to be replaced when there is no enough space
        ),      */
    ],
  ...
 )

Furthermore, rather having leading, title, action, more parameters should be added in NavigationAppBar() would enable more flexibility:

 appBar: NavigationAppBar(

    //leading parameter should return a list of <NavigationPaneItem> instead, which can be overwritten by user
    //default list of <NavigationPaneItem> returned which can be overwritten by user
    //user therefore can choose the presence and order of buttons by customizing the list
    leading: [

        // corresponding back button widget
        // replacing the automaticallyImplyLeading parameter
       PaneItemBackButton(
            icon: Icon(FluentIcons.back), // default icon for PaneItemBackButton
        ),

        // by default not included in list unless it is DisplayMode(mode: minimal)
        // corresponding menu button widget to toggle the pane, replacing "menuButton" and "header" parameter
/*     PaneItemToggleButton(
            icon: Icon(FluentIcons.menu), // new parameter: default menu icon for PaneItemMenuHeader
            header: PaneItemHeader(), // by default no header shown
        ),      */

        // by default not included in the list, but can be included by user
        // corresponding app Icon that can be added 
/*     PaneItemWidgetAdapter(
            child: Widget(), // return any widget?
        ),      */
    ],

    //new subtitle parameter is added for user showing "Preview" , "Beta", "Canary" etc.
    //by default subtitle will not be shown?
    title: Widget(),
    subtitle: Widget(),

    //new content parameter is added, which are widget centred in the app bar, usually a auto suggest box
    //this make life much easier, as current implementation is very difficult at doing so
    // by default not included in the list, but can be included by user
    content: Widget(),
/*     PaneItemAutoSuggestBox(
            autoSuggestBox: AutoSuggestBox(), // return auto suggest box for this parameter
            replacement: Icon(FluentIcons.search), // default icon for PaneItemAutoSuggestBox to be replaced when there is no enough space
        ),      */

    //widget returned in action parameter should now be all aligned at the right of the app bar
    //buttons include like account picture, close, minimize and maximize button for windows apps
    action: Widget(),

  ...
 )

Describe alternatives you've considered

Here is the Old suggestion on 23/1/2023 of alternative solution considered

Is your feature request related to a problem? Please describe.

The pictures below show that there are different styles of compact navigation. They have a different combination of the hamburger menu button, backward button, search button, and app icon. However, the current version of compact navigation cannot provide this customization.

Describe the solution you'd like
customization by adding parameters like showBeforeLeadingAppIcon to choose whether the navigation tab appears on the left of the app Icon.
Adding parameters like controlsOrder to order and show wanted controls(backward button, hamburger menu, search button etc.)

 pane: NavigationPane(
    selected: topIndex,
    onChanged: (index) => setState(() => topIndex = index),
    displayMode: displayMode,
    showBeforeLeadingAppIcon: true //bool parameter default with true, just like the media player
    //can remove the buttons by not adding to the controlsOrder List of the controlsOrder parameter
    controlsOrder: List<controlsOrder>[BackwardButton, HamburgerMenu, SearchButton] //the default order of list parameter, 
  ...
 )

Describe alternatives you've considered
N/A

Additional context
N/A

Decluster Enhancement

Is your feature request related to a problem? Please describe.
Microsoft actually didn't specify strictly on how the elevation/colour difference should look between navigation bar and main body page content. The colour difference choice helps establish hierarchy between the navigation bar and main body page content, meanwhile removing the colour difference help reduce visual stress and make the app look as a whole.

With border, No colour difference? (Current Library Implementation)	With border, With colour difference (by Microsoft before 2023)	No border, No colour difference (by Microsoft after 2023?)

Describe the solution you'd like

 NavigationView(
    // new parameter to decide whether there will be border between navigation bar and body part
    // default false like dev home
    isBorderShown: false,

    // new parameter to decide whether there will be colour difference between navigation bar and body part
    // default false like dev home, to reduce visual stress
    isMainViewElevated: false,
  ...
 )

Describe alternatives you've considered
N.A.

Separatability Enhancement

Is your feature request related to a problem? Please describe.

In #668, I have questioned if it is possible to make something with tabs of the top navigation view with the Page header in the header parameter like the image below:

And here is the answer received on Nov 19, 2024:

I suggest you to read #919.

What you're trying to achieve is called Pivot and was deprecated in Windows UI 2 and is not going to be implemented in this library.

However, according to the guideline, pivot was deprecated and replaced by a new widget called the SelectorBar, which is actually the same idea as the one I questioned in #668. This widget enables more flexibility, making separating the top navigation bar out possible

Describe the solution you'd like
A new widget SelectorBar() should be introduced in the navigation view rework, which can be built on the original code of the NavigationView().

Describe alternatives you've considered
Modify the original code of the NavigationView() to allow the navigation bar and body page content to be separable.

[bdlukaa]

See #919

[bdlukaa]

Hello!

For the SelectorBar, see #1265.

We've recently merged part of navigation view rework and you should be able to use some updates from it.

Decluster Enhancement

You can customize the color for the pane, app bar and body in the app theme.

Header Item Enhancement

TopBar has been introduced as the new app bar widget and it follows the microsoft guidance. The navigation view is smart enough to move the pane toggle button to the app bar or the side bar whether the top bar is present or no. You can also now configure if and where the toggle button will be displayed.

Display Mode Enhancement

What do you think of a function that lets the developer calculates the display mode when set to auto?

[Hopy-Jaden]

Bugs observed in example apps

(1) Cannot Navigate

1. Navigation View cannot navigate for drop down menu (first half of the video 1) (video 2)
2. When the top view is minized in 3 dot, the menu disappear (second half of the video 1)

To Reproduce
Steps to reproduce the behavior:

1. Go to example app
2. Switch to top mode/minimal mode
3. Go and navigate to different page and no page can be navigated

Screenshots
Video 1

20251218-2316-16.7135667.mp4

Video 2

20251218-2332-39.8461088.mp4

(2) Sticky navigator fly away...?

When clicking on the expander item, there is a sticky indicator pop up unintentionally in its child? (video 3)
Video 3

20251218-2351-24.1944590.mp4

(3) Paneitemheader is not working

Paneitemheader not appearing despite added in the pane code

(4) Incorrect color of backitem in dark mode

I think the background color of the arrow should be the same as the background. Both arrow button in Light mode and dark mode are incorrect. (see #1181)

(5) Expander item suddenly collapse

when expander item is inside a expander item, it suddenly collapse during navigating its child item (video 4)
Video 4

20251218-2358-35.2619308.mp4

(6) End Sticky indicator does not look right

I am very glad that the sticky indicator is correctly sized and rounded as fixed in #1181.
But possibly because of modifying the roundness data, the end sticky indicator is turned from its original sharp edge into a rounded indicator.

Expected correction:
sticky indicator radius data: keep the same
end indicator radius: should be rectangle in shape, radius of 0px I believe.

[Hopy-Jaden]

Display Mode Enhancement

I think having a function that lets the developer calculate the display mode when set to auto would be a good idea.