From 2f30389f6c20d7416f92fe55eca3d352a1ffc8e5 Mon Sep 17 00:00:00 2001
From: Geoffroy BONNEVILLE <geoffroy.bonneville@younited-credit.fr>
Date: Mon, 4 May 2020 20:56:19 +0200
Subject: [PATCH] Big redesign (closer to Win10 UWP) Replaced breadcrumb with
 Up button Search button now integrated in top menu Hamburger menu make better
 use of visual states Better visual states changes when size changes

---
 .../HamburgerButtonStyle.xaml                 |   8 +-
 .../NoBorderButtonStyle.xaml                  |   2 +-
 .../ResourceDictionaries/Styles.xaml          |  27 +-
 ModernKeePass/ViewModels/GroupDetailVm.cs     |   7 +-
 ModernKeePass/Views/EntryDetailPage.xaml      |  54 ++--
 ModernKeePass/Views/EntryDetailPage.xaml.cs   |  20 +-
 ModernKeePass/Views/GroupDetailPage.xaml      |  81 ++---
 ModernKeePass/Views/GroupDetailPage.xaml.cs   |  37 +--
 ModernKeePass/Views/MainPage.xaml             |   4 +-
 .../SettingsNewDatabasePage.xaml              |   2 +-
 .../HamburgerMenuUserControl.xaml             | 287 ++++++++++--------
 .../HamburgerMenuUserControl.xaml.cs          |  35 +--
 .../UserControls/TopMenuUserControl.xaml      |  57 +++-
 .../UserControls/TopMenuUserControl.xaml.cs   |  20 +-
 .../ViewModels/UserControls/TopMenuVm.cs      |  33 +-
 15 files changed, 378 insertions(+), 296 deletions(-)

diff --git a/ModernKeePass/ResourceDictionaries/HamburgerButtonStyle.xaml b/ModernKeePass/ResourceDictionaries/HamburgerButtonStyle.xaml
index abf2cc6..89f74ae 100644
--- a/ModernKeePass/ResourceDictionaries/HamburgerButtonStyle.xaml
+++ b/ModernKeePass/ResourceDictionaries/HamburgerButtonStyle.xaml
@@ -13,14 +13,14 @@
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
-                                                                        Storyboard.TargetProperty="Opacity">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
+                                                                        Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonPointerOverBackgroundThemeBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
-                        <Grid x:Name="Grid" Background="{StaticResource MainColor}" Margin="0" Width="{StaticResource MenuSize}" Height="{StaticResource MenuSize}">
+                        <Grid x:Name="Grid" Background="{StaticResource AppBarBackgroundThemeBrush}" Margin="0" Width="{StaticResource MenuWidth}" Height="{StaticResource MenuHeight}">
                             <Canvas x:Name="HamburgerMenu" HorizontalAlignment="Center" Height="17" UseLayoutRounding="False" VerticalAlignment="Center" Width="28">
                                 <Canvas x:Name="Layer1" Height="17" Canvas.Left="0" Width="28" Margin="0" RenderTransformOrigin="0.5,0.5">
                                     <Canvas.RenderTransform>
@@ -52,7 +52,7 @@
         <Setter Property="Margin" Value="0" />
     </Style>
     <Style x:Key="HeaderTextBoxStyle" TargetType="TextBox">
-        <Setter Property="FontSize" Value="40"/>
+        <Setter Property="FontSize" Value="30"/>
         <Setter Property="FontWeight" Value="Light"/>
         <Setter Property="BorderBrush" Value="Transparent" />
         <Setter Property="Background" Value="Transparent" />
diff --git a/ModernKeePass/ResourceDictionaries/NoBorderButtonStyle.xaml b/ModernKeePass/ResourceDictionaries/NoBorderButtonStyle.xaml
index 1145921..dad2a5f 100644
--- a/ModernKeePass/ResourceDictionaries/NoBorderButtonStyle.xaml
+++ b/ModernKeePass/ResourceDictionaries/NoBorderButtonStyle.xaml
@@ -4,7 +4,7 @@
     <!-- Default style for Windows.UI.Xaml.Controls.Button -->
     <Style TargetType="Button" x:Key="NoBorderButtonStyle">
         <Setter Property="Background" Value="{ThemeResource ToggleButtonBackgroundThemeBrush}" />
-        <Setter Property="Foreground" Value="{ThemeResource TextColorDark}"/>
+        <Setter Property="Foreground" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}"/>
         <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}" />
         <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
         <Setter Property="Padding" Value="12,4,12,4" />
diff --git a/ModernKeePass/ResourceDictionaries/Styles.xaml b/ModernKeePass/ResourceDictionaries/Styles.xaml
index d9ce7a1..db4c4ed 100644
--- a/ModernKeePass/ResourceDictionaries/Styles.xaml
+++ b/ModernKeePass/ResourceDictionaries/Styles.xaml
@@ -3,39 +3,31 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <!-- Common theme values -->
-    <x:Double x:Key="MenuSize">60</x:Double>
+    <x:Double x:Key="MenuWidth">60</x:Double>
+    <x:Double x:Key="MenuHeight">40</x:Double>
     <x:Double x:Key="ExpandedMenuSize">300</x:Double>
-    <GridLength x:Key="MenuGridLength">60</GridLength>
+    <GridLength x:Key="MenuHeightGridLength">40</GridLength>
+    <GridLength x:Key="MenuWidthGridLength">60</GridLength>
     <GridLength x:Key="ExpandedMenuGridLength">300</GridLength>
-    <!-- Only available for Windows 10 -->
-    <!--<SolidColorBrush x:Key="MainColor" Color="{ThemeResource SystemAccentColor}" />
-    <SolidColorBrush x:Key="TextColor" Color="{ThemeResource SystemColorHighlightTextColor}" />
-    
-    <SolidColorBrush x:Key="CheckBoxForegroundChecked" Color="{ThemeResource MainColor}"/>
-    <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked" Color="{ThemeResource TextColorLight}"/>
-    <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked" Color="{ThemeResource MainColor}"/>
-    <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked" Color="{ThemeResource MainColor}"/>-->
 
     <Color x:Key="MainColor">SlateBlue</Color>
     <Color x:Key="MainColorLight">MediumPurple</Color>
     <Color x:Key="MainColorDark">Indigo</Color>
     <Color x:Key="TextColorLight">WhiteSmoke</Color>
-    <Color x:Key="TextColorDark">DarkSlateGray</Color>
     <Color x:Key="BorderColor">DarkGray</Color>
+    <Color x:Key="FlyoutColor">#FFF0F0F0</Color>
 
     <SolidColorBrush x:Key="MainColorBrush" Color="{ThemeResource MainColor}" />
     <SolidColorBrush x:Key="MainColorLightBrush" Color="{ThemeResource MainColorLight}" />
     <SolidColorBrush x:Key="MainColorDarkBrush" Color="{ThemeResource MainColorDark}" />
     <SolidColorBrush x:Key="TextColorLightBrush" Color="{ThemeResource TextColorLight}" />
