feat: render additional footer items in navigation (#2991)

Author: astandrik

src/containers/AsideNavigation/AsideNavigation.tsx

@@ -59,6 +59,10 @@ export interface AsideNavigationProps {
     menuItems?: MenuItem[];
     content: React.ReactNode;
     user?: {login: string; icon?: IconData};
+    renderFooterItems?: (
+        defaultFooterItems: React.ReactNode[],
+        ctx: {compact: boolean; asideRef: React.RefObject<HTMLDivElement>},
+    ) => React.ReactNode[];
 }
 
 enum Panel {
@@ -110,10 +114,11 @@ export function AsideNavigation(props: AsideNavigationProps) {
                 onChangeCompact={setIsCompact}
                 className={b()}
                 renderContent={() => props.content}
-                renderFooter={({compact, asideRef}) => (
-                    <React.Fragment>
+                renderFooter={({compact: footerCompact, asideRef}) => {
+                    const defaultFooterItems = [
                         <FooterItem
-                            compact={compact}
+                            key="information"
+                            compact={footerCompact}
                             item={{
                                 id: 'information',
                                 title: i18n('navigation-item.information'),
@@ -125,9 +130,10 @@ export function AsideNavigation(props: AsideNavigationProps) {
                             popupVisible={informationPopupVisible}
                             onClosePopup={closeInformationPopup}
                             renderPopupContent={renderInformationPopup}
-                        />
+                        />,
 
                         <FooterItem
+                            key="user-settings"
                             item={{
                                 id: 'user-settings',
                                 title: i18n('navigation-item.settings'),
@@ -141,14 +147,30 @@ export function AsideNavigation(props: AsideNavigationProps) {
                                     );
                                 },
                             }}
-                            compact={compact}
-                        />
-
-                        <UserDropdown isCompact={compact} popupAnchor={asideRef} user={props.user}>
+                            compact={footerCompact}
+                        />,
+
+                        <UserDropdown
+                            key="user-dropdown"
+                            isCompact={footerCompact}
+                            popupAnchor={asideRef}
+                            user={props.user}
+                        >
                             {props.ydbInternalUser}
-                        </UserDropdown>
-                    </React.Fragment>
-                )}
+                        </UserDropdown>,
+                    ];
+
+                    return (
+                        <React.Fragment>
+                            {props.renderFooterItems
+                                ? props.renderFooterItems(defaultFooterItems, {
+                                      compact: footerCompact,
+                                      asideRef,
+                                  })
+                                : defaultFooterItems}
+                        </React.Fragment>
+                    );
+                }}
                 panelItems={[
                     {
                         id: 'user-settings',