From c737407134336ac22c2aee4e3eb3ba22734084a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ya=C4=9F=C4=B1zhan=20Necat=20Yakal=C4=B1?=
 <yagizhanyakali@gmail.com>
Date: Fri, 22 Mar 2024 14:33:42 +0300
Subject: [PATCH] add application and application header

---
 README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/README.md b/README.md
index 98e2acb..47cd4b1 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,8 @@ public partial class Index
 
 ### Supported Components
 
+- [Application](#application) **(since 0.4.8)**
+- [Application Header](#application-header) **(since 0.4.8)**
 - [Basic Navigation](#basic-navigation)
 - [Navigation Menu](#navigation-menu)
 - [About and Legal](#about-and-legal)
@@ -149,6 +151,65 @@ public partial class Index
 - [Form Validation](#form-validation)
 - [Workflow](#workflow)
 
+## Application
+```razor
+<Application @ref="_app">
+    <ApplicationHeader Name="My Application">
+        <placeholder-logo slot="logo"></placeholder-logo>
+    </ApplicationHeader>
+    <Menu>
+        <MenuItem>Item 1</MenuItem>
+        <MenuItem>Item 2</MenuItem>
+    </Menu>
+
+    <ix-content>
+        <ContentHeader
+            Slot="header"
+            HeaderTitle="My Content Page"
+        >
+        </ContentHeader>
+    </ix-content>
+</Application>
+```
+
+```csharp
+Application _app;
+
+// Set the app switch config when the component is rendered. 
+protected override async Task OnAfterRenderAsync(bool firstRender)
+{
+    if(firstRender)
+    {
+        AppSwitchConfig config = new()
+        {
+            CurrentAppId = "1",
+            Apps = 
+            [
+                new App()
+                {
+                    Id = "App1",
+                    Name = "App 1",
+                    Description = "Awesome app",
+                    Url = "app1",
+                    Target = "_self",
+                    IconSrc = "..."
+                }
+            ]
+        }
+
+        _app.AppSwitchConfig = config;
+    }
+}
+```
+
+## Application Header
+
+```razor
+<ApplicationHeader Name="My Application">
+    <placeholder-logo slot="logo"></placeholder-logo>
+</ApplicationHeader>
+```
+ 
 ## Basic Navigation
 
 ```razor