SidebarStyles.xaml

<!--  Copyright (c) Files Community. Licensed under the MIT License.  -->
<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
	xmlns:controls="using:Files.App.Controls"
	xmlns:local="using:Files.App.Controls">

	<x:Double x:Key="SidebarOpenPaneLength">300</x:Double>
	<x:Double x:Key="SidebarNegativeOpenPaneLength">-300</x:Double>
	<x:Double x:Key="SidebarCompactOpenPaneLength">56</x:Double>
	<x:Double x:Key="SidebarNegativeCompactOpenPaneLength">-56</x:Double>

	<Style
		x:Key="SidebarEjectButtonStyle"
		BasedOn="{StaticResource DefaultButtonStyle}"
		TargetType="Button">
		<Setter Target="MinWidth" Value="24" />
		<Setter Target="Width" Value="24" />
		<Setter Target="MinHeight" Value="24" />
		<Setter Target="Height" Value="24" />
		<Setter Target="Padding" Value="0" />
		<Setter Target="BorderThickness" Value="0" />
		<Setter Target="CornerRadius" Value="4" />
		<Setter Target="Background" Value="Transparent" />
	</Style>

	<Style
		x:Key="SidebarFavouritesPinnedIcon"
		BasedOn="{StaticResource App.ThemedIcons.Actions.Pinned.12}"
		TargetType="controls:ThemedIcon">
		<Setter Target="MinWidth" Value="12" />
		<Setter Target="Width" Value="12" />
		<Setter Target="MinHeight" Value="12" />
		<Setter Target="Height" Value="12" />
		<Setter Target="Padding" Value="0" />
	</Style>

	<DataTemplate x:Key="DefaultSidebarItemTemplate">
		<local:SidebarItem
			AutomationProperties.AutomationId="{Binding Item.Text}"
			ContentOpacity="{Binding RowOpacity}"
			Decorator="{Binding Item.ItemDecorator}"
			Icon="{Binding Item.IconElement}"
			IsExpanded="{Binding Item.IsExpanded, Mode=TwoWay}"
			Item="{Binding Item}"
			Margin="{Binding SectionGapMargin}"
			NestingLevel="{Binding Depth}"
			Text="{Binding Item.Text}"
			ToolTip="{Binding Item.ToolTip}" />
	</DataTemplate>

	<Style TargetType="local:SidebarItem">
		<Setter Property="IsTabStop" Value="False" />
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="local:SidebarItem">
					<Grid x:Name="RootPanel" Padding="4,0,4,0">
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
						</Grid.RowDefinitions>

						<!--  Drag Target Indicator  -->
						<Rectangle
							x:Name="DragTargetIndicator"
							Grid.ColumnSpan="3"
							Height="2"
							Margin="4,-2"
							HorizontalAlignment="Stretch"
							VerticalAlignment="Top"
							AutomationProperties.AccessibilityView="Raw"
							Fill="{ThemeResource AccentFillColorDefaultBrush}"
							RadiusX="4"
							RadiusY="4"
							Visibility="Collapsed" />

						<!--  Focusable Visual  -->
						<Border
							x:Name="ElementBorder"
							Grid.Row="0"
							Height="32"
							Background="Transparent">
							<Grid
								x:Name="ElementGrid"
								Margin="0,2,0,2"
								HorizontalAlignment="Stretch"
								Background="{ThemeResource SubtleFillColorTransparentBrush}"
								BackgroundSizing="InnerBorderEdge"
								BorderThickness="1"
								CornerRadius="{ThemeResource ControlCornerRadius}"
								IsTabStop="True"
								TabFocusNavigation="Once"
								ToolTipService.ToolTip="{TemplateBinding ToolTip}"
								UseSystemFocusVisuals="True">
								<Grid.ColumnDefinitions>
									<!--  Selection Indicator  -->
									<ColumnDefinition Width="3" />
									<!--  Tree-view depth indent (content-only; row background still spans full width)  -->
									<ColumnDefinition Width="Auto" />
									<!--  Chevron. Fixed 16px so expandable and non-expandable rows stay aligned; the OwnerDoesNotSupportExpansion and Compact visual states collapse it to 0 when the chevron isn't applicable.  -->
									<ColumnDefinition x:Name="ChevronColumnDefinition" Width="16" />
									<!--  Icon  -->
									<ColumnDefinition Width="Auto" />
									<!--  Text  -->
									<ColumnDefinition Width="*" />
									<!--  Decorator  -->
									<ColumnDefinition Width="Auto" />
								</Grid.ColumnDefinitions>

								<!--  Selection Rectangle  -->
								<Rectangle
									x:Name="SelectionIndicator"
									Grid.Column="0"
									Width="3"
									Height="16"
									HorizontalAlignment="Left"
									VerticalAlignment="Center"
									AutomationProperties.AccessibilityView="Raw"
									Fill="{ThemeResource AccentFillColorDefaultBrush}"
									Opacity="0"
									RadiusX="2"
									RadiusY="2" />

								<!--  Depth indent spacer (width = NestingLevel * 16)  -->
								<Border
									Grid.Column="1"
									Width="{TemplateBinding IndentWidth}" />

								<!--  Own pointer surface so chevron clicks only toggle expansion (no row invoke / selection).  -->
								<Border
									x:Name="ChevronContainer"
									Grid.Column="2"
									HorizontalAlignment="Stretch"
									VerticalAlignment="Stretch"
									Background="Transparent"
									Opacity="{TemplateBinding ContentOpacity}">
									<!--  Chevron (rotates from right → down on expand).  -->
									<FontIcon
										x:Name="ExpandCollapseChevron"
										Width="12"
										Height="12"
										HorizontalAlignment="Center"
										VerticalAlignment="Center"
										AutomationProperties.AccessibilityView="Raw"
										FontFamily="{StaticResource SymbolThemeFontFamily}"
										FontSize="10"
										Foreground="{ThemeResource TextFillColorSecondaryBrush}"
										Glyph="&#xE76C;"
										IsTextScaleFactorEnabled="False"
										RenderTransformOrigin="0.5,0.5"
										Visibility="Collapsed">
										<FontIcon.RenderTransform>
											<RotateTransform x:Name="ExpandCollapseChevronRotateTransform" Angle="0" />
										</FontIcon.RenderTransform>
									</FontIcon>
								</Border>

								<!--  Icon  -->
								<ContentPresenter
									x:Name="IconPresenter"
									Grid.Column="3"
									Width="16"
									Height="16"
									Margin="4,0,0,0"
									HorizontalAlignment="Center"
									VerticalAlignment="Center"
									AutomationProperties.AccessibilityView="Raw"
									Content="{TemplateBinding Icon}"
									Opacity="{TemplateBinding ContentOpacity}" />

								<!--  Text  -->
								<TextBlock
									x:Name="ItemNameTextBlock"
									Grid.Column="4"
									Margin="12,0,12,2"
									HorizontalAlignment="Stretch"
									VerticalAlignment="Center"
									AutomationProperties.AccessibilityView="Raw"
									FontFamily="{ThemeResource ContentControlThemeFontFamily}"
									LineHeight="16"
									Opacity="{TemplateBinding ContentOpacity}"
									Text="{TemplateBinding Text}"
									TextTrimming="CharacterEllipsis"
									TextWrapping="NoWrap" />

								<!--  Decorator  -->
								<ContentPresenter
									x:Name="ItemDecoratorPresenter"
									Grid.Column="5"
									Width="28"
									Margin="0"
									HorizontalContentAlignment="Center"
									VerticalContentAlignment="Center"
									BorderThickness="0"
									Content="{TemplateBinding Decorator}"
									Opacity="{TemplateBinding ContentOpacity}"
									Visibility="Collapsed" />

								<!--  Overflow  -->
								<FlyoutBase.AttachedFlyout>
									<Flyout x:Name="ChildrenFlyout" Placement="Right">
										<Flyout.FlyoutPresenterStyle>
											<Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
												<Setter Target="Padding" Value="0,4" />
												<Setter Target="MinWidth" Value="200" />
												<Setter Target="MinHeight" Value="20" />
											</Style>
										</Flyout.FlyoutPresenterStyle>
										<ItemsRepeater
											x:Name="FlyoutChildrenPresenter"
											HorizontalAlignment="Stretch"
											AutomationProperties.AccessibilityView="Content"
											ItemsSource="{Binding Item.Children, Mode=OneWay}"
											XYFocusKeyboardNavigation="Enabled">
											<ItemsRepeater.ItemTemplate>
												<DataTemplate>
													<local:SidebarItem
														AutomationProperties.AutomationId="{Binding Text}"
														Decorator="{Binding ItemDecorator}"
														Icon="{Binding IconElement}"
														IsExpanded="{Binding IsExpanded, Mode=TwoWay}"
														IsInFlyout="True"
														Item="{Binding}"
														Text="{Binding Text}"
														ToolTip="{Binding ToolTip}" />
												</DataTemplate>
											</ItemsRepeater.ItemTemplate>
										</ItemsRepeater>
									</Flyout>
								</FlyoutBase.AttachedFlyout>
							</Grid>
						</Border>

						<VisualStateManager.VisualStateGroups>

							<VisualStateGroup x:Name="ExpansionStates">

								<VisualState x:Name="NoExpansion">
									<VisualState.Setters>
										<Setter Target="ItemDecoratorPresenter.Visibility" Value="Visible" />
									</VisualState.Setters>
								</VisualState>

								<VisualState x:Name="NoChildren">
									<VisualState.Setters>
										<Setter Target="ItemNameTextBlock.Margin" Value="8,0,12,0" />
										<Setter Target="ItemNameTextBlock.FontSize" Value="12" />
										<Setter Target="ItemNameTextBlock.FontWeight" Value="SemiBold" />
										<Setter Target="ItemNameTextBlock.Foreground" Value="{ThemeResource TextFillColorTertiaryBrush}" />
									</VisualState.Setters>
								</VisualState>

								<VisualState x:Name="Expanded">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
										<Setter Target="ItemNameTextBlock.Margin" Value="8,0,12,0" />
										<Setter Target="ItemNameTextBlock.FontSize" Value="12" />
										<Setter Target="ItemNameTextBlock.FontWeight" Value="SemiBold" />
										<Setter Target="ItemNameTextBlock.Foreground" Value="{ThemeResource TextFillColorTertiaryBrush}" />
									</VisualState.Setters>
								</VisualState>

								<VisualState x:Name="Collapsed">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
										<Setter Target="ItemNameTextBlock.Margin" Value="8,0,12,0" />
										<Setter Target="ItemNameTextBlock.FontSize" Value="12" />
										<Setter Target="ItemNameTextBlock.FontWeight" Value="SemiBold" />
										<Setter Target="ItemNameTextBlock.Foreground" Value="{ThemeResource TextFillColorTertiaryBrush}" />
									</VisualState.Setters>
								</VisualState>

								<!--  Tree-view folder rows: chevron toggle but keep regular item styling (icon visible, normal text). Children render in the outer flat list, not nested.  -->
								<VisualState x:Name="LeafWithChildren">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>

							<VisualStateGroup x:Name="ExpansionIconStates">
								<VisualState x:Name="ExpandedIconNormal">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevronRotateTransform.Angle" Value="90" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="ExpandedIconPressed">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevronRotateTransform.Angle" Value="90" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="CollapsedIconNormal">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevronRotateTransform.Angle" Value="0" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="CollapsedIconPressed">
									<VisualState.Setters>
										<Setter Target="ExpandCollapseChevronRotateTransform.Angle" Value="0" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>

							<VisualStateGroup x:Name="SelectionStates">
								<VisualState x:Name="Unselected" />
								<VisualState x:Name="Selected">
									<VisualState.Setters>
										<Setter Target="SelectionIndicator.Opacity" Value="1" />
										<Setter Target="ElementGrid.BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
										<Setter Target="ElementGrid.Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>

							<VisualStateGroup x:Name="PointerStates">
								<VisualState x:Name="Normal" />
								<VisualState x:Name="NormalSelected">
									<VisualState.Setters>
										<Setter Target="ElementGrid.Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
										<Setter Target="ElementGrid.BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="PointerOver">
									<VisualState.Setters>
										<Setter Target="ElementGrid.Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
										<Setter Target="ElementGrid.BorderBrush" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="PointerOverSelected">
									<VisualState.Setters>
										<Setter Target="ElementGrid.Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />
										<Setter Target="ElementGrid.BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="Pressed">
									<VisualState.Setters>
										<Setter Target="ElementGrid.Background" Value="{ThemeResource SubtleFillColorTertiaryBrush}" />
										<Setter Target="ElementGrid.BorderBrush" Value="{ThemeResource SubtleFillColorTertiaryBrush}" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="PressedSelected">
									<VisualState.Setters>
										<Setter Target="ElementGrid.Background" Value="{ThemeResource ControlFillColorTertiaryBrush}" />
										<Setter Target="ElementGrid.BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
									</VisualState.Setters>
								</VisualState>

								<VisualState x:Name="DragInsertAbove">
									<VisualState.Setters>
										<Setter Target="DragTargetIndicator.Visibility" Value="Visible" />
										<Setter Target="DragTargetIndicator.VerticalAlignment" Value="Top" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="DragInsertBelow">
									<VisualState.Setters>
										<Setter Target="DragTargetIndicator.Visibility" Value="Visible" />
										<Setter Target="DragTargetIndicator.VerticalAlignment" Value="Bottom" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="DragOnTop">
									<VisualState.Setters>
										<Setter Target="ElementGrid.Background" Value="{ThemeResource ControlFillColorTertiaryBrush}" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>

							<VisualStateGroup x:Name="DisplayModes">
								<VisualState x:Name="NonCompact" />
								<VisualState x:Name="Compact">
									<VisualState.Setters>
										<Setter Target="RootPanel.MaxWidth" Value="48" />
										<Setter Target="ItemNameTextBlock.Visibility" Value="Collapsed" />
										<Setter Target="ItemDecoratorPresenter.Width" Value="0" />
										<Setter Target="ChevronColumnDefinition.Width" Value="0" />
										<Setter Target="IconPresenter.Margin" Value="8,0,0,0" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>

							<!--  Owner-level toggle. Separate from per-row ExpansionStates so a leaf inside a tree (which is NoExpansion) still reserves the 16px chevron column for alignment with expandable siblings, while a Settings-style sidebar (SupportsExpansion=false) collapses it for every row.  -->
							<VisualStateGroup x:Name="OwnerExpansionSupport">
								<VisualState x:Name="OwnerSupportsExpansion" />
								<VisualState x:Name="OwnerDoesNotSupportExpansion">
									<VisualState.Setters>
										<Setter Target="ChevronColumnDefinition.Width" Value="0" />
										<Setter Target="IconPresenter.Margin" Value="8,0,0,0" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>

						</VisualStateManager.VisualStateGroups>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</ResourceDictionary>