From 52906e510d2f58aa06847d6226ec5a439cdd6997 Mon Sep 17 00:00:00 2001
From: Alexandre Agostinho <alexandre.agostinho@epita.fr>
Date: Thu, 6 Apr 2023 23:21:31 +0200
Subject: [PATCH] try shell flyout page + add some icons

---
 MCTG/Views/App.xaml.cs                        |  1 +
 MCTG/Views/AppShell.xaml                      | 62 ++++++++++++++++---
 MCTG/Views/Home.xaml                          | 15 ++---
 .../Views/Resources/Images/assistant_icon.svg |  1 +
 MCTG/Views/Resources/Images/coffee_icon.svg   |  1 +
 MCTG/Views/Resources/Images/flatware_icon.svg |  1 +
 MCTG/Views/Resources/Images/home_icon.svg     |  1 +
 MCTG/Views/Resources/Images/list_icon.svg     |  1 +
 MCTG/Views/Resources/Images/login_icon.svg    |  1 +
 MCTG/Views/Resources/Images/logout_icon.svg   |  1 +
 .../Resources/Images/room_service_icon.svg    |  1 +
 MCTG/Views/Resources/Styles/Colors.xaml       |  2 +-
 12 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 MCTG/Views/Resources/Images/assistant_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/coffee_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/flatware_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/home_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/list_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/login_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/logout_icon.svg
 create mode 100644 MCTG/Views/Resources/Images/room_service_icon.svg

diff --git a/MCTG/Views/App.xaml.cs b/MCTG/Views/App.xaml.cs
index 3267474..62727b7 100644
--- a/MCTG/Views/App.xaml.cs
+++ b/MCTG/Views/App.xaml.cs
@@ -7,6 +7,7 @@
             InitializeComponent();
 
             MainPage = new AppShell();
+            Application.Current.UserAppTheme = AppTheme.Light;
         }
     }
 }
\ No newline at end of file
diff --git a/MCTG/Views/AppShell.xaml b/MCTG/Views/AppShell.xaml
index db5d662..dd0cdd2 100644
--- a/MCTG/Views/AppShell.xaml
+++ b/MCTG/Views/AppShell.xaml
@@ -4,16 +4,60 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:local="clr-namespace:Vue"
-    Shell.FlyoutBehavior="Disabled">
+    FlyoutBackgroundColor="DarkGray"
+    Shell.FlyoutBehavior="Flyout">
 
-    <ShellContent
-        Title="Home"
-        ContentTemplate="{DataTemplate local:Home}"
-        Route="MainPage" />
+    <Shell.ItemTemplate>
+        <DataTemplate>
+            <Grid ColumnDefinitions="20, *" Padding="10">
+                <Image Source="{Binding Icon}"/>
+                <Label Grid.Column="1" Text="{Binding Title}"
+                       TextColor="White" FontAttributes="Bold"
+                       Padding="20, 0"/>
+            </Grid>
+        </DataTemplate>
+    </Shell.ItemTemplate>
+
+    <Shell.FlyoutHeader>
+        <VerticalStackLayout>
+            <ImageButton Source="person_default.png"
+                         BackgroundColor="{StaticResource Secondary}"
+                         WidthRequest="100" HeightRequest="100"
+                         CornerRadius="50" Margin="0, 20, 0, 0"
+                         IsEnabled="False"/>
+            <Button Text="Connection" ImageSource="login_icon.png"
+                    MaximumHeightRequest="20" Margin="15, 15, 15, 60"/>
+        </VerticalStackLayout>
+    </Shell.FlyoutHeader>
+
+    <FlyoutItem Title="Suggestions" Icon="assistant_icon.png">
+        <ShellContent
+            ContentTemplate="{DataTemplate local:Home}"
+            Route="Home"/>
+    </FlyoutItem>
+    <FlyoutItem Title="Entrées" Icon="flatware_icon.png">
+        <ShellContent
+            ContentTemplate="{DataTemplate local:Home}"
+            Route="Home"/>
+    </FlyoutItem>
+    <FlyoutItem Title="Plats" Icon="room_service_icon.png">
+        <ShellContent
+            ContentTemplate="{DataTemplate local:Home}"
+            Route="Home"/>
+    </FlyoutItem>
+    <FlyoutItem Title="Desserts" Icon="coffee_icon.png">
+        <ShellContent
+            ContentTemplate="{DataTemplate local:Home}"
+            Route="Home"/>
+    </FlyoutItem>
+
+    <Shell.FlyoutFooter>
+        <VerticalStackLayout>
+            <Button Text="Déconnexion" ImageSource="logout_icon.png"
+                    MaximumHeightRequest="20" Margin="15"
+                    IsVisible="False"/>
+        </VerticalStackLayout>
+    </Shell.FlyoutFooter>
 
