Navigation User Menu has PoweredBy on mobiles (#5464)

Co-authored-by: Carlos Cano <[email protected]>

Author: me-andre

src/main/ui/platformNavigation/PlatformNavigationBar.tsx

@@ -2,9 +2,9 @@ import NavigationBar, { NAVIGATION_CONTENT_HEIGHT_GUTTERS } from '../../../core/
 import PlatformNavigationUserAvatar from './PlatformNavigationUserAvatar';
 import PlatformSearch from '../platformSearch/PlatformSearch';
 import PlatformNavigationMenuButton from './PlatformNavigationMenuButton';
-import { Box, Slide, Theme, useMediaQuery } from '@mui/material';
+import { Box, MenuItem, Slide, Theme, useMediaQuery } from '@mui/material';
 import React, { cloneElement, ReactElement, Ref, useLayoutEffect, useRef, useState } from 'react';
-import PlatformNavigationUserMenu from './PlatformNavigationUserMenu';
+import PlatformNavigationUserMenu, { UserMenuDivider } from './PlatformNavigationUserMenu';
 import UserMenuPlatformNavigationSegment from './platformNavigationMenu/UserMenuPlatformNavigationSegment';
 import NavigationBarSideContent from '../../../core/ui/navigation/NavigationBarSideContent';
 import { gutters } from '../../../core/ui/grid/utils';
@@ -15,6 +15,7 @@ import { GUTTER_PX } from '../../../core/ui/grid/constants';
 import PlatformNavigationUncollapse from './PlatformNavigationUncollapse';
 import SkipLink from '../../../core/ui/keyboardNavigation/SkipLink';
 import { useTranslation } from 'react-i18next';
+import PoweredBy from '../poweredBy/PoweredBy';
 
 export interface PlatformNavigationBarProps {
   breadcrumbs?: ReactElement<UncontrolledExpandable & { ref: Ref<Collapsible> }>;
@@ -99,8 +100,21 @@ const PlatformNavigationBar = ({ breadcrumbs }: PlatformNavigationBarProps) => {
           </PlatformSearch>
           {!isMobile && <PlatformNavigationMenuButton />}
           <PlatformNavigationUserAvatar drawer={isMobile}>
-            <PlatformNavigationUserMenu surface={!isMobile}>
+            <PlatformNavigationUserMenu
+              surface={!isMobile}
+              footer={
+                isMobile && (
+                  <>
+                    <UserMenuDivider />
+                    <Box component={MenuItem} paddingY={gutters(0.5)}>
+                      <PoweredBy preview />
+                    </Box>
+                  </>
+                )
+              }
+            >
               {isMobile && <UserMenuPlatformNavigationSegment />}
+              {isMobile && <UserMenuDivider />}
             </PlatformNavigationUserMenu>
           </PlatformNavigationUserAvatar>
         </Box>

src/main/ui/platformNavigation/PlatformNavigationUserMenu.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, PropsWithChildren, useMemo, useState } from 'react';
+import React, { forwardRef, PropsWithChildren, ReactNode, useMemo, useState } from 'react';
 import { Box, Divider, MenuList, Typography } from '@mui/material';
 import AlkemioAvatar from '../../../core/ui/image/AlkemioAvatar';
 import { BlockTitle, Caption } from '../../../core/ui/typography';
@@ -32,11 +32,14 @@ import usePlatformOrigin from '../../../domain/platform/routes/usePlatformOrigin
 
 interface PlatformNavigationUserMenuProps {
   surface: boolean;
+  footer?: ReactNode;
   onClose?: () => void;
 }
 
+export const UserMenuDivider = () => <Divider sx={{ width: '85%', marginX: 'auto' }} />;
+
 const PlatformNavigationUserMenu = forwardRef<HTMLDivElement, PropsWithChildren<PlatformNavigationUserMenuProps>>(
-  ({ surface, onClose, children }, ref) => {
+  ({ surface, onClose, footer, children }, ref) => {
     const { t } = useTranslation();
 
     const { pathname } = useLocation();
@@ -113,9 +116,8 @@ const PlatformNavigationUserMenu = forwardRef<HTMLDivElement, PropsWithChildren<
                   )}
                 </PendingMembershipsUserMenuItem>
               )}
-              <Divider sx={{ width: '85%', marginX: 'auto' }} />
+              <UserMenuDivider />
               {children}
-              {children && <Divider sx={{ width: '85%', marginX: 'auto' }} />}
               {isAdmin && (
                 <NavigatableMenuItem iconComponent={SettingsIcon} route="/admin" onClick={onClose}>
                   {t('common.administration')}
@@ -158,6 +160,7 @@ const PlatformNavigationUserMenu = forwardRef<HTMLDivElement, PropsWithChildren<
               <NavigatableMenuItem tabOnly iconComponent={ExitToAppOutlined} onClick={onClose}>
                 {t('components.navigation.exitMenu')}
               </NavigatableMenuItem>
+              {footer}
             </MenuList>
           </FocusTrap>
         </Wrapper>