-    <SolidColorBrush x:Key="TextColorDarkBrush" Color="{ThemeResource TextColorDark}" />
 
     <Style TargetType="TextBlock" x:Key="TextBlockSettingsHeaderStyle" >
         <Setter Property="FontFamily" Value="Segoe UI" />
-        <Setter Property="FontSize" Value="14.667" />
+        <Setter Property="FontSize" Value="16" />
         <Setter Property="FontWeight" Value="SemiLight" />
     </Style>
 
-    <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="{ThemeResource TextColorDark}" />
     <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="{ThemeResource BorderColor}" />
     <SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="{ThemeResource MainColor}" />
 
@@ -50,9 +42,9 @@
     <SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="{ThemeResource MainColor}" />
     <SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="{ThemeResource MainColorLight}" />
 
-    <SolidColorBrush x:Key="SearchBoxForegroundThemeBrush" Color="{ThemeResource TextColorDark}" />
     <!--<SolidColorBrush x:Key="SearchBoxPointerOverBorderThemeBrush" Color="{ThemeResource MainColorLight}" />-->
     <SolidColorBrush x:Key="SearchBoxPointerOverTextThemeBrush" Color="{ThemeResource MainColorLight}" />
+    <SolidColorBrush x:Key="SearchBoxBorderThemeBrush" Color="{ThemeResource BorderColor}" />
     <SolidColorBrush x:Key="SearchBoxFocusedBorderThemeBrush" Color="{ThemeResource MainColor}" />
     <SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="{ThemeResource MainColor}" />
     <SolidColorBrush x:Key="SearchBoxHitHighlightForegroundThemeBrush" Color="{ThemeResource MainColor}" />
@@ -84,6 +76,9 @@
     <SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="{ThemeResource MainColorDark}" />
     <SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="{ThemeResource MainColorLight}" />
 
-    <Thickness x:Key="FlyoutBorderThemeThickness">0</Thickness>
     <Thickness x:Key="MenuFlyoutPresenterThemePadding">0</Thickness>
+    <Thickness x:Key="FlyoutContentThemePadding">5</Thickness>
+    <Thickness x:Key="FlyoutBorderThemeThickness">0</Thickness>
+    <SolidColorBrush x:Key="FlyoutBorderThemeBrush" Color="{ThemeResource FlyoutColor}" />
+    <SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="{ThemeResource FlyoutColor}" />
 </ResourceDictionary>
diff --git a/ModernKeePass/ViewModels/GroupDetailVm.cs b/ModernKeePass/ViewModels/GroupDetailVm.cs
index c04176c..b15ccfe 100644
--- a/ModernKeePass/ViewModels/GroupDetailVm.cs
+++ b/ModernKeePass/ViewModels/GroupDetailVm.cs
@@ -178,12 +178,7 @@ namespace ModernKeePass.ViewModels
             await _mediator.Send(new RemoveGroupCommand {ParentGroupId = _parent.Id, GroupId = Id });
             GoToGroup(destinationId);
         }
-
-        public async Task<IEnumerable<EntryVm>> Search(string queryText)
-        {
-            return await _mediator.Send(new SearchEntriesQuery {GroupId = Id, SearchText = queryText});
-        }
-
+        
         private async Task SaveChanges()
         {
             try
diff --git a/ModernKeePass/Views/EntryDetailPage.xaml b/ModernKeePass/Views/EntryDetailPage.xaml
index 05c94d9..8f7bc0d 100644
--- a/ModernKeePass/Views/EntryDetailPage.xaml
+++ b/ModernKeePass/Views/EntryDetailPage.xaml
@@ -365,19 +365,20 @@
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.RowDefinitions>
-            <RowDefinition Height="{StaticResource MenuGridLength}"/>
+            <RowDefinition Height="{StaticResource MenuHeightGridLength}"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid Grid.Row="1">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="{StaticResource MenuGridLength}" x:Name="LeftListViewColumn" />
+                <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
-            <userControls:HamburgerMenuUserControl x:Uid="HistoryLeftListView" 
-               ItemsSource="{Binding History}" 
-               ResizeTarget="{Binding ElementName=LeftListViewColumn}" 
-               SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 
-               SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
+            <userControls:HamburgerMenuUserControl 
+                x:Name="HamburgerMenu"
+                x:Uid="HistoryLeftListView" 
+                ItemsSource="{Binding History}" 
+                SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 
+                SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
             <Grid Grid.Column="1">
                 <ScrollViewer VerticalScrollBarVisibility="Auto">
                     <StackPanel Margin="20,0,0,20">
@@ -456,36 +457,38 @@
         <!-- Bouton Précédent et titre de la page -->
         <Grid Grid.Row="0" Background="{ThemeResource AppBarBackgroundThemeBrush}">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="{StaticResource MenuGridLength}"/>
+                <ColumnDefinition Width="{StaticResource MenuWidthGridLength}"/>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <Button Grid.Column="0" 
                     Command="{Binding GoBackCommand}"
-                    Height="{StaticResource MenuSize}"
-                    Width="{StaticResource MenuSize}"
+                    Height="{StaticResource MenuHeight}"
+                    Width="{StaticResource MenuWidth}"
                     AutomationProperties.Name="Back"
                     AutomationProperties.AutomationId="BackButton"
                     AutomationProperties.ItemType="Navigation Button"
                     Style="{StaticResource NoBorderButtonStyle}">
                 <SymbolIcon Symbol="Back" />
             </Button>
-            <Grid Grid.Column="1">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="60" />
-                    <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="40" />
-                    <RowDefinition Height="20" />
-                </Grid.RowDefinitions>
-                <Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
+            <StackPanel Grid.Column="1" Orientation="Horizontal">
+                <Button
+                    Height="{StaticResource MenuHeight}"
+                    Width="{StaticResource MenuWidth}"
+                    Command="{Binding GoToParentCommand}"
+                    Style="{StaticResource NoBorderButtonStyle}">
+                    <SymbolIcon Symbol="Up" />
+                    <ToolTipService.ToolTip>
+                        <ToolTip Content="{Binding ParentGroupName}" />
+                    </ToolTipService.ToolTip>
+                </Button>
+                <Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
                     <userControls:SymbolPickerUserControl Width="100" Height="70" SelectedSymbol="{Binding Icon, Mode=TwoWay}" />
                 </Viewbox>
-                <Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
+                <Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
                     <SymbolIcon Symbol="{Binding Icon}" Width="100" Height="70"  />
                 </Viewbox>
-                <TextBox Grid.Column="1" Grid.Row="0"
+                <TextBox
                     x:Uid="EntryTitle"
                     x:Name="TitleTextBox"
                     Text="{Binding Title, Mode=TwoWay}" 
@@ -494,6 +497,7 @@
                     FontSize="20"
                     FontWeight="Light"
                     TextWrapping="NoWrap" 
+                    MinWidth="360"
                     VerticalAlignment="Center">
                     <interactivity:Interaction.Behaviors>
                         <core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="True">
@@ -505,11 +509,7 @@
                         </core:DataTriggerBehavior>
                     </interactivity:Interaction.Behaviors>
                 </TextBox>
-                <HyperlinkButton Grid.Column="1" Grid.Row="1"
-                     FontWeight="Light" FontSize="12" Padding="0" Margin="5,-5,0,0"
-                     Content="{Binding ParentGroupName}" 
-                     Command="{Binding GoToParentCommand}"/>
-            </Grid>
+            </StackPanel>
             <userControls:TopMenuUserControl 
                 x:Name="TopMenu" Grid.Column="2"
                 IsEditButtonChecked="{Binding IsEditMode, Mode=TwoWay}"
diff --git a/ModernKeePass/Views/EntryDetailPage.xaml.cs b/ModernKeePass/Views/EntryDetailPage.xaml.cs
index 2862522..b72c113 100644
--- a/ModernKeePass/Views/EntryDetailPage.xaml.cs
+++ b/ModernKeePass/Views/EntryDetailPage.xaml.cs
@@ -42,8 +42,24 @@ namespace ModernKeePass.Views
         
         private void EntryDetailPage_OnSizeChanged(object sender, SizeChangedEventArgs e)
         {
-            VisualStateManager.GoToState(this, e.NewSize.Width < 700 ? "Small" : "Large", true);
-            VisualStateManager.GoToState(TopMenu, e.NewSize.Width < 800 ? "Collapsed" : "Overflowed", true);
+            if (e.NewSize.Width <= 640)
+            {
+                VisualStateManager.GoToState(this, "Small", true);
+                VisualStateManager.GoToState(TopMenu, "Collapsed", true);
+                VisualStateManager.GoToState(HamburgerMenu, "Hidden", true);
+            }
+            else if (e.NewSize.Width > 640 && e.NewSize.Width <= 1008)
+            {
+                VisualStateManager.GoToState(this, "Medium", true);
+                VisualStateManager.GoToState(TopMenu, "Overflowed", true);
+                VisualStateManager.GoToState(HamburgerMenu, "Collapsed", true);
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "Large", true);
+                VisualStateManager.GoToState(TopMenu, "Overflowed", true);
+                VisualStateManager.GoToState(HamburgerMenu, "Collapsed", true);
+            }
         }
     }
 }
