Finished documentation

docs/Writerside/topics/Custom-Views.md

@@ -0,0 +1,101 @@
+# Custom Views
+
+You can also add your own pages to the HopFrame UI by defining the routes as custom views.
+You can do that by using the following extension methods for the [](HopFrameConfig.md):
+
+## Configuration methods
+
+### AddCustomView (With configurator delegate)
+
+Creates an entry to the side menu and dashboard with a custom URL.
+
+```c#
+HopFrameConfigurator AddCustomView(string name, string url, Action<CustomViewConfigurator> configuratorDelegate)
+```
+
+- **Parameters:**
+    - `configurator`: The configurator for the HopFrame config that is being created.
+    - `name`: The name of the navigation entry.
+    - `url`: The target URL of the navigation entry.
+    - `configuratorDelegate`: The delegate for configuring the view.
+
+- **Returns:** `HopFrameConfigurator`
+
+### AddCustomView (Without configurator delegate)
+
+Creates an entry to the side menu and dashboard with a custom URL.
+
+```c#
+CustomViewConfigurator AddCustomView(string name, string url)
+```
+
+- **Parameters:**
+    - `configurator`: The configurator for the HopFrame config that is being created.
+    - `name`: The name of the navigation entry.
+    - `url`: The target URL of the navigation entry.
+
+- **Returns:** `CustomViewConfigurator`
+
+## CustomViewConfigurator
+
+### SetDescription
+
+Sets the description displayed in the dashboard.
+
+```c#
+CustomViewConfigurator SetDescription(string description)
+```
+
+- **Parameters:**
+    - `description`: The desired description.
+
+- **Returns:** `CustomViewConfigurator`
+
+### SetPolicy
+
+Sets the policy needed in order to access the view.
+
+```c#
+CustomViewConfigurator SetPolicy(string policy)
+```
+
+- **Parameters:**
+    - `policy`: The desired policy.
+
+- **Returns:** `CustomViewConfigurator`
+
+### SetIcon
+
+Sets the icon displayed in the sidebar.
+
+```c#
+CustomViewConfigurator SetIcon(string icon)
+```
+
+- **Parameters:**
+    - `icon`: The desired [fluent-icon](https://www.fluentui-blazor.net/Icon#explorer).
+
+- **Returns:** `CustomViewConfigurator`
+
+### SetLinkMatch
+
+Sets the rule for the sidebar to determine if the link is active.
+
+```c#
+CustomViewConfigurator SetLinkMatch(NavLinkMatch match)
+```
+
+- **Parameters:**
+    - `match`: The desired match rule.
+
+- **Returns:** `CustomViewConfigurator`
+
+## Example
+
+```C#
+builder.Services.AddHopFrame(options => {
+    options.AddCustomView("Counter", "/counter")
+        .SetDescription("A custom view")
+        .SetPolicy("counter.view");
+});
+```