From 47224d242f5a3b11d74a9ead60596244c1e32fa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Thu, 29 Oct 2020 16:09:18 +0300
Subject: [PATCH] Documented Toolbars for the aspnet core mvc UI

---
 docs/en/UI/AspNetCore/Toolbars.md | 73 ++++++++++++++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/docs/en/UI/AspNetCore/Toolbars.md b/docs/en/UI/AspNetCore/Toolbars.md
index cc3bcd95be..524ef3f18b 100644
--- a/docs/en/UI/AspNetCore/Toolbars.md
+++ b/docs/en/UI/AspNetCore/Toolbars.md
@@ -1,3 +1,74 @@
 # Toolbars
 
-TODO
\ No newline at end of file
+The Toolbar system is used to define **toolbars** on the user interface. Modules (or your application) can add **items** to a toolbar, then the [theme](Theming.md) renders the toolbar on the **layout**.
+
+There is only one **standard toolbar** named "Main" (defined as a constant: `StandardToolbars.Main`). The [Basic Theme](Basic-Theme) renders the main toolbar as shown below:
+
+![bookstore-toolbar-highlighted](../../images/bookstore-toolbar-highlighted.png)
+
+In the screenshot above, there are two items added to the main toolbar: Language switch component & user menu. You can add your own items here.
+
+## Example: Add a Notification Icon
+
+In this example, we will add a **notification (bell) icon** to the left of the language switch item. A item in the toolbar should be a **view component**. So, first, create a new view component in your project:
+
+![bookstore-notification-view-component](../../images/bookstore-notification-view-component.png)
+
+**NotificationViewComponent.cs**
+
+````csharp
+public class NotificationViewComponent : AbpViewComponent
+{
+    public async Task<IViewComponentResult> InvokeAsync()
+    {
+        return View("/Pages/Shared/Components/Notification/Default.cshtml");
+    }
+}
+````
+
+**Default.cshtml**
+
+````xml
+<div id="MainNotificationIcon" style="color: white; margin: 8px;">
+    <i class="far fa-bell"></i>
+</div>
+````
+
+Now, we can create a class implementing the `IToolbarContributor` interface:
+
+````csharp
+public class MyToolbarContributor : IToolbarContributor
+{
+    public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+    {
+        if (context.Toolbar.Name == StandardToolbars.Main)
+        {
+            context.Toolbar.Items
+                .Insert(0, new ToolbarItem(typeof(NotificationViewComponent)));
+        }
+
+        return Task.CompletedTask;
+    }
+}
+````
+
+This class adds the `NotificationViewComponent` as the first item in the `Main` toolbar.
+
+Finally, you need to add this contributor to the `AbpToolbarOptions`, in the `ConfigureServices` of your [module](../../Module-Development-Basics.md):
+
+````csharp
+Configure<AbpToolbarOptions>(options =>
+{
+    options.Contributors.Add(new MyToolbarContributor());
+});
+````
+
+That's all, you will see the notification icon on the toolbar when you run the application:
+
+![bookstore-notification-icon-on-toolbar](../../images/bookstore-notification-icon-on-toolbar.png)
+
+`NotificationViewComponent` in this sample simply returns a view without any data. In real life, you probably want to **query database** (or call an HTTP API) to get notifications and pass to the view. If you need, you can add a `JavaScript` or `CSS` file to the global [bundle](Bundling-Minification.md) for your toolbar item.
+
+## IToolbarManager
+
+`IToolbarManager` is used to render the toolbar. It returns the toolbar items by a toolbar name. This is generally used by the [themes](Theming.md) to render the toolbar on the layout.
\ No newline at end of file