-    <ShellContent
-        Title="Home"
-        ContentTemplate="{DataTemplate local:Home}"
-        Route="MainPage" />
 
 </Shell>
diff --git a/MCTG/Views/Home.xaml b/MCTG/Views/Home.xaml
index 5b42ef5..56d1bdd 100644
--- a/MCTG/Views/Home.xaml
+++ b/MCTG/Views/Home.xaml
@@ -2,14 +2,15 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
-             x:Class="Vue.Home">
+             x:Class="Vue.Home"
+             Title="Mon app trop géniale">
 
 
-    <toolkit:DockLayout
-        HorizontalSpacing="20">
+    <!--<toolkit:DockLayout
+        HorizontalSpacing="20">-->
 
         <!-- Aux menu -->
-        <StackLayout toolkit:DockLayout.DockPosition="Left"
+        <!--<StackLayout toolkit:DockLayout.DockPosition="Left"
                      WidthRequest="250"
                      BackgroundColor="{StaticResource Tertiary}">
 
@@ -35,7 +36,7 @@
             <Button Text="Plats" Style="{StaticResource button1}"/>
             <Button Text="Desserts" Style="{StaticResource button1}"/>
 
-        </StackLayout>
+        </StackLayout>-->
 
         <!-- Master recipes -->
         <ScrollView>
@@ -44,7 +45,7 @@
                        FontSize="32" FontAttributes="Bold" Padding="15"/>
 
                 <FlexLayout toolkit:DockLayout.DockPosition="None"
-                            Margin="0, 15, 15, 0"
+                            Margin="0, 15"
                             Wrap="Wrap"
                             JustifyContent="SpaceEvenly"
                             AlignItems="Center"
@@ -68,7 +69,7 @@
             </StackLayout>
         </ScrollView>
 
-    </toolkit:DockLayout>
+    <!--</toolkit:DockLayout>-->
 
 
 </ContentPage>