diff --git a/ModernKeePass/Views/GroupDetailPage.xaml b/ModernKeePass/Views/GroupDetailPage.xaml
index 21ad291..a395f40 100644
--- a/ModernKeePass/Views/GroupDetailPage.xaml
+++ b/ModernKeePass/Views/GroupDetailPage.xaml
@@ -36,21 +36,20 @@
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.RowDefinitions>
-            <RowDefinition Height="{StaticResource MenuGridLength}"/>
+            <RowDefinition Height="{StaticResource MenuHeightGridLength}"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid Grid.Row="1">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="{StaticResource ExpandedMenuGridLength}" x:Name="LeftListViewColumn" />
+                <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
             <userControls:HamburgerMenuUserControl 
+                x:Name="HamburgerMenu"
                 x:Uid="GroupsLeftListView" 
                 ItemsSource="{Binding Groups}" 
                 SelectionChanged="groups_SelectionChanged" 
                 ActionButtonCommand="{Binding CreateGroupCommand}"
-                ResizeTarget="{Binding ElementName=LeftListViewColumn}" 
-                IsOpen="True" 
                 IsButtonVisible="Visible" />
             <Grid Grid.Column="1">
                 <Grid.ColumnDefinitions>
@@ -116,7 +115,7 @@
                                             <TextBlock Text="{Binding Username}" Style="{StaticResource BodyTextBlockStyle}" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource TextBoxForegroundThemeBrush}, Converter={StaticResource ColorToBrushConverter}}" MaxHeight="60" />
                                             <TextBlock Text="{Binding Url}" Style="{StaticResource BodyTextBlockStyle}" Foreground="{Binding ForegroundColor, ConverterParameter={StaticResource TextBoxForegroundThemeBrush}, Converter={StaticResource ColorToBrushConverter}}" MaxHeight="60" />
                                         </StackPanel>
-                                        <Button Grid.Column="2" Style="{StaticResource NoBorderButtonStyle}" Background="{StaticResource AppBarBackgroundThemeBrush}" VerticalAlignment="Bottom" Foreground="{StaticResource TextColorDarkBrush}">
+                                        <Button Grid.Column="2" Style="{StaticResource NoBorderButtonStyle}" Background="{StaticResource AppBarBackgroundThemeBrush}" VerticalAlignment="Bottom">
                                             <SymbolIcon Symbol="More" />
                                             <Button.Flyout>
                                                 <MenuFlyout>
@@ -183,37 +182,38 @@
         <!-- Back button and page title -->
         <Grid Grid.Row="0" Background="{ThemeResource AppBarBackgroundThemeBrush}">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="{StaticResource MenuGridLength}"/>
+                <ColumnDefinition Width="{StaticResource MenuWidthGridLength}"/>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <Button Grid.Column="0" 
                     Command="{Binding GoBackCommand}"
-                    Height="{StaticResource MenuSize}"
-                    Width="{StaticResource MenuSize}"
+                    Height="{StaticResource MenuHeight}"
+                    Width="{StaticResource MenuWidth}"
                     AutomationProperties.Name="Back"
                     AutomationProperties.AutomationId="BackButton"
                     AutomationProperties.ItemType="Navigation Button"
                     Style="{StaticResource NoBorderButtonStyle}">
                 <SymbolIcon Symbol="Back" />
             </Button>
-            <Grid Grid.Column="1" >
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="60" />
-                    <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="40" />
-                    <RowDefinition Height="20" />
-                </Grid.RowDefinitions>
-                <Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
+            <StackPanel Grid.Column="1" Orientation="Horizontal">
+                <Button
+                    Height="{StaticResource MenuHeight}"
+                    Width="{StaticResource MenuWidth}"
+                    Command="{Binding GoToParentCommand}"
+                    Style="{StaticResource NoBorderButtonStyle}">
+                    <SymbolIcon Symbol="Up" />
+                    <ToolTipService.ToolTip>
+                        <ToolTip Content="{Binding ParentGroupName}" />
+                    </ToolTipService.ToolTip>
+                </Button>
+                <Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}">
                     <userControls:SymbolPickerUserControl Width="100" Height="70" SelectedSymbol="{Binding Icon, Mode=TwoWay}" />
                 </Viewbox>
