Add responsive design and searchbar (and some more albums icons)

Sources/Linaris/AppShell.xaml

@@ -9,6 +9,7 @@
     <ShellContent
         Title="Linaris"
         ContentTemplate="{DataTemplate local:MainPage}"
-        Route="MainPage" />
+        Route="MainPage"
+        Shell.NavBarIsVisible="False"/>
 
 </Shell>

Sources/Linaris/MainPage.xaml

@@ -3,55 +3,255 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Linaris.MainPage">
 
-    <ScrollView>
-        <FlexLayout Direction="Row"
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="6*"/>
+        </Grid.ColumnDefinitions>
+        <VerticalStackLayout BackgroundColor="black" Spacing="20" Padding="0,20,0,0">
+            <Label Text="Home"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Label>
+            <Label Text="Playlist"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Label>
+            <Label Text="Search"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Label>
+            <Label Text="Favorites"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Label>
+        </VerticalStackLayout>
+
+        <ScrollView Grid.Column="1"
+                             BackgroundColor="#404040">
+            <VerticalStackLayout>
+
+
+                <SearchBar Placeholder="Rechercher"
+                   BackgroundColor="White"
+                   HorizontalOptions="Fill"
+                   Margin="10"/>
+
+                <FlexLayout Direction="Row"
                 AlignItems="Start"
                 JustifyContent="SpaceAround"
-                BackgroundColor="#5A5A5A"
                 Wrap="Wrap">
 
-            <Image
-                Source="album1.jpg"
-                SemanticProperties.Description="Album 1"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-
-            <Image
-                Source="album2.jpg"
-                SemanticProperties.Description="Album 2"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-
-            <Image
-                Source="album3.jpg"
-                SemanticProperties.Description="Album 3"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-            <Image
-                Source="album4.jpg"
-                SemanticProperties.Description="Album 4"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-            <Image
-                Source="album5.jpg"
-                SemanticProperties.Description="Album 5"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-            
-            
-            <Image
-                Source="album6.jpg"
-                SemanticProperties.Description="Album 6"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-
-            <Image
-                Source="album7.png"
-                SemanticProperties.Description="Album 7"
-                HeightRequest="175"
-                HorizontalOptions="Center" />
-        </FlexLayout>
-        
-    </ScrollView>
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album1.jpg"
+                            SemanticProperties.Description="Album 1"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Adios Bahamas"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+                            
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album2.jpg"
+                            SemanticProperties.Description="Album 2"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album3.jpg"
+                            SemanticProperties.Description="Album 3"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album4.jpg"
+                            SemanticProperties.Description="Album 4"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+                    
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album5.jpg"
+                            SemanticProperties.Description="Album 5"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album6.jpg"
+                            SemanticProperties.Description="Album 6"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album7.png"
+                            SemanticProperties.Description="Album 7"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album8.jpg"
+                            SemanticProperties.Description="Album 8"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Album"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album9.jpg"
+                            SemanticProperties.Description="Album 9"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Night Visions"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album10.jpg"
+                            SemanticProperties.Description="Album 10"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Smoke &amp; Mirrors"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album11.jpg"
+                            SemanticProperties.Description="Album 11"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Evolve"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album12.jpg"
+                            SemanticProperties.Description="Album 12"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Origins"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album13.jpg"
+                            SemanticProperties.Description="Album 13"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Mercury Act 1"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+                        </Label>
+                    </VerticalStackLayout>
+
+                    <VerticalStackLayout Margin="10">
+                        <Image
+                            Source="album14.jpg"
+                            SemanticProperties.Description="Album 14"
+                            HeightRequest="175"
+                            HorizontalOptions="Center"/>
+                        <Label Text="Mercury Act 2"
+                               FontSize="30"
+                               TextColor="White"
+                               HorizontalOptions="Center">
+
+                        </Label>
+                    </VerticalStackLayout>
+
+                </FlexLayout>
+
+            </VerticalStackLayout>
+
+        </ScrollView>
+
+    </Grid>
 
 </ContentPage>