Merge pull request #315 from Infineon/314-documentation-sidebar-text-…

…update

chenged text and images

packages/components/src/components/sidebar/Usage.mdx

@@ -7,74 +7,82 @@ import SidebarExpandedAnatomy from '../../../public-storybook/images/sidebar/sid
 
 
 <Meta of={SidebarStories} /> 
-# Sidebar Navigation
-For dashboards or similar functional application we provide a different and usually common variant of navigation. The sidebar navigation gives users an easy access to different sections.
+# Sidebar
+For dashboards or similar functional application we provide a different and usually common variant of navigation. The sidebar gives users an easy access to different sections.
 
-## Anatomy of default sidebar navigation
+## Anatomy of default sidebar
 <img src={SidebarAnatomy} alt="Sidebar Anatomy" />
 
-**Logo (1)**/
+**Logo (1)**\
 The header always starts with the brand logo.
 
 
-**Application name (2)**/
+**Application name (2)**\
 The application name is always shown below the brand logo.
 
 
-**Main Menu item list (3)**/
+**Main Menu item list (3)**\
 To navigate through different sections and pages. It is possible to attach a supportive icon before the menu item-labels.
 
 
-**Divider (4)**/
+**Divider (4)**\
 To visually cluster different sub menus or to differentiate the sticky footer from the rest above.
 
 
-**Cluster tile (5)**/
-This item opens another subordinate menu. It is always denoted with a chevron-down icon to the right. The cluster tile has always a divider above. Do not use any icons before this menu item.
+**Cluster Title (5)**\
+This menu item opens another subordinate menu. It is always denoted with a chevron-down icon to the right. The cluster title has always a divider above. Do not use any icons before this menu item.
 
 
-**Footer (6)**/
-The bottom-sticked footer can be displayed optional. The text links inside the footer are displayed in line and break if they become to long. A divider on top indicates the footer's edge.
+**Footer (6)**\
+The footer at the bottom can be displayed optionally. The text links within the footer are displayed in one line and wrapped if they become too long. A dividing line at the top indicates the margin of the footer.
 
 
-**Search field (7)**/
+**Search field (7)**\
 If needed the search field can be displayed inside the sidebar's navigation bar.
 
 
-**Secondary navigation (8)**/
-Crucial functions can be placed here. Please pay attention to the placement by priority. [Read more "Header navigation"](link)
+**Secondary navigation (8)**\
+Crucial functions can be placed here. Please pay attention to the placement by priority.
 
 
-**Border (9)**/
+**Border (9)**\
 A 1px border indicates the bottom edge of the navigation bar and the right edge of the sidebar at anytime.
 
 
-**Number Indicator (10)**/
+**Number Indicator (10)**\
 Informs the user about the amount of unseen content inside the menu item's page.
 
 
 ## Anatomy of expanded sidebar navigation
 <img src={SidebarExpandedAnatomy} alt="Sidebar Expanded Anatomy" />
 
-**Subordinated menu (1)**/
-Opens a subordinated menu when you click on the referenced cluster tile. It is possible to attach a supportive icon before the menu item-labels.
+**Subordinated menu (1)**\
+Opens a subordinated menu when you click on the referenced cluster title. It is possible to attach a supportive icon before the menu item-labels.
 
 
-**Hidden overflow (2)**/
-When the content in the sidebar navigation gets too big than the further overflow is clipped.
+**Hidden overflow footer(2)**\
+When the content in the sidebar gets too big than the further overflow is clipped.
 
 
-**Scroll bar (3)**/
+**Scroll bar (3)**\
 A scroll bar appears as the sidebar's height increases.
 
 
-**Expanded menu item (4)**/
+**Expanded menu item (4)**\
 The chevron-up icon indicates that the menu item is expanded.
 
 
-**Intended subordinate menu (5)**/
+**Intended subordinate menu (5)**\
 Shows another subordinate menu in an intended style. Avoid using icons in this menu-depth. Up to here the maximum available menu-depth is reached.
 
 
-**Navigation bar (6)**/
-Can be displayed optionally. If displayed the navigation bar is sticky.
+**Navigation bar (6)**\
+Can be displayed optionally. If displayed the navigation bar is sticky.
+
+
+**Hidden overflow header (7)**\
+As with the footer, if the content in the sidebar becomes too large, the further overflow is clipped.
+
+***
+Check out the Figma component: **[Sidebar](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=25183-14486&mode=design&t=VGECa2WmCtxIWNLe-4)**
+***