-                <Viewbox MaxHeight="200" Width="200" Grid.Column="0" Grid.Row="0" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
+                <Viewbox MaxHeight="200" Visibility="{Binding IsEditMode, Converter={StaticResource InverseBooleanToVisibilityConverter}}">
                     <SymbolIcon Symbol="{Binding Icon}" Width="100" Height="70"  />
                 </Viewbox>
-                <TextBox Grid.Column="1" Grid.Row="0" 
+                <TextBox
                     x:Uid="GroupTitle"
                     x:Name="TitleTextBox"
                     Text="{Binding Title, Mode=TwoWay}" 
@@ -222,6 +222,7 @@
                     FontSize="20"
                     FontWeight="Light"
                     TextWrapping="NoWrap" 
+                    MinWidth="360"
                     VerticalAlignment="Center">
                     <interactivity:Interaction.Behaviors>
                         <core:DataTriggerBehavior Binding="{Binding IsEditMode}" Value="True">
@@ -233,11 +234,7 @@
                         </core:DataTriggerBehavior>
                     </interactivity:Interaction.Behaviors>
                 </TextBox>
-                <HyperlinkButton Grid.Column="1" Grid.Row="1"
-                     FontWeight="Light" FontSize="12" Padding="0" Margin="5,-5,0,0"
-                     Content="{Binding ParentGroupName}" 
-                     Command="{Binding GoToParentCommand}" />
-            </Grid>
+            </StackPanel>
             <userControls:TopMenuUserControl x:Name="TopMenu" Grid.Column="2"
                 SortButtonVisibility="{Binding IsEditMode, Converter={StaticResource BooleanToVisibilityConverter}}"
                 IsEditButtonChecked="{Binding IsEditMode, Mode=TwoWay}"
@@ -252,31 +249,7 @@
                     </core:EventTriggerBehavior>
                 </interactivity:Interaction.Behaviors>
             </userControls:TopMenuUserControl>
-            <Button Grid.Column="3" x:Name="SearchButton" Style="{StaticResource NoBorderButtonStyle}" Background="{ThemeResource ToggleButtonBackgroundThemeBrush}" Height="{StaticResource MenuSize}" Padding="25,0,25,0">
-                <StackPanel Orientation="Horizontal">
-                    <SymbolIcon Symbol="Find" />
-                    <TextBlock x:Uid="SearchButtonLabel" x:Name="SearchButtonLabel" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0" />
-                </StackPanel>
-                <ToolTipService.ToolTip>
-                    <ToolTip x:Uid="SearchButtonTooltip" />
-                </ToolTipService.ToolTip>
-                <interactivity:Interaction.Behaviors>
-                    <core:EventTriggerBehavior EventName="Click">
-                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Visible" />
-                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Collapsed" />
-                        <!-- TODO: make this work -->
-                        <actions:SetupFocusAction TargetObject="{Binding ElementName=SearchBox}" />
-                    </core:EventTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-            </Button>
-            <SearchBox Grid.Column="3" x:Uid="EntriesSearch" x:Name="SearchBox" Padding="12" Width="350" Visibility="Collapsed" Margin="0,5,0,5" FontSize="15" SuggestionsRequested="SearchBox_OnSuggestionsRequested" SearchHistoryEnabled="False" ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen">
-                <interactivity:Interaction.Behaviors>
-                    <core:EventTriggerBehavior EventName="LostFocus">
-                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Collapsed" />
-                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Visible" />
-                    </core:EventTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-            </SearchBox>
+            
         </Grid>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="DragDropGroup">
@@ -301,9 +274,6 @@
                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
                             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                         </ObjectAnimationUsingKeyFrames>
-                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
-                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
-                        </ObjectAnimationUsingKeyFrames>
                     </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Large">
@@ -311,9 +281,6 @@
                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AddEntryTextBlock" Storyboard.TargetProperty="Visibility">
                             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                         </ObjectAnimationUsingKeyFrames>
-                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
-                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
-                        </ObjectAnimationUsingKeyFrames>
                     </Storyboard>
                 </VisualState>
             </VisualStateGroup>
diff --git a/ModernKeePass/Views/GroupDetailPage.xaml.cs b/ModernKeePass/Views/GroupDetailPage.xaml.cs
index 46f1079..faad56f 100644
--- a/ModernKeePass/Views/GroupDetailPage.xaml.cs
+++ b/ModernKeePass/Views/GroupDetailPage.xaml.cs
@@ -83,26 +83,27 @@ namespace ModernKeePass.Views
             e.Cancel = !Model.IsEditMode;
             e.Data.RequestedOperation = DataPackageOperation.Move;
         }
-
-        private async void SearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
-        {
-            var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
-            var results = (await Model.Search(args.QueryText)).Take(5);
-            foreach (var result in results)
-            {
-                args.Request.SearchSuggestionCollection.AppendResultSuggestion(result.Title, result.ParentGroupName, result.Id, imageUri, string.Empty);
-            }
-        }
-
-        private void SearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
-        {
-            Model.GoToEntry(args.Tag);
-        }
-
+        
         private void GroupDetailPage_OnSizeChanged(object sender, SizeChangedEventArgs e)
         {
-            VisualStateManager.GoToState(this, e.NewSize.Width < 800 ? "Small" : "Large", true);
-            VisualStateManager.GoToState(TopMenu, e.NewSize.Width < 800 ? "Collapsed" : "Overflowed", true);
+            if (e.NewSize.Width <= 640)
+            {
+                VisualStateManager.GoToState(this, "Small", true);
+                VisualStateManager.GoToState(TopMenu, "Collapsed", true);
+                VisualStateManager.GoToState(HamburgerMenu, "Hidden", true);
+            }
+            else if (e.NewSize.Width > 640 && e.NewSize.Width <= 1008)
+            {
+                VisualStateManager.GoToState(this, "Medium", true);
+                VisualStateManager.GoToState(TopMenu, "Overflowed", true);
+                VisualStateManager.GoToState(HamburgerMenu, "Collapsed", true);
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "Large", true);
+                VisualStateManager.GoToState(TopMenu, "Overflowed", true);
+                VisualStateManager.GoToState(HamburgerMenu, "Expanded", true);
+            }
         }
         
         #endregion
diff --git a/ModernKeePass/Views/MainPage.xaml b/ModernKeePass/Views/MainPage.xaml
index 68949ba..f87a9f9 100644
--- a/ModernKeePass/Views/MainPage.xaml
+++ b/ModernKeePass/Views/MainPage.xaml
@@ -27,7 +27,7 @@
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.RowDefinitions>
-            <RowDefinition Height="{StaticResource MenuGridLength}"/>
+            <RowDefinition Height="{StaticResource MenuHeightGridLength}"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
@@ -44,7 +44,7 @@
             <Button x:Name="BackButton"
                     Command="{Binding NavigationHelper.GoBackCommand, ElementName=PageRoot}"
                     Visibility="Collapsed"
