yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add composed apps illustration

Browse Source
This commit is contained in:
Mads Rasmussen
2023-03-01 19:07:51 +01:00
parent 7d950fc5f9
commit 48d3fcefd4
2 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Umbraco.Web.UI.Client/public-assets/docs/section-sidebar-composed-apps.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

4
src/Umbraco.Web.UI.Client/src/stories/extending/sections/sidebar.mdx
View File

@@ -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)