Add customization docs for Leptonx lite

docs/en/Themes/LeptonXLite/Angular.md

@@ -82,3 +82,170 @@ To change the logos and brand color of `LeptonX`, simply add the following CSS t
 ### Server Side
 
 In order to migrate to LeptonX on your server side projects (Host and/or AuthServer projects), please follow the [Server Side Migration](AspNetCore.md) document.
+
+## Customization
+
+
+### Layouts
+
+The Angular version of LeptonX Lite provides **layout components** for your **user interface** on [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/Angular/Theming). You can use layouts to **organize your user interface**. You can replace the **layout components** and some parts of the **layout components** with the [ABP replaceable component  system](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement).
+
+
+The main responsibility of a theme is to **provide** the layouts. There are **three pre-defined layouts that must be implemented by all the themes:**
+
+* **ApplicationLayoutComponent:** The **default** layout which is used by the **main** application pages.
+
+* **AccountLayoutComponent:** Mostly used by the **account module** for **login**, **register**, **forgot password**... pages.
+
+* **EmptyLayoutComponent:** The **Minimal** layout that **has no layout components** at all.
+
+ The **Layout components** and all the replacable components are predefined in  `eThemeLeptonXComponents` as enum.
+
+### How to replace a component
+
+```js
+import { ReplaceableComponentsService } from '@abp/ng.core'; // imported ReplaceableComponentsService
+import { eIdentityComponents } from '@abp/ng.identity'; // imported eIdentityComponents enum
+import { eThemeLeptonXComponents } from '@abp/ng.theme.lepton-x';   // imported eThemeLeptonXComponents enum
+
+//...
+
+@Component(/* component metadata */)
+export class AppComponent {
+  constructor(
+    private replaceableComponents: ReplaceableComponentsService, // injected the service
+  ) {
+    this.replaceableComponents.add({
+      component: YourNewApplicationLayoutComponent,
+      key: eThemeLeptonXComponents.ApplicationLayout,
+    });
+  }
+}
+```
+See the [Component Replacement](https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement) documentation for more information on how to replace components.
+
+
+### Brand Component
+
+The **brand component** is a simple component that can be used to display your brand. It contains a **logo** and a **company name**. You can change the logo via css but if you want to change logo component, the key is `eThemeLeptonXComponents.Logo`
+
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewLogoComponent,
+        key: eThemeLeptonXComponents.Logo,
+    });
+///...
+```
+
+![Brand component](../../images/leptonxlite-brand-component.png) 
+
+
+
+## Breadcrumb Component
+
+On websites that have a lot of pages, **breadcrumb navigation** can greatly **enhance the way users find their way** around. In terms of **usability**, breadcrumbs reduce the number of actions a website **visitor** needs to take in order to get to a **higher-level page**, and they **improve** the **findability** of **website sections** and **pages**.
+
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewSidebarComponent,
+        key: eThemeLeptonXComponents.Breadcrumb,
+    });
+///...
+```
+
+![Breadcrumb component](../../images/leptonxlite-breadcrumb-component.png) 
+
+## Sidebar Menu Component
+
+Sidebar menus have been used as a **directory for Related Pages** to a **Service** offering, **Navigation** items to a **specific service** or topic and even just as **Links** the user may be interested in.
+
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewSidebarComponent,
+        key: eThemeLeptonXComponents.Sidebar,
+    });
+///...
+```
+![Sidebar menu component](../../images/leptonxlite-sidebar-menu-component.png) 
+
+## Page Alerts Component
+
+Provides contextual **feedback messages** for typical user actions with a handful of **available** and **flexible** **alert messages**. Alerts are available for any length of text, as well as an **optional dismiss button**.
+
+![Page alerts component](../../images/leptonxlite-page-alerts-component.png) 
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewPageAlertContainerComponent,
+        key: eThemeLeptonXComponents.PageAlertContainer,
+    });
+///...
+```
+## Toolbar Component
+![Breadcrumb component](../../images/leptonxlite-toolbar-component.png)
+
+Toolbar items are used to add **extra functionality to the toolbar**. The toolbar is a **horizontal bar** that **contains** a group of **toolbar items**.
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewNavItemsComponent,
+        key: eThemeLeptonXComponents.NavItems,
+    });
+///...
+```
+
+## Toolbar Items
+There are two parts to the toolbar. The first is Language-Switch. The second is the User-Profile element. You can swap out each of these parts individually.
+
+## Language Switch Component
+
+Think about a **multi-lingual** website and the first thing that could **hit your mind** is **the language switch component**. A **navigation bar** is a **great place** to **embed a language switch**. By embedding the language switch in the navigation bar of your website, you would **make it simpler** for users to **find it** and **easily** switch the **language**  <u>**without trying to locate it across the website.**</u>
+
+![Language switch component](../../images/leptonxlite-language-switch-component.png) 
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewLanguagesComponent,
+        key: eThemeLeptonXComponents.Languages,
+    });
+///...
+```
+
+## User Menu Component
+
+The **User Menu** is the **menu** that **drops down** when you **click your name** or **profile picture** in the **upper right corner** of your page (**in the toolbar**). It drops down options such as **Settings**, **Logout**, etc.
+
+![User menu component](../../images/leptonxlite-user-menu-component.png)
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewCurrentUserComponent,
+        key: eThemeLeptonXComponents.CurrentUser,
+    });
+///...
+```
+Note: The language selection component in the Volo app is not replaceable. It is part of the settings menu.
+
+## Mobile Navbar Component
+The **mobile navbar component** is used to display the **navbar menu on mobile devices**. The mobile navbar component is a **dropdown menu** that contains language selection and user menu.
+
+![Mobile user menu component](../../images/leptonxlite-mobile-user-menu-component.png) 
+```js
+///...
+    this.replaceableComponents.add({
+        component: YourNewMobileNavbarComponent,
+        key: eThemeLeptonXComponents.MobileNavbar,
+    });
+///...
+```
+## Mobile Navbar Items.
+There are two parts of the mobile navbar. The mobile navbar has Language-Switch and User-Profile. You can swap out each of these parts individually. 
+
+The Mobile language-Selection component key is `eThemeLeptonXComponents.MobileLanguageSelection`.
+
+The Mobile User-Profile component key is `eThemeLeptonXComponents.MobileUserProfile`.
+
+