-                    Height="{StaticResource MenuSize}"
+                    Height="{StaticResource MenuWidth}"
                     AutomationProperties.Name="Back"
                     AutomationProperties.AutomationId="BackButton"
                     AutomationProperties.ItemType="Navigation Button"
diff --git a/ModernKeePass/Views/SettingsPageFrames/SettingsNewDatabasePage.xaml b/ModernKeePass/Views/SettingsPageFrames/SettingsNewDatabasePage.xaml
index 476cf76..7377ea1 100644
--- a/ModernKeePass/Views/SettingsPageFrames/SettingsNewDatabasePage.xaml
+++ b/ModernKeePass/Views/SettingsPageFrames/SettingsNewDatabasePage.xaml
@@ -22,7 +22,7 @@
             </Grid.ColumnDefinitions>
             <ComboBox Grid.Column="1" ItemsSource="{Binding Source={StaticResource KeyDerivations}}" SelectedItem="{Binding DatabaseFormatVersion, Mode=TwoWay}" DisplayMemberPath="DisplayText" />
             <Button Grid.Column="2" Style="{StaticResource TextBlockButtonStyle}">
-                <SymbolIcon Symbol="Help" RenderTransformOrigin="0.5,0.5" >
+                <SymbolIcon Symbol="Help" RenderTransformOrigin="0.5,0.5">
                     <SymbolIcon.RenderTransform>
                         <CompositeTransform ScaleX="0.7" ScaleY="0.7"/>
                     </SymbolIcon.RenderTransform>
diff --git a/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml b/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml
index 956ad50..ba2b629 100644
--- a/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml
+++ b/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml
@@ -12,132 +12,173 @@
     <UserControl.Resources>
         <converters:IconToSymbolConverter x:Key="IconToSymbolConverter"/>
     </UserControl.Resources>
