Merge pull request #13707 from abpframework/enisn/6.0-documentation-update

Documentation update for LeptonX

docs/en/UI/Angular/Theming.md

@@ -16,10 +16,11 @@ In order to accomplish these goals, ABP Framework;
 
 ### Current Themes
 
-Currently, two themes are **officially provided**:
+Currently, three themes are **officially provided**:
 
 * The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
 * The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license.
+* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has both [commercial](https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/angular) and [lite](../../Themes/LeptonXLite/Angular.md) choices.
 
 ## Overall
 

docs/en/UI/AspNetCore/Overall.md

@@ -32,10 +32,11 @@ ABP Framework provides a complete [Theming](Theming.md) system with the followin
 
 ### Current Themes
 
-Currently, two themes are **officially provided**:
+Currently, three themes are **officially provided**:
 
 * The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
 * The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license.
+* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has both [commercial](https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/mvc) and [lite](../../Themes/LeptonXLite/AspNetCore.md) choices.
 
 There are also some community-driven themes for the ABP Framework (you can search on the web).
 

docs/en/UI/AspNetCore/Page-Header.md

@@ -23,6 +23,8 @@ Page Title can be set as shown in the example below:
 ### Breadcrumb
 
 > **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.**
+> 
+> The [LeptonX Lite Theme](../../Themes/LeptonXLite/AspNetCore.md) supports breadcrumbs.
 
 Breadcrumb items can be added to the `PageLayout.Content.BreadCrumb`.
 
@@ -48,11 +50,13 @@ Any item that you add is inserted between Home and Current Page items. You can a
 ### The Selected Menu Item
 
 > **The [Basic Theme](Basic-Theme.md) currently doesn't implement the selected menu item since it is not applicable to the top menu which is the only option for the Basic Theme for now.**
+>
+> The [LeptonX Lite Theme](../../Themes/LeptonXLite/AspNetCore.md) supports selected menu item.
 
 You can set the Menu Item name related to this page:
 
-````csharp
+```csharp
 PageLayout.Content.MenuItemName = "BookStore.Books";
-````
+```
 
 Menu item name should match a unique menu item name defined using the [Navigation / Menu](Navigation-Menu.md) system. In this case, it is expected from the theme to make the menu item "active" in the main menu.

docs/en/UI/AspNetCore/Toolbars.md

@@ -8,6 +8,12 @@ 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](../../Themes/LeptonXLite/AspNetCore.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
+
+| LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
+| :---: | :---: |
+| ![leptonx](../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../images/leptonxlite-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/Blazor/Overall.md

@@ -75,10 +75,11 @@ ABP Framework provides a complete [Theming](Theming.md) system with the followin
 
 ### Current Themes
 
-Currently, two themes are **officially provided**:
+Currently, three themes are **officially provided**:
 
 * The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
 * The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license.
+* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has both [commercial](https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/blazor) and [lite](../../Themes/LeptonXLite/Blazor.md) choices.
 
 ### Base Libraries
 

docs/en/UI/Blazor/Page-Header.md

@@ -16,6 +16,8 @@ Once you add the `PageHeader` component to your page, you can control the relate
 ## Breadcrumb
 
 > **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.**
+> 
+> The [LeptonX Lite Theme](../../Themes/LeptonXLite/Blazor.md) supports breadcrumbs.
 
 Breadcrumbs can be added using the `BreadcrumbItems` property.
 

docs/en/UI/Blazor/Page-Layout.md

@@ -42,6 +42,10 @@ Menu item name can be set on runtime too.
 }
 ```
 
+
+![leptonx selected menu item](../../images/leptonx-selected-menu-item-example.gif)
+
+
 > Be aware, The [Basic Theme](../Blazor/Basic-Theme.md) currently doesn't support the selected menu item since it is not applicable to the top menu. 
 
 ## BreadCrumbs

docs/en/UI/Blazor/Toolbars.md

@@ -8,6 +8,12 @@ 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](../../Themes/LeptonXLite/Blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
+
+| LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
+| :---: | :---: |
+| ![leptonx](../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../images/leptonxlite-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):