UI: Replace two-column Grid with SplitView; add narrow pane toggle; add WidthToBooleanConverter and width-based DisplayMode triggers for a responsive layout across Web, Desktop, Android.

src/AdvancedCalculator/Converters/WidthToBooleanConverter.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace AdvancedCalculator.Converters;
+
+// Returns true if width (double) is less than the provided threshold (parameter),
+// otherwise false. Default threshold is 640 when parameter is null or invalid.
+public class WidthToBooleanConverter : IValueConverter
+{
+    public static readonly WidthToBooleanConverter Instance = new();
+
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo? culture)
+    {
+        if (value is double width)
+        {
+            double threshold = 640;
+            if (parameter is double p)
+                threshold = p;
+            else if (parameter is string s && double.TryParse(s, NumberStyles.Number, CultureInfo.InvariantCulture, out var parsed))
+                threshold = parsed;
+
+            return width < threshold;
+        }
+        return false;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo? culture)
+        => throw new NotSupportedException();
+}
+

src/AdvancedCalculator/Views/MainView.axaml

@@ -10,11 +10,39 @@
              x:DataType="vm:MainViewModel">
   <UserControl.Resources>
     <conv:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter" />
+    <conv:WidthToBooleanConverter x:Key="WidthToBooleanConverter" />
   </UserControl.Resources>
+  <!-- Replace columns with a responsive SplitView -->
+  <SplitView x:Name="RootSplit"
+             OpenPaneLength="320"
+             CompactPaneLength="0">
+    <!-- Responsive behavior: set DisplayMode and IsPaneOpen based on width -->
+    <SplitView.Styles>
+      <Style Selector="SplitView#RootSplit">
+        <Style.Triggers>
+          <!-- Narrow: Overlay mode, pane closed by default -->
+          <DataTrigger Value="True"
+                       Binding="{Binding $parent[Window].Bounds.Width,
+                                         Converter={StaticResource WidthToBooleanConverter},
+                                         ConverterParameter=640}">
+            <Setter Property="DisplayMode" Value="Overlay" />
+            <Setter Property="IsPaneOpen" Value="False" />
+          </DataTrigger>
+          <!-- Wide: Inline mode, pane open -->
+          <DataTrigger Value="False"
+                       Binding="{Binding $parent[Window].Bounds.Width,
+                                         Converter={StaticResource WidthToBooleanConverter},
+                                         ConverterParameter=640}">
+            <Setter Property="DisplayMode" Value="Inline" />
+            <Setter Property="IsPaneOpen" Value="True" />
+          </DataTrigger>
+        </Style.Triggers>
+      </Style>
+    </SplitView.Styles>
 
-  <Grid ColumnDefinitions="*,3*">
+    <!-- Left pane: Variables + Functions -->
-    <!-- Left column: Variables + Functions -->
+    <SplitView.Pane>
-    <Grid Grid.Column="0">
+      <Grid>
         <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
@@ -63,12 +91,11 @@
           </ListBox.ItemTemplate>
         </ListBox>
       </Grid>
+    </SplitView.Pane>
 
-    <!-- GridSplitter between columns -->
+    <!-- Right content: History + Input -->
-    <GridSplitter Grid.Column="0" HorizontalAlignment="Right" Width="5" Background="Transparent" />
+    <SplitView.Content>
-
+      <Grid RowDefinitions="*,Auto">
-    <!-- Right column: History + Input -->
-    <Grid Grid.Column="1" RowDefinitions="*,Auto">
         <!-- History -->
         <ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
           <ListBox.ItemTemplate>
@@ -86,16 +113,28 @@
         </ListBox>
 
         <!-- Input Row -->
-      <Grid Grid.Row="1" ColumnDefinitions="Auto,*" Margin="4">
+        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*" Margin="4">
-        <Button Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
+          <!-- Pane toggle: visible on narrow only -->
+          <ToggleButton Margin="0,0,6,0"
+                        IsVisible="{Binding $parent[Window].Bounds.Width,
+                                            Converter={StaticResource WidthToBooleanConverter},
+                                            ConverterParameter=640}"
+                        IsChecked="{Binding #RootSplit.IsPaneOpen}">
+            <TextBlock Text="≡" FontSize="18"/>
+          </ToggleButton>
+
+          <!-- Toggle functions panel inside the pane -->
+          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0">
             <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
           </Button>
-        <TextBox Grid.Column="1" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
+
+          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
             <InputElement.KeyBindings>
               <KeyBinding Gesture="Enter" Command="{Binding SubmitCommand}" />
             </InputElement.KeyBindings>
           </TextBox>
         </Grid>
       </Grid>
-  </Grid>
+    </SplitView.Content>
+  </SplitView>
 </UserControl>