-    <ListView
-        ItemsSource="{Binding ItemsSource, ElementName=UserControl}"
-        SelectionChanged="Selector_OnSelectionChanged"
-        SelectedItem="{Binding SelectedItem, ElementName=UserControl, Mode=TwoWay}"
-        SelectedIndex="{Binding SelectedIndex, ElementName=UserControl, Mode=TwoWay}"
-        IsSwipeEnabled="false"
-        IsSynchronizedWithCurrentItem="False"
-        RequestedTheme="Dark"
-        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-        Foreground="{ThemeResource TextColorLightBrush}"
-        ItemContainerStyle="{StaticResource ListViewLeftIndicatorItemExpanded}">
-        <ListView.Resources>
-            <DataTemplate x:Name="IsSpecial">
-                <StackPanel Orientation="Horizontal">
-                    <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
-                        <ToolTipService.ToolTip>
-                            <ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
-                        </ToolTipService.ToolTip>
-                    </SymbolIcon>
-                    <TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" FontStyle="Italic" />
-                </StackPanel>
-            </DataTemplate>
-            <DataTemplate x:Name="IsNormal">
-                <StackPanel Orientation="Horizontal">
-                    <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
-                        <ToolTipService.ToolTip>
-                            <ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
-                        </ToolTipService.ToolTip>
-                    </SymbolIcon>
-                    <TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
-                </StackPanel>
-            </DataTemplate>
-        </ListView.Resources>
-        <ListView.ItemTemplateSelector>
-            <templateSelectors:SelectableDataTemplateSelector FalseItem="{StaticResource IsNormal}" TrueItem="{StaticResource IsSpecial}" />
-        </ListView.ItemTemplateSelector>
-        <ListView.HeaderTemplate>
-            <DataTemplate>
-                <StackPanel Orientation="Horizontal">
-                    <ToggleButton Style="{StaticResource HamburgerToggleButton}" IsChecked="{Binding IsOpen, ElementName=UserControl}">
-                        <ToolTipService.ToolTip>
-                            <ToolTip Content="{Binding HeaderLabel, ElementName=UserControl}" />
-                        </ToolTipService.ToolTip>
-                        <interactivity:Interaction.Behaviors>
-                            <core:EventTriggerBehavior EventName="Checked">
-                                <core:ChangePropertyAction PropertyName="Width" Value="{StaticResource ExpandedMenuSize}" TargetObject="{Binding ResizeTarget, ElementName=UserControl}"/>
-                            </core:EventTriggerBehavior>
-                            <core:EventTriggerBehavior EventName="Unchecked">
-                                <core:ChangePropertyAction PropertyName="Width" Value="{StaticResource MenuSize}" TargetObject="{Binding ResizeTarget, ElementName=UserControl}"/>
-                            </core:EventTriggerBehavior>
-                        </interactivity:Interaction.Behaviors>
-                    </ToggleButton>
-                    <TextBlock Text="{Binding HeaderLabel, ElementName=UserControl}" FontWeight="Bold" FontSize="18" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" HorizontalAlignment="Center" />
-                </StackPanel>
-            </DataTemplate>
-        </ListView.HeaderTemplate>
-        <ListView.FooterTemplate>
-            <DataTemplate>
-                <StackPanel Orientation="Vertical">
-                    <Border BorderBrush="White" BorderThickness="0,0,0,1" />
-                    <Button Padding="0" Margin="0" 
-                            Height="{StaticResource MenuSize}" 
-                            Visibility="{Binding IsButtonVisible, ElementName=UserControl}" 
+    <Grid HorizontalAlignment="Left">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="VisibilityStates">
+                <VisualState x:Name="Hidden">
+                    <Storyboard>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
+                        </ObjectAnimationUsingKeyFrames>
+                    </Storyboard>
+                </VisualState>
+                <VisualState x:Name="Collapsed">
+                    <Storyboard>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Width">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MenuWidth}"/>
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
+                        </ObjectAnimationUsingKeyFrames>
+                    </Storyboard>
+                </VisualState>
+                <VisualState x:Name="Expanded">
+                    <Storyboard>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListView" Storyboard.TargetProperty="Width">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ExpandedMenuSize}"/>
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderTextBlock" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
+                        </ObjectAnimationUsingKeyFrames>
+                    </Storyboard>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="{StaticResource MenuHeightGridLength}" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <StackPanel Orientation="Horizontal">
+            <ToggleButton Style="{StaticResource HamburgerToggleButton}" Unchecked="ToggleButton_OnUnchecked">
+                <interactivity:Interaction.Behaviors>
+                    <core:EventTriggerBehavior EventName="Checked">
+                        <core:GoToStateAction StateName="Expanded" />
+                    </core:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </ToggleButton>
+            <TextBlock 
+                x:Name="HeaderTextBlock" 
+                Text="{Binding HeaderLabel, ElementName=UserControl}" 
+                FontWeight="Bold"
+                FontSize="18" 
+                TextWrapping="NoWrap" 
+                VerticalAlignment="Center" 
+                Margin="30,0,20,0" 
+                HorizontalAlignment="Center" />
+        </StackPanel>
+        <ListView 
+            x:Name="ListView"
+            Grid.Row="1"
+            ItemsSource="{Binding ItemsSource, ElementName=UserControl}"
+            SelectionChanged="Selector_OnSelectionChanged"
+            SelectedItem="{Binding SelectedItem, ElementName=UserControl, Mode=TwoWay}"
+            SelectedIndex="{Binding SelectedIndex, ElementName=UserControl, Mode=TwoWay}"
+            IsSwipeEnabled="false"
+            IsSynchronizedWithCurrentItem="False"
+            Background="{ThemeResource AppBarBackgroundThemeBrush}"
+            ItemContainerStyle="{StaticResource ListViewLeftIndicatorItemExpanded}">
+            <ListView.Resources>
+                <DataTemplate x:Name="IsSpecial">
+                    <StackPanel Orientation="Horizontal">
+                        <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
+                            <ToolTipService.ToolTip>
+                                <ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
+                            </ToolTipService.ToolTip>
+                        </SymbolIcon>
+                        <TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" FontStyle="Italic" />
+                    </StackPanel>
+                </DataTemplate>
+                <DataTemplate x:Name="IsNormal">
+                    <StackPanel Orientation="Horizontal">
+                        <SymbolIcon Symbol="{Binding Icon, Converter={StaticResource IconToSymbolConverter}, ConverterParameter=48}" Margin="7,15,0,15">
+                            <ToolTipService.ToolTip>
+                                <ToolTip Content="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" />
+                            </ToolTipService.ToolTip>
+                        </SymbolIcon>
+                        <TextBlock Text="{Binding Path={Binding DisplayMemberPath, ElementName=UserControl}}" x:Name="GroupTextBlock" TextWrapping="NoWrap" VerticalAlignment="Center" Margin="30,0,20,0" />
+                    </StackPanel>
+                </DataTemplate>
+            </ListView.Resources>
+            <ListView.ItemTemplateSelector>
+                <templateSelectors:SelectableDataTemplateSelector FalseItem="{StaticResource IsNormal}" TrueItem="{StaticResource IsSpecial}" />
+            </ListView.ItemTemplateSelector>
+            <ListView.FooterTemplate>
+                <DataTemplate>
+                    <StackPanel Orientation="Vertical">
+                        <Border BorderBrush="DarkGray" BorderThickness="0,0,0,1" />
+                        <Button Padding="0" Margin="0" 
+                                Height="{StaticResource MenuWidth}" 
+                                Visibility="{Binding IsButtonVisible, ElementName=UserControl}" 
+                                Style="{StaticResource NoBorderButtonStyle}" 
+                                Background="Transparent" 
+                                BorderThickness="0" 
+                                Width="{StaticResource ExpandedMenuSize}" 
+                                HorizontalContentAlignment="Left" 
+                                Command="{Binding ActionButtonCommand, ElementName=UserControl}">
+                            <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
+                                <SymbolIcon Symbol="Add">
+                                    <ToolTipService.ToolTip>
+                                        <ToolTip Content="{Binding ButtonLabel, ElementName=UserControl}" />
+                                    </ToolTipService.ToolTip>
+                                </SymbolIcon>
+                                <TextBlock Text="{Binding ButtonLabel, ElementName=UserControl}" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
+                            </StackPanel>
+                        </Button>
+                        <Button Padding="0" Margin="0" 
+                                Height="{StaticResource MenuWidth}" 
+                                Style="{StaticResource NoBorderButtonStyle}" 
+                                Background="Transparent" 
+                                BorderThickness="0" 
+                                Width="{StaticResource ExpandedMenuSize}" 
+                                HorizontalContentAlignment="Left">
+                            <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
+                                <SymbolIcon Symbol="Home">
+                                    <ToolTipService.ToolTip>
+                                        <ToolTip x:Uid="HamburgerMenuHomeTooltip" />
+                                    </ToolTipService.ToolTip>
+                                </SymbolIcon>
+                                <TextBlock x:Uid="HamburgerMenuHomeLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
+                            </StackPanel>
+                            <interactivity:Interaction.Behaviors>
+                                <core:EventTriggerBehavior EventName="Click">
+                                    <core:NavigateToPageAction TargetPage="ModernKeePass.Views.MainPage" />
+                                </core:EventTriggerBehavior>
+                            </interactivity:Interaction.Behaviors>
+                        </Button>
+                        <Button 
+                            Padding="0" Margin="0" 
+                            Height="{StaticResource MenuWidth}" 
                             Style="{StaticResource NoBorderButtonStyle}" 
                             Background="Transparent" 
-                            Foreground="{ThemeResource TextColorLightBrush}"
-                            BorderThickness="0" 
-                            Width="{StaticResource ExpandedMenuSize}" 
-                            HorizontalContentAlignment="Left" 
-                            Command="{Binding ActionButtonCommand, ElementName=UserControl}">
-                        <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
-                            <SymbolIcon Symbol="Add">
-                                <ToolTipService.ToolTip>
-                                    <ToolTip Content="{Binding ButtonLabel, ElementName=UserControl}" />
-                                </ToolTipService.ToolTip>
-                            </SymbolIcon>
-                            <TextBlock Text="{Binding ButtonLabel, ElementName=UserControl}" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
-                        </StackPanel>
-                    </Button>
-                    <Button Padding="0" Margin="0" 
-                            Height="{StaticResource MenuSize}" 
-                            Style="{StaticResource NoBorderButtonStyle}" 
-                            Foreground="{ThemeResource TextColorLightBrush}"
-                            Background="Transparent" 
                             BorderThickness="0" 
                             Width="{StaticResource ExpandedMenuSize}" 
                             HorizontalContentAlignment="Left">