diff --git a/MCTG/Views/Resources/Images/assistant_icon.svg b/MCTG/Views/Resources/Images/assistant_icon.svg
new file mode 100644
index 0000000..10340be
--- /dev/null
+++ b/MCTG/Views/Resources/Images/assistant_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 1016 360 896H180q-24 0-42-18.5T120 836V236q0-24 18-42t42-18h600q23 0 41.5 18t18.5 42v600q0 23-18.5 41.5T780 896H600l-120 120ZM180 836h204l96 96 96-96h204V236H180v600Zm0-600v600-600Zm357 359 128-56-128-56-56-128-57 128-127 56 127 56 57 128 56-128Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/coffee_icon.svg b/MCTG/Views/Resources/Images/coffee_icon.svg
new file mode 100644
index 0000000..26fd303
--- /dev/null
+++ b/MCTG/Views/Resources/Images/coffee_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M442 814q-115 0-198.5-81.5T160 539V276q0-24 18-42t42-18h529q54.271 0 92.636 37Q880 290 880 344t-38.364 91Q803.271 472 749 472h-25v67q0 112-83.5 193.5T442 814ZM220 412h444V276H220v136Zm222 342q91 0 156.5-63.5T664 539v-67H220v67q0 88 65.5 151.5T442 754Zm282-342h25q29 0 50-19.5t21-48.5q0-29-21-48.5T749 276h-25v136ZM160 936v-60h634v60H160Zm282-464Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/flatware_icon.svg b/MCTG/Views/Resources/Images/flatware_icon.svg
new file mode 100644
index 0000000..8869c2a
--- /dev/null
+++ b/MCTG/Views/Resources/Images/flatware_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M200 936V525q-33 0-56.5-23.5T120 445V239q0-9 7-16t16-7q9 0 16.5 7t7.5 16v142h40V239q0-9 7-16t16-7q9 0 16 7t7 16v142h40V239q0-9 7.5-16t16.5-7q9 0 16 7t7 16v206q0 33-23.5 56.5T260 525v411h-60Zm280 0V523q-41-23-62-62t-21-90q0-60 30.5-107.5T511 216q53 0 83.5 47.5T625 371q0 51-22 90t-63 62v413h-60Zm214 0V216q58 5 102 45.5T840 362v244h-86v330h-60Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/home_icon.svg b/MCTG/Views/Resources/Images/home_icon.svg
new file mode 100644
index 0000000..542676a
--- /dev/null
+++ b/MCTG/Views/Resources/Images/home_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M220 876h150V626h220v250h150V486L480 291 220 486v390Zm-60 60V456l320-240 320 240v480H530V686H430v250H160Zm320-353Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/list_icon.svg b/MCTG/Views/Resources/Images/list_icon.svg
new file mode 100644
index 0000000..3272a0a
--- /dev/null
+++ b/MCTG/Views/Resources/Images/list_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M149.825 776Q137 776 128.5 767.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5Zm0-170Q137 606 128.5 597.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5Zm0-170Q137 436 128.5 427.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5ZM290 776v-60h550v60H290Zm0-170v-60h550v60H290Zm0-170v-60h550v60H290Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/login_icon.svg b/MCTG/Views/Resources/Images/login_icon.svg
new file mode 100644
index 0000000..ca9be8b
--- /dev/null
+++ b/MCTG/Views/Resources/Images/login_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M489 936v-60h291V276H489v-60h291q24 0 42 18t18 42v600q0 24-18 42t-42 18H489Zm-78-185-43-43 102-102H120v-60h348L366 444l43-43 176 176-174 174Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/logout_icon.svg b/MCTG/Views/Resources/Images/logout_icon.svg
new file mode 100644
index 0000000..c9e8f33
--- /dev/null
+++ b/MCTG/Views/Resources/Images/logout_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M180 936q-24 0-42-18t-18-42V276q0-24 18-42t42-18h291v60H180v600h291v60H180Zm486-185-43-43 102-102H375v-60h348L621 444l43-43 176 176-174 174Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Images/room_service_icon.svg b/MCTG/Views/Resources/Images/room_service_icon.svg
new file mode 100644
index 0000000..aed3c60
--- /dev/null
+++ b/MCTG/Views/Resources/Images/room_service_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M80 856v-60h800v60H80Zm30-120v-17q0-155 88.5-250T420 346v-30q0-26 17-43t43-17q26 0 43 17t17 43v30q133 28 221.5 123T850 719v17H110Zm63-60h614q-14-128-102.5-200.5T479 403q-117 0-204.5 72.5T173 676Zm307 0Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Styles/Colors.xaml b/MCTG/Views/Resources/Styles/Colors.xaml
index 245758b..4f0fe34 100644
--- a/MCTG/Views/Resources/Styles/Colors.xaml
+++ b/MCTG/Views/Resources/Styles/Colors.xaml
@@ -5,7 +5,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
     <Color x:Key="Primary">#512BD4</Color>
-    <Color x:Key="Secondary">#DFD8F7</Color>
+    <Color x:Key="Secondary">#D9D9D9</Color>
     <Color x:Key="Tertiary">#2B0B98</Color>
     <Color x:Key="White">White</Color>
     <Color x:Key="Black">Black</Color>