From 48d3fcefd4ec7dff6c32570def47a05a3f94d242 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 1 Mar 2023 19:07:51 +0100
Subject: [PATCH] add composed apps illustration

---
 .../docs/section-sidebar-composed-apps.svg    | 40 +++++++++++++++++++
 .../stories/extending/sections/sidebar.mdx    |  4 ++
 2 files changed, 44 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/public-assets/docs/section-sidebar-composed-apps.svg

diff --git a/src/Umbraco.Web.UI.Client/public-assets/docs/section-sidebar-composed-apps.svg b/src/Umbraco.Web.UI.Client/public-assets/docs/section-sidebar-composed-apps.svg
new file mode 100644
index 0000000000..4081881518
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/public-assets/docs/section-sidebar-composed-apps.svg
@@ -0,0 +1,40 @@
+<svg width="370" height="250" viewBox="0 0 370 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9" width="352" height="232" rx="7" fill="white" stroke="black" stroke-width="2"/>
+<path d="M354 10C357.314 10 360 12.6863 360 16L360 40L10 40L10 16C10 12.6863 12.6863 9.99998 16 9.99998L354 10Z" fill="#1B264F"/>
+<mask id="path-3-inside-1_51_200" fill="white">
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z"/>
+</mask>
+<path d="M10 40H102V240H16C12.6863 240 10 237.314 10 234V40Z" fill="white"/>
+<path d="M10 40H102H10ZM102 240H10H102ZM10 240V40V240ZM103 40V240H101V40H103Z" fill="black" mask="url(#path-3-inside-1_51_200)"/>
+<g opacity="0.8">
+<path d="M10 40H360V234C360 237.314 357.314 240 354 240H10V40Z" fill="#D9D9D9"/>
+</g>
+<rect x="10" y="179" width="91" height="30" fill="white"/>
+<path d="M56 189L57.1226 192.455H60.7553L57.8164 194.59L58.9389 198.045L56 195.91L53.0611 198.045L54.1836 194.59L51.2447 192.455H54.8774L56 189Z" fill="#848484"/>
+<rect x="10" y="210" width="91" height="30" fill="white"/>
+<path d="M56 220L57.1226 223.455H60.7553L57.8164 225.59L58.9389 229.045L56 226.91L53.0611 229.045L54.1836 225.59L51.2447 223.455H54.8774L56 220Z" fill="#848484"/>
+<rect x="10" y="40" width="91" height="30" fill="white"/>
+<path d="M56 50L57.1226 53.4549H60.7553L57.8164 55.5902L58.9389 59.0451L56 56.9098L53.0611 59.0451L54.1836 55.5902L51.2447 53.4549H54.8774L56 50Z" fill="#848484"/>
+<g opacity="0.25">
+<rect x="62" y="19" width="32" height="12" fill="white"/>
+<rect x="67" y="24" width="22" height="2" fill="#848484"/>
+</g>
+<g opacity="0.25">
+<rect x="104" y="19" width="32" height="12" fill="white"/>
+<rect x="109" y="24" width="22" height="2" fill="#848484"/>
+</g>
+<g opacity="0.25">
+<rect x="20" y="19" width="32" height="12" fill="white"/>
+<rect x="25" y="24" width="22" height="2" fill="#848484"/>
+</g>
+<rect x="10" y="71" width="91" height="107" fill="white"/>
+<path d="M24 146L27.4641 152H20.5359L24 146Z" fill="#848484"/>
+<rect x="33" y="148" width="40" height="2" fill="#848484"/>
+<path d="M24 130L27.4641 136H20.5359L24 130Z" fill="#848484"/>
+<rect x="33" y="132" width="40" height="2" fill="#848484"/>
+<path d="M24 114L27.4641 120H20.5359L24 114Z" fill="#848484"/>
+<rect x="33" y="116" width="40" height="2" fill="#848484"/>
+<path d="M24 98L27.4641 104H20.5359L24 98Z" fill="#848484"/>
+<rect x="33" y="100" width="40" height="2" fill="#848484"/>
+<rect x="20" y="80" width="58" height="8" fill="#D9D9D9"/>
+</svg>
diff --git a/src/Umbraco.Web.UI.Client/src/stories/extending/sections/sidebar.mdx b/src/Umbraco.Web.UI.Client/src/stories/extending/sections/sidebar.mdx
index efa2b6ff44..5c076b5321 100644
--- a/src/Umbraco.Web.UI.Client/src/stories/extending/sections/sidebar.mdx
+++ b/src/Umbraco.Web.UI.Client/src/stories/extending/sections/sidebar.mdx
@@ -74,6 +74,10 @@ interface UmbMenuSectionSidebarAppElement {}
 
 [See Menu Docs](?path=/docs/guides-extending-the-backoffice-menu--docs)
 
+This will make it possible to compose a sidebar menu from multiple Apps:
+
+<img src="docs/section-sidebar-composed-apps.svg" width="400" />
+
 #### Adding Items to an existing menu
 
 [See Menu Docs](?path=/docs/guides-extending-the-backoffice-menu--docs)