-                        <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
-                            <SymbolIcon Symbol="Home">
-                                <ToolTipService.ToolTip>
-                                    <ToolTip x:Uid="HamburgerMenuHomeTooltip" />
-                                </ToolTipService.ToolTip>
-                            </SymbolIcon>
-                            <TextBlock x:Uid="HamburgerMenuHomeLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
-                        </StackPanel>
-                        <interactivity:Interaction.Behaviors>
-                            <core:EventTriggerBehavior EventName="Click">
-                                <core:NavigateToPageAction TargetPage="ModernKeePass.Views.MainPage" />
-                            </core:EventTriggerBehavior>
-                        </interactivity:Interaction.Behaviors>
-                    </Button>
-                    <Button 
-                        Padding="0" Margin="0" 
-                        Height="{StaticResource MenuSize}" 
-                        Style="{StaticResource NoBorderButtonStyle}" 
-                        Foreground="{ThemeResource TextColorLightBrush}"
-                        Background="Transparent" 
-                        BorderThickness="0" 
-                        Width="{StaticResource ExpandedMenuSize}" 
-                        HorizontalContentAlignment="Left">
-                        <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
-                            <SymbolIcon Symbol="Setting">
-                                <ToolTipService.ToolTip>
-                                    <ToolTip x:Uid="HamburgerMenuSettingsTooltip" />
-                                </ToolTipService.ToolTip>
-                            </SymbolIcon>
-                            <TextBlock x:Uid="HamburgerMenuSettingsLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
-                        </StackPanel>
-                        <interactivity:Interaction.Behaviors>
-                            <core:EventTriggerBehavior EventName="Click">
-                                <core:NavigateToPageAction TargetPage="ModernKeePass.Views.SettingsPage" />
-                            </core:EventTriggerBehavior>
-                        </interactivity:Interaction.Behaviors>
-                    </Button>
-                </StackPanel>
-            </DataTemplate>
-        </ListView.FooterTemplate>
-    </ListView>
+                            <StackPanel Orientation="Horizontal" Margin="17,0,5,0">
+                                <SymbolIcon Symbol="Setting">
+                                    <ToolTipService.ToolTip>
+                                        <ToolTip x:Uid="HamburgerMenuSettingsTooltip" />
+                                    </ToolTipService.ToolTip>
+                                </SymbolIcon>
+                                <TextBlock x:Uid="HamburgerMenuSettingsLabel" FontWeight="SemiBold" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="30,0,20,0" />
+                            </StackPanel>
+                            <interactivity:Interaction.Behaviors>
+                                <core:EventTriggerBehavior EventName="Click">
+                                    <core:NavigateToPageAction TargetPage="ModernKeePass.Views.SettingsPage" />
+                                </core:EventTriggerBehavior>
+                            </interactivity:Interaction.Behaviors>
+                        </Button>
+                    </StackPanel>
+                </DataTemplate>
+            </ListView.FooterTemplate>
+        </ListView>
+    </Grid>
 </UserControl>
diff --git a/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml.cs b/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml.cs
index 7843b35..8571a1d 100644
--- a/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml.cs
+++ b/ModernKeePass/Views/UserControls/HamburgerMenuUserControl.xaml.cs
@@ -51,19 +51,7 @@ namespace ModernKeePass.Views.UserControls
                 typeof(string),
                 typeof(HamburgerMenuUserControl),
                 new PropertyMetadata("Title", (o, args) => { }));
-
-        public object ResizeTarget
-        {
-            get { return GetValue(ResizeTargetProperty); }
-            set { SetValue(ResizeTargetProperty, value); }
-        }
-        public static readonly DependencyProperty ResizeTargetProperty =
-            DependencyProperty.Register(
-                nameof(ResizeTarget),
-                typeof(object),
-                typeof(HamburgerMenuUserControl),
-                new PropertyMetadata(null, (o, args) => { }));
-
+        
         public Visibility IsButtonVisible
         {
             get { return (Visibility)GetValue(IsButtonVisibleProperty); }
@@ -112,19 +100,7 @@ namespace ModernKeePass.Views.UserControls
                 typeof(int),
                 typeof(HamburgerMenuUserControl),
                 new PropertyMetadata(-1, (o, args) => { }));
-
-        public bool IsOpen
-        {
-            get { return (bool)GetValue(IsOpenProperty); }
-            set { SetValue(IsOpenProperty, value); }
-        }
-        public static readonly DependencyProperty IsOpenProperty =
-            DependencyProperty.Register(
-                nameof(IsOpen),
-                typeof(bool),
-                typeof(HamburgerMenuUserControl),
-                new PropertyMetadata(false, (o, args) => { }));
-
+        
         public ICommand ActionButtonCommand
         {
             get { return (ICommand)GetValue(ActionButtonCommandProperty); }
@@ -143,5 +119,12 @@ namespace ModernKeePass.Views.UserControls
         {
             SelectionChanged?.Invoke(sender, e);
         }
+
+        private void ToggleButton_OnUnchecked(object sender, RoutedEventArgs e)
+        {
+            var parent = Parent as FrameworkElement;
+            if (parent == null) return;
+            VisualStateManager.GoToState(this, parent.ActualWidth <= 640 ? "Hidden" : "Collapsed", true);
+        }
     }
 }
diff --git a/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml b/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml
index 26d816e..e595cb7 100644
--- a/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml
+++ b/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml
@@ -4,15 +4,18 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:actions="using:ModernKeePass.Actions"
     mc:Ignorable="d">
     <UserControl.Resources>
         <Style BasedOn="{StaticResource NoBorderButtonStyle}" TargetType="Button" x:Key="MenuButtonStyle" >
             <Setter Property="Padding" Value="25,0,25,0" />
-            <Setter Property="Height" Value="{StaticResource MenuSize}" />
+            <Setter Property="Height" Value="{StaticResource MenuHeight}" />
         </Style>
         <Style BasedOn="{StaticResource NoBorderToggleButtonStyle}" TargetType="ToggleButton" x:Key="MenuToggleButtonStyle" >
             <Setter Property="Padding" Value="25,0,25,0" />
-            <Setter Property="Height" Value="{StaticResource MenuSize}" />
+            <Setter Property="Height" Value="{StaticResource MenuHeight}" />
         </Style>
     </UserControl.Resources>
     <StackPanel x:Name="StackPanel" Orientation="Horizontal" DataContext="{Binding Source={StaticResource Locator}, Path=TopMenu}">
@@ -26,6 +29,9 @@
                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility">
                             <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                         </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
+                        </ObjectAnimationUsingKeyFrames>
                     </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Collapsed">
@@ -36,6 +42,9 @@
                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MoreButton" Storyboard.TargetProperty="Visibility">
                             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                         </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SearchButtonLabel" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
+                        </ObjectAnimationUsingKeyFrames>
                     </Storyboard>
                 </VisualState>
             </VisualStateGroup>
@@ -56,13 +65,12 @@
                 </SymbolIcon>
                 <Button.Flyout>
                     <Flyout Opening="MoveButtonFlyout_OnOpening">
-                        <StackPanel>
+                        <StackPanel Background="Transparent">
                             <SearchBox x:Uid="GroupsSearch" 
-                                Padding="12" Width="350"
-                                Margin="0,5,0,5" 
-                                FontSize="15" 
-                                SuggestionsRequested="SearchBox_OnSuggestionsRequested" 
-                                ResultSuggestionChosen="SearchBox_OnResultSuggestionChosen" 
+                                Width="250" 
+                                Margin="0,5,0,5"
+                                SuggestionsRequested="GroupSearchBox_OnSuggestionsRequested" 
+                                ResultSuggestionChosen="GroupSearchBox_OnResultSuggestionChosen" 
                                 SearchHistoryEnabled="False">
                             </SearchBox>
                             <Button x:Name="MoveButton" x:Uid="MoveButton" />
@@ -104,6 +112,39 @@
                     </ToolTipService.ToolTip>
                 </SymbolIcon>
             </Button>
+            <Button x:Name="SearchButton" Style="{StaticResource NoBorderButtonStyle}" Height="{StaticResource MenuHeight}" Padding="25,0,25,0">
+                <StackPanel Orientation="Horizontal">
+                    <SymbolIcon Symbol="Find" />
+                    <TextBlock x:Uid="SearchButtonLabel" x:Name="SearchButtonLabel" TextWrapping="NoWrap" FontSize="16" VerticalAlignment="Center" Margin="10,0,0,0" />
+                </StackPanel>
+                <ToolTipService.ToolTip>
+                    <ToolTip x:Uid="SearchButtonTooltip" />
+                </ToolTipService.ToolTip>
+                <interactivity:Interaction.Behaviors>
+                    <core:EventTriggerBehavior EventName="Click">
+                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Visible" />
+                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Collapsed" />
+                        <!-- TODO: make this work -->
+                        <actions:SetupFocusAction TargetObject="{Binding ElementName=SearchBox}" />
+                    </core:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </Button>
+            <SearchBox 
+                x:Uid="EntriesSearch" 
+                x:Name="SearchBox" 
+                Margin="0,5,0,5" 
+                Width="350" 
+                Visibility="Collapsed" 
+                SuggestionsRequested="EntrySearchBox_OnSuggestionsRequested" 
+                SearchHistoryEnabled="False" 
+                ResultSuggestionChosen="EntrySearchBox_OnResultSuggestionChosen">
+                <interactivity:Interaction.Behaviors>
+                    <core:EventTriggerBehavior EventName="LostFocus">
+                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchBox}" PropertyName="Visibility" Value="Collapsed" />
+                        <core:ChangePropertyAction TargetObject="{Binding ElementName=SearchButton}" PropertyName="Visibility" Value="Visible" />
+                    </core:EventTriggerBehavior>
+                </interactivity:Interaction.Behaviors>
+            </SearchBox>
         </StackPanel>
         <Button x:Name="MoreButton" Style="{StaticResource MenuButtonStyle}">
             <SymbolIcon Symbol="More" />
diff --git a/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml.cs b/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml.cs
index 3046d43..9a37d07 100644
--- a/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml.cs
+++ b/ModernKeePass/Views/UserControls/TopMenuUserControl.xaml.cs
@@ -194,7 +194,7 @@ namespace ModernKeePass.Views.UserControls
             SortGroupsButtonFlyout.Command = SortGroupsCommand;
         }
         
-        private void SearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
+        private void GroupSearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
         {
             var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
             var groups = Model.Groups.Where(g => g.Title.IndexOf(args.QueryText, StringComparison.OrdinalIgnoreCase) >= 0).Take(5);
@@ -209,10 +209,26 @@ namespace ModernKeePass.Views.UserControls
             }
         }
 
-        private void SearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
+        private void GroupSearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
         {
             MoveButton.CommandParameter = args.Tag;
             MoveCommand.RaiseCanExecuteChanged();
         }
+
+
+        private async void EntrySearchBox_OnSuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)
+        {
+            var imageUri = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appdata://Assets/ModernKeePass-SmallLogo.scale-80.png"));
+            var results = (await Model.Search(args.QueryText)).Take(5);
+            foreach (var result in results)
+            {
+                args.Request.SearchSuggestionCollection.AppendResultSuggestion(result.Title, result.ParentGroupName, result.Id, imageUri, string.Empty);
+            }
+        }
+
+        private void EntrySearchBox_OnResultSuggestionChosen(SearchBox sender, SearchBoxResultSuggestionChosenEventArgs args)
+        {
+            Model.GoToEntry(args.Tag);
+        }
     }
 }
diff --git a/WinAppCommon/ViewModels/UserControls/TopMenuVm.cs b/WinAppCommon/ViewModels/UserControls/TopMenuVm.cs
index 2e1704f..403b25a 100644
--- a/WinAppCommon/ViewModels/UserControls/TopMenuVm.cs
+++ b/WinAppCommon/ViewModels/UserControls/TopMenuVm.cs
@@ -1,19 +1,46 @@
 using System.Collections.Generic;
+using System.Threading.Tasks;
+using GalaSoft.MvvmLight.Views;
 using MediatR;
+using ModernKeePass.Application.Database.Models;
 using ModernKeePass.Application.Database.Queries.GetDatabase;
+using ModernKeePass.Application.Entry.Models;
 using ModernKeePass.Application.Group.Models;
 using ModernKeePass.Application.Group.Queries.GetAllGroups;
+using ModernKeePass.Application.Group.Queries.SearchEntries;
+using ModernKeePass.Common;
+using ModernKeePass.Models;
 
 namespace ModernKeePass.ViewModels
 {
     public class TopMenuVm
     {
+        private readonly IMediator _mediator;
+        private readonly INavigationService _navigation;
+        private readonly DatabaseVm _database;
         public IEnumerable<GroupVm> Groups { get; set; }
 
-        public TopMenuVm(IMediator mediator)
+        public TopMenuVm(IMediator mediator, INavigationService navigation)
         {
-            var database = mediator.Send(new GetDatabaseQuery()).GetAwaiter().GetResult();
-            Groups = mediator.Send(new GetAllGroupsQuery { GroupId = database.RootGroupId }).GetAwaiter().GetResult();
+            _mediator = mediator;
+            _navigation = navigation;
+
+            _database = _mediator.Send(new GetDatabaseQuery()).GetAwaiter().GetResult();
+            Groups = _mediator.Send(new GetAllGroupsQuery { GroupId = _database.RootGroupId }).GetAwaiter().GetResult();
+        }
+
+        public void GoToEntry(string entryId, bool isNew = false)
+        {
+            _navigation.NavigateTo(Constants.Navigation.EntryPage, new NavigationItem
+            {
+                Id = entryId,
+                IsNew = isNew
+            });
+        }
+
+        public async Task<IEnumerable<EntryVm>> Search(string queryText)
+        {
+            return await _mediator.Send(new SearchEntriesQuery { GroupId = _database.RootGroupId, SearchText = queryText });
         }
     }
 }
\ No newline at end of file