From 13eb67bd086a4707712f2f896fa5cf52c21a6a4f Mon Sep 17 00:00:00 2001
From: Alex Pun <alexpung@protonmail.com>
Date: Thu, 18 Jan 2024 21:58:39 +0000
Subject: [PATCH] Improve navigation menu by allowing show and hide menu in
 mobile

---
 .../MainLayout.razor                          |  2 +-
 .../Pages/NavMenu.razor                       | 46 ++++++++++++++-----
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/BlazorApp-Investment Tax Calculator/MainLayout.razor b/BlazorApp-Investment Tax Calculator/MainLayout.razor
index c029db0a..5ca57c39 100644
--- a/BlazorApp-Investment Tax Calculator/MainLayout.razor	
+++ b/BlazorApp-Investment Tax Calculator/MainLayout.razor	
@@ -18,7 +18,7 @@
 <style>
     .grid-container {
         display: grid;
-        grid-template-columns: 250px auto;
+        grid-template-columns: auto auto;
         grid-template-areas: 'sidebar content';
     }
 
diff --git a/BlazorApp-Investment Tax Calculator/Pages/NavMenu.razor b/BlazorApp-Investment Tax Calculator/Pages/NavMenu.razor
index 9a1ccf80..fd9c08d0 100644
--- a/BlazorApp-Investment Tax Calculator/Pages/NavMenu.razor	
+++ b/BlazorApp-Investment Tax Calculator/Pages/NavMenu.razor	
@@ -3,37 +3,61 @@
 @using Syncfusion.Blazor.Inputs
 @using Syncfusion.Blazor.Lists
 @inject NavigationManager Navigation
-
-
-<SfSidebar Width="220px">
+<SfButton OnClick="ToggleMenu" class=open-menu-button>>></SfButton>
+<SfSidebar ref="NavBar" Width="220px" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle" Type="SidebarType.Auto">
     <ChildContent>
-        <SfListView DataSource="@List" TValue="listData" CssClass="e-template-list" ShowIcon="true">
-            <ListViewFieldSettings TValue="listData" Id="Id" Text="Text" IconCss="IconCss"></ListViewFieldSettings>
+        <SfListView DataSource="@List" TValue="listData" CssClass="e-template-list">
+            <ListViewFieldSettings TValue="listData" Id="Id" Text="Text"></ListViewFieldSettings>
             <ListViewEvents TValue="listData" Clicked="OnSelect"></ListViewEvents>
         </SfListView>
+        <div class="sidebar-content mt-3">
+            <SfButton OnClick="ToggleMenu" class="close-menu-button">Close menu</SfButton>
+        </div>
     </ChildContent>
 </SfSidebar>
 
+<style>
+    .e-listview .e-list-item {
+        text-align: center;
+        font-size: 14px;
+        padding: 0;
+    }
+
+    .sidebar-content {
+        display: flex;
+        flex-direction: column; /* Stack children vertically */
+        justify-content: center; /* Center children vertically */
+        align-items: center; /* Center children horizontally */
+    }
+</style>
+
 @code {
+    public bool SidebarToggle = true;
     // Specify the value of ListView component DataSource property.
     public List<listData> List = new List<listData>
     {
-        new listData {Id="1", Text = "Home", IconCss = "sb-icons icon-grid e-sb-icon control-icon", PageAddress = ""},
-        new listData {Id="2",Text = "Import/Export", IconCss = "sb-icons icon-chart e-sb-icon control-icon", PageAddress = "MainCalculatorPage"},
-        new listData {Id="3",Text = "Disposal Summary", IconCss = "sb-icons icon-datepicker e-sb-icon control-icon", PageAddress = "CalculationViewPage"},
-        new listData {Id="4", Text = "Trade Matches", IconCss = "sb-icons icon-dialog e-sb-icon control-icon", PageAddress = "TradeMatchPage"},
-        new listData {Id="5", Text = "Dividend Data", IconCss = "sb-icons icon-dialog e-sb-icon control-icon", PageAddress = "DividendDataPage"},
+        new listData {Id="1", Text = "Home", PageAddress = ""},
+        new listData {Id="2",Text = "Import/Export", PageAddress = "MainCalculatorPage"},
+        new listData {Id="3",Text = "Disposal Summary", PageAddress = "CalculationViewPage"},
+        new listData {Id="4", Text = "Trade Matches", PageAddress = "TradeMatchPage"},
+        new listData {Id="5", Text = "Dividend Data", PageAddress = "DividendDataPage"},
     };
+
     public class listData
     {
         public required string Id { get; set; }
         public required string Text { get; set; }
-        public required string IconCss { get; set; }
         public required string PageAddress { get; set; }
     }
+
     // Specifies the event handler for Clicked event in ListView component.
     public void OnSelect(Syncfusion.Blazor.Lists.ClickEventArgs<listData> args)
     {
         Navigation.NavigateTo(Navigation.BaseUri + args.ItemData.PageAddress);
     }
+
+    public void ToggleMenu()
+    {
+        SidebarToggle = !SidebarToggle;
+    }
 }