Merge pull request #22218 from abpframework/toolbar-doc-patch

Update documentation for Desktop and Mobile toolbar

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

@@ -8,12 +8,26 @@ There is only one **standard toolbar** named "Main" (defined as a constant: `Sta
 
 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.
 
-Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
+Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/blazor.md) and [LeptonX Theme](../../../ui-themes/lepton-x/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants.
+
+**LeptonX Lite Theme**
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
 
 | LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
 | :---: | :---: |
 | ![leptonx](../../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../../images/leptonxlite-toolbar-mainmobile-example.png) |
 
+**LeptonX Theme**
+
+- `LeptonXToolbars.Main`
+- `LeptonXToolbars.MainMobile`
+
+| LeptonXToolbars.Main | LeptonXToolbars.MainMobile |
+| :---: | :---: |
+| ![leptonx](../../../images/leptonx-toolbar-main-example.png) | ![leptonx](../../../images/leptonx-toolbar-mainmobile-example.png) |
+
 ## 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/framework/ui/mvc-razor-pages/toolbars.md

@@ -8,12 +8,26 @@ There is only one **standard toolbar** named "Main" (defined as a constant: `Sta
 
 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.
 
-Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/asp-net-core.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
+Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/asp-net-core.md) and [LeptonX Theme](../../../ui-themes/lepton-x/mvc.md) has 2 different toolbars for desktop and mobile views which defined as constants.
+
+**LeptonX Lite Theme**
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
 
 | LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
 | :---: | :---: |
 | ![leptonx](../../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../../images/leptonxlite-toolbar-mainmobile-example.png) |
 
+**LeptonX Theme**
+
+- `LeptonXToolbars.Main`
+- `LeptonXToolbars.MainMobile`
+
+| LeptonXToolbars.Main | LeptonXToolbars.MainMobile |
+| :---: | :---: |
+| ![leptonx](../../../images/leptonx-toolbar-main-example.png) | ![leptonx](../../../images/leptonx-toolbar-mainmobile-example.png) |
+
 ## 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:

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
 

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

@@ -81,8 +81,32 @@ Configure<LeptonXThemeOptions>(options =>
 >
 > If your layout is **TopMenu**, then you have to add them under the **wwwroot/Themes/LeptonX/Global/top-menu/css/** folder.
 
+### 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;
+}
+```
+
+> _You can visit the [Toolbars Documentation](../../framework/ui/mvc-razor-pages/toolbars.md) for better understanding._
 
-#### Handling Style Changes
 
 You can add extra logic by using javascript API when style is changed with the following event.
 ```js