Code Quality: Added navigation button overflow menu (#17195)

Author: yaira2

src/Files.App/Strings/en-US/Resources.resw

@@ -4245,8 +4245,11 @@
   </data>
   <data name="BreadcrumbBarChevronButtonToolTip" xml:space="preserve">
     <value>Show child folders</value>
-  </data>	
+  </data>
   <data name="NoCommandsFound" xml:space="preserve">
     <value>There are no commands containing {0}</value>
   </data>
+  <data name="SeeMore" xml:space="preserve">
+    <value>See more</value>
+  </data>
 </root>

src/Files.App/UserControls/NavigationToolbar.xaml

@@ -136,6 +136,34 @@
 				</Button.ContextFlyout>
 			</Button>
 
+			<Button
+				x:Name="FlyoutButton"
+				LosingFocus="NavigationButtonOverflowFlyoutButton_LosingFocus"
+				Style="{StaticResource AddressToolbarButtonStyle}"
+				ToolTipService.ToolTip="{helpers:ResourceString Name=SeeMore}"
+				Visibility="Collapsed">
+				<FontIcon FontSize="14" Glyph="&#xE712;" />
+				<Button.Flyout>
+					<MenuFlyout Placement="BottomEdgeAlignedLeft">
+						<MenuFlyoutItem Command="{x:Bind Commands.NavigateForward, Mode=OneWay}" Text="{x:Bind Commands.NavigateForward.Label, Mode=OneWay}">
+							<MenuFlyoutItem.Icon>
+								<FontIcon Glyph="{x:Bind Commands.NavigateForward.Glyph.BaseGlyph, Mode=OneTime}" />
+							</MenuFlyoutItem.Icon>
+						</MenuFlyoutItem>
+						<MenuFlyoutItem Command="{x:Bind Commands.NavigateUp, Mode=OneWay}" Text="{x:Bind Commands.NavigateUp.Label, Mode=OneWay}">
+							<MenuFlyoutItem.Icon>
+								<FontIcon Glyph="{x:Bind Commands.NavigateUp.Glyph.BaseGlyph, Mode=OneTime}" />
+							</MenuFlyoutItem.Icon>
+						</MenuFlyoutItem>
+						<MenuFlyoutItem Command="{x:Bind Commands.RefreshItems, Mode=OneWay}" Text="{x:Bind Commands.RefreshItems.Label, Mode=OneWay}">
+							<MenuFlyoutItem.Icon>
+								<FontIcon Glyph="{x:Bind Commands.RefreshItems.Glyph.BaseGlyph, Mode=OneTime}" />
+							</MenuFlyoutItem.Icon>
+						</MenuFlyoutItem>
+					</MenuFlyout>
+				</Button.Flyout>
+			</Button>
+
 			<Button
 				x:Name="Forward"
 				AccessKey="F"
@@ -579,6 +607,31 @@
 			Target="{x:Bind ShowStatusCenterButton}" />
 
 		<VisualStateManager.VisualStateGroups>
+			<VisualStateGroup x:Name="NavigationStates">
+				<VisualState x:Name="Narrow">
+					<VisualState.StateTriggers>
+						<AdaptiveTrigger MinWindowWidth="0" />
+					</VisualState.StateTriggers>
+					<VisualState.Setters>
+						<Setter Target="FlyoutButton.Visibility" Value="Visible" />
+						<Setter Target="Forward.Visibility" Value="Collapsed" />
+						<Setter Target="Up.Visibility" Value="Collapsed" />
+						<Setter Target="Refresh.Visibility" Value="Collapsed" />
+					</VisualState.Setters>
+				</VisualState>
+				<VisualState x:Name="Wide">
+					<VisualState.StateTriggers>
+						<AdaptiveTrigger MinWindowWidth="540" />
+					</VisualState.StateTriggers>
+					<VisualState.Setters>
+						<Setter Target="FlyoutButton.Visibility" Value="Collapsed" />
+						<Setter Target="Forward.Visibility" Value="Visible" />
+						<Setter Target="Up.Visibility" Value="Visible" />
+						<Setter Target="Refresh.Visibility" Value="Visible" />
+					</VisualState.Setters>
+				</VisualState>
+			</VisualStateGroup>
+
 			<VisualStateGroup x:Name="SearchBoxStates">
 				<VisualState x:Name="SearchBoxAlwaysShown">
 					<VisualState.StateTriggers>

src/Files.App/UserControls/NavigationToolbar.xaml.cs

@@ -428,5 +428,12 @@ private void Omnibar_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
 				(MainPageViewModel.SelectedTabItem?.TabItemContent as Control)?.Focus(FocusState.Programmatic);
 			}
 		}
+
+		private void NavigationButtonOverflowFlyoutButton_LosingFocus(UIElement sender, LosingFocusEventArgs args)
+		{
+			// Prevent the Omnibar from taking focus if the overflow button is hidden while the button is focused
+			if (args.NewFocusedElement is TextBox)
+				args.Cancel = true;
+		}
 	}
 }