Added Docs layout for API and contract (#251)

## Target
<!--
  Why are you making this change?
 -->
Added Docs layout for API and contract
#### Open Questions
<!-- OPTIONAL
- [ ] Use the GitHub checklists to spark discussion on issues that may
arise from your approach. Please tick the box and explain your answer.
-->

## Checklist
<!--
It serves as a gentle reminder for common tasks. Confirm it's done and
check everything that applies.
-->
- [ ] Documentation updated
- [x] Tests cover new or modified code
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] New dependencies added
- [ ] Includes breaking changes
- [ ] Version bumped

## Visuals
<!-- OPTIONAL
Show results both before and after this change. When the output changes,
it can be a screenshot of a trace, metric, or log illustrating the
change.
-->

src/Cropper.Blazor/Client/Enums/BasePage.cs

@@ -6,5 +6,6 @@ public enum BasePage
     Demo,
     Examples,
     Api,
-    About
+    About,
+    Contract
 }

src/Cropper.Blazor/Client/Services/LayoutService.cs

@@ -94,6 +94,8 @@ public BasePage GetDocsBasePage(string uri)
             return BasePage.Api;
         else if (uri.Contains("/about"))
             return BasePage.About;
+        else if (uri.Contains("/contract"))
+            return BasePage.Contract;
         else
             return BasePage.None;
     }

src/Cropper.Blazor/Client/Services/MenuService.cs

@@ -48,7 +48,8 @@ public class MenuService : IMenuService
                 new DocsLink {Title = "ContainerData", Href = "contract/ContainerData"},
                 new DocsLink {Title = "CanvasData", Href = "contract/CanvasData"},
                 new DocsLink {Title = "CropBoxData", Href = "contract/CropBoxData"},
-                new DocsLink {Title = "JSEventData", Href = "contract/JSEventData"}
+                new DocsLink {Title = "JSEventData", Href = "contract/JSEventData"},
+                new DocsLink {Title = "ViewMode", Href = "contract/ViewMode"}
             };
     }
 }

src/Cropper.Blazor/Client/Shared/DocsLayout.razor

@@ -30,10 +30,13 @@
                     <MudNavLink Href="api" Icon="@Icons.Material.Filled.Api">Api</MudNavLink>
                     <MudNavLink Href="about" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.ContactSupport">About</MudNavLink>
                 </MudNavMenu>
-            }   
+            }
         </MudHidden>
         <MudNavMenu Color="Color.Primary" Rounded="true" Dense="true" Margin="Margin.Dense" Class="pa-2 overflow-auto mb-3">
-            @if (!_topMenuOpen && LayoutService.GetDocsBasePage(NavigationManager.Uri) == BasePage.Examples)
+            @{
+                BasePage docsBasePage = LayoutService.GetDocsBasePage(NavigationManager.Uri);
+            }
+            @if (!_topMenuOpen && (docsBasePage== BasePage.Examples || docsBasePage == BasePage.Api || docsBasePage == BasePage.Contract))
             {
                 <NavMenu @ref="@_navMenuRef" />
             }

src/Cropper.Blazor/Client/Shared/DocsLayout.razor.cs

@@ -21,7 +21,7 @@ protected override void OnInitialized()
     protected override void OnAfterRender(bool firstRender)
     {
         //refresh nav menu because no parameters change in nav menu but internal data does
-        _navMenuRef?.Refresh();
+        //_navMenuRef?.Refresh();
     }
 
     private void ToggleDrawer() => _drawerOpen = !_drawerOpen;