Update documentation for Desktop and Mobile toolbar

docs/en/framework/ui/blazor/toolbars.md

@@ -14,6 +14,8 @@ Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/blazor.md) has 2 dif
 | :---: | :---: |
 | ![leptonx](../../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../../images/leptonxlite-toolbar-mainmobile-example.png) |
 
+Also, [LeptonX Theme](../../../ui-themes/lepton-x/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXToolbars.Main`,  `LeptonXToolbars.MainMobile`.
+
 ## 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 **Razor Component**. So, first, create a new razor component in your project (the location of the component doesn't matter):

docs/en/ui-themes/lepton-x/blazor.md

@@ -167,7 +167,6 @@ Layout options of Blazor UI can be manageable via using **LeptonXThemeMvcOptions
     });
     ```
 
-
 {{if UI == "Blazor"}}
 
 #### Updating Bundles on Layout Changes
@@ -195,6 +194,35 @@ abp bundle
 
 {{end}}
 
+### Toolbars
+
+LeptonX includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXToolbars** class.
+
+- `LeptonXToolbars.Main`
+- `LeptonXToolbars.MainMobile`
+
+```csharp
+public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+{
+    if (context.Toolbar.Name == LeptonXToolbars.Main)
+    {
+        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
+    }
+
+    if (context.Toolbar.Name == LeptonXToolbars.MainMobile)
+    {
+        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
+    }
+
+    return Task.CompletedTask;
+}
+```
+
+{{if UI == "BlazorServer"}}
+
+> _You can visit the [Toolbars Documentation](../../framework/ui/blazor/toolbars.md) for better understanding._
+
+{{end}}
 
 ## Layouts