feat(ui): adds illustrations into UX documentation (#1489)

* feat(ui): adds illustrations into UX documentation

* fix(ui):fixes issues with images and reworkes section modals and overflow menu

---------

Co-authored-by: Esther Schmitz <edda@users.noreply.github.com>

Author: MartinS-git

docs/ux/images/Alternative_Second-Level_Navigations.svg

@@ -4,12 +4,12 @@
 
 As a bare minimum, a Juno application will comprise of a page header, a main content area, and a page footer.
 
-[illustration 1]
+![Layout Fundamentals - Anatomy](images/Layout_Fundamentals-Anatomy.svg)
 
 The page footer will always be at the bottom of the viewport as a minimum (i.e. if the page content requires less than viewport height), or at the very bottom of the content.
 
-[illustration 2 – do/don't]
+![Layout Fundamentals - Footer](images/Layout_Fundamentals-Footer.svg)
 
 All but the most basic applications will require some means of navigation. As a standard rule, the top level navigation will be a side navigation left of the content area.
 
-[illustration 3]
+![Layout Fundamentals - SideNavigation](images/Side_Navigation_as_Top_Level_Navigation.svg)

docs/ux/images/Layout_Fundamentals-Anatomy.svg

@@ -6,6 +6,8 @@ In some applications built with earlier versions of Juno, the top level navigati
 
 **Using a horizontal header navigation as top level navigation is non-compliant and strongly discouraged.**
 
+![Layout Fundamentals - SideNavigation](images/Site_Navigation.svg)
+
 Ideally, all applications should upgrade to a more recent version of Juno and adapt current layout rules, however this is not feasible in all cases.
 
 Support for this type of navigation could be dropped with any new major release of Juno at any time.

docs/ux/images/Layout_Fundamentals-Footer.svg

@@ -6,16 +6,16 @@
 
 Juno applications will use a side navigation as their top level navigation, with only very few and rare exceptions for legacy applications. A side navigation may be flat with no sub-levels for apps with a simpler structure. For applications with a more complex or deeper navigational structure, the Juno side navigation can contain entries with child elements, or host groups of elements with or without a title. In general, we do not recommended to use more than three levels.
 
-[illustration, same as layout-fundamentals ill. 2, do]
+![Side Navigation](images/Side_Navigation_as_Top_Level_Navigation.svg)
 
 ## Alternative Second-Level Navigations
 
 In cases where using a second or third level in the Juno SideNavigation is not feasible, a second-level top navigation above the content, that visibly is a child of the currently selected top level navigation entry, may be used.
 
-[illustration]
+![Second-Level Navigations](images/Alternative_Second-Level_Navigations.svg)
 
 ## Switching Between Embedded Apps
 
-In order to switch between embedded applications, even if not a "navigation" in the strict, technical sense of the term, we allow for using a navigation-like element, as switching between applications in such a scenario will be indistinguishable from an actual navigation for a user.
+In order to switch between embedded applications, even if not a "navigation" in the strict, technical sense of the term, we allow for using a navigation-like element `A`, as switching between applications `B` in such a scenario will be indistinguishable from an actual navigation for a user.
 
-[illustration]
+![Switching Between Embedded Apps](images/Switching_Between_Embedded_Apps.svg)

docs/ux/images/Side_Navigation_as_Top_Level_Navigation.svg

@@ -15,12 +15,9 @@ An established Popup menu pattern used in many user interfaces is the OverflowMe
 Use an OverflowMenu when:
 
 - The options or actions in the menu are associated with or targeted at a specific item
-- there is not enough space to show the available options inline / as-is.
-- there are more than 2-3 options available for the item the options are associated with
 
 Do NOT use an overflow item when:
 
-- There is only one action (unless there really is no other way of placing that option)
 - It is impossible for a user to establish what item or UI element the menu and its options refer to
 
 When using a PopupMenu, always make sure: