docs(sidebar): Document new renderBottomCmp prop

docs/components/date-picker.mdx

@@ -82,7 +82,7 @@ With the prop <Tag text='format' />, and its <Tag text='short' /> and <Tag text=
 
 ##### <span name="floating-nav">OnlyOf</span>
 
-With the prop <Tag text='onlyOf' />, its variants <Tag text='year' />, <Tag text='month' />, <Tag text='day' /> and <Tag text='month' />/span> you can control the format
+With the prop <Tag text='onlyOf' />, its variants <Tag text='year' />, <Tag text='month' />, <Tag text='day' /> and <Tag text='month' /> you can control the format
 
 <Playground>
 

docs/layout/sidebar.mdx

@@ -150,6 +150,22 @@ Example:
 />
 ' />
 
+<br />
+##### <span name="floating-nav">RenderBottomCmp</span>
+
+A render prop that allows you to use a fully custom element at the bottom of the SideBar. When using it alongside the <Tag text='dangerZone' /> prop, the Danger Zone will be displayed below.
+
+The expanded state of the SideBar is passed as an argument to the render prop, making it easy for you to adjust your component accordingly.
+
+Example:
+
+<WindowEditor codeString='import { Sidebar } from "dd360-ds"
+
+<SideBar
+&nbsp;&nbsp;sideBarName="Sidebar"
+&nbsp;&nbsp;renderBottomCmp={(isExpanded) => <CustomComponent isExpanded={isExpanded} />}
+/>' />
+
 <br />
 ##### <span name="floating-nav">DisabledOptionsTag</span>
 
@@ -339,6 +355,7 @@ Left position of the sidebar.
         },
         { title: 'disabledOptionsTag', default: null, types: ['string'] },
         { title: 'dangerZone', default: null, types: ['{ show: boolean, text: string, active: boolean, callBack?: (() => void), }'] },
+        { title: 'renderBottomCmp', default: null, types: ['(isExpanded: boolean) => ReactElement'] },
         { title: 'flushSync', default: null, types: ['(<R>(fn: () => R) => R)'] },
         { title: 'defaultExpand', default: 'false', types: ['boolean'] },
         { title: 'top', default: null, types: ['number'] },