feat(admin-ui): implement bottom navigation bar for the mobile view (#2917)

admin-ui/app/components/Layout/LayoutContent.tsx

@@ -2,7 +2,7 @@ import React, { use, useEffect, useMemo, useRef } from 'react'
 import { ThemeContext } from '@/context/theme/themeContext'
 import getThemeColor, { themeConfig } from '@/context/theme/config'
 import customColors, { getCustomColorsAsCssVars, getLoadingOverlayRgba } from '@/customColors'
-import { getListHoverOpacity, SCROLLBAR } from '@/constants'
+import { getListHoverOpacity, SCROLLBAR, MOBILE_BOTTOM_NAV_HEIGHT } from '@/constants'
 import { THEME_LIGHT, THEME_DARK } from '@/context/theme/constants'
 import type { LayoutContentProps } from './types'
 
@@ -42,6 +42,7 @@ const LayoutContent: React.FC<LayoutContentProps> & { layoutPartName: string } =
       '--theme-scrollbar-width': `${SCROLLBAR.WIDTH}px`,
       '--theme-scrollbar-height': `${SCROLLBAR.HEIGHT}px`,
       '--theme-scrollbar-radius': `${SCROLLBAR.BORDER_RADIUS}px`,
+      '--mobile-bottom-nav-height': `${MOBILE_BOTTOM_NAV_HEIGHT}px`,
       '--theme-sidebar-background': themeColors.menu.background,
       '--theme-navbar-background': themeColors.navbar.background,
       '--theme-navbar-border': themeColors.navbar.border,

admin-ui/app/components/MobileBottomNav/MobileBottomNav.style.ts

@@ -0,0 +1,79 @@
+import { makeStyles } from 'tss-react/mui'
+import { hexToRgb } from '@/customColors'
+import { fontFamily, fontWeights, fontSizes } from '@/styles/fonts'
+import { BOTTOM_NAV } from './constants'
+import { SHEET } from './sheetConstants'
+import type { MobileBottomNavThemeColors } from './types'
+
+const useStyles = makeStyles<{ colors: MobileBottomNavThemeColors }>()((_theme, { colors }) => ({
+  root: {
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: BOTTOM_NAV.Z_ROOT,
+    display: 'flex',
+    alignItems: 'stretch',
+    height: BOTTOM_NAV.HEIGHT,
+    padding: `0 ${BOTTOM_NAV.PADDING_X}px`,
+    backgroundColor: colors.background,
+    borderTop: `1px solid ${colors.border}`,
+    boxShadow: `0px ${BOTTOM_NAV.SHADOW_OFFSET_Y}px ${BOTTOM_NAV.SHADOW_BLUR}px 0px rgba(${hexToRgb(colors.shadow)}, ${BOTTOM_NAV.SHADOW_OPACITY})`,
+    paddingBottom: 'env(safe-area-inset-bottom)',
+    boxSizing: 'border-box',
+  },
+  rootElevated: {
+    zIndex: SHEET.Z_BAR_ELEVATED,
+    boxShadow: 'none',
+  },
+  tab: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: BOTTOM_NAV.TAB_GAP,
+    minWidth: 0,
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+    position: 'relative',
+    color: colors.inactive,
+    minHeight: BOTTOM_NAV.TAB_MIN_HEIGHT,
+  },
+  tabActive: {
+    color: colors.active,
+  },
+  iconWrap: {
+    'display': 'flex',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'width': BOTTOM_NAV.ICON_SIZE,
+    'height': BOTTOM_NAV.ICON_SIZE,
+    '& svg': {
+      width: BOTTOM_NAV.ICON_SIZE,
+      height: BOTTOM_NAV.ICON_SIZE,
+    },
+  },
+  label: {
+    fontFamily,
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.medium,
+    lineHeight: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+  },
+  activeIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    width: BOTTOM_NAV.ACTIVE_INDICATOR_WIDTH,
+    height: BOTTOM_NAV.ACTIVE_INDICATOR_HEIGHT,
+    borderRadius: BOTTOM_NAV.ACTIVE_INDICATOR_HEIGHT,
+    backgroundColor: colors.active,
+  },
+}))
+
+export { useStyles }

admin-ui/app/components/MobileBottomNav/MobileBottomNav.tsx

@@ -0,0 +1,123 @@
+import { useCallback, useMemo, useState, type JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import { useAppNavigation } from '@/helpers/navigation'
+import customColors from '@/customColors'
+import { useTheme } from '@/context/theme/themeContext'
+import getThemeColor from '@/context/theme/config'
+import { THEME_LIGHT } from '@/context/theme/constants'
+import { useStyles } from './MobileBottomNav.style'
+import { MOBILE_MEDIA_QUERY, PRIMARY_TAB_DEFS, MORE_TAB_KEY } from './constants'
+import MobileNavSheet from './MobileNavSheet'
+import { PRIMARY_ICON_BY_KEY } from './sheetIcons'
+import { isMoreMenuPath, type SheetItem, type SheetKey } from './sheetConstants'
+import type { MobileNavTab, MobileBottomNavThemeColors } from './types'
+
+const MobileBottomNav = (): JSX.Element | null => {
+  const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY)
+  const { t } = useTranslation()
+  const { navigateToRoute } = useAppNavigation()
+  const location = useLocation()
+  const { state } = useTheme()
+  const [openSheet, setOpenSheet] = useState<SheetKey | null>(null)
+
+  const themeColors = useMemo((): MobileBottomNavThemeColors => {
+    const isLight = state.theme === THEME_LIGHT
+    const theme = getThemeColor(state.theme)
+    return {
+      background: isLight ? customColors.white : theme.navbar.background,
+      shadow: customColors.black,
+      border: theme.navbar.border,
+      active: customColors.mobileNavActive,
+      inactive: isLight ? customColors.mobileNavInactiveLight : customColors.mobileNavInactiveDark,
+    }
+  }, [state.theme])
+
+  const { classes, cx } = useStyles({ colors: themeColors })
+
+  const tabs = useMemo((): MobileNavTab[] => {
+    const primary: MobileNavTab[] = PRIMARY_TAB_DEFS.map((def) => ({
+      key: def.key,
+      titleKey: def.titleKey,
+      path: def.path,
+      basePath: def.basePath,
+      directNav: 'directNav' in def ? def.directNav : undefined,
+      icon: PRIMARY_ICON_BY_KEY[def.iconKey],
+    }))
+    return [
+      ...primary,
+      {
+        key: MORE_TAB_KEY,
+        titleKey: 'menus.more',
+        isMore: true,
+        icon: <MoreVertIcon />,
+      },
+    ]
+  }, [])
+
+  const isTabActive = (tab: MobileNavTab): boolean => {
+    if (openSheet) return openSheet === tab.key
+    if (isMoreMenuPath(location.pathname)) return tab.isMore === true
+    if (tab.isMore) return false
+    const matchPath = tab.basePath ?? tab.path
+    if (!matchPath) return false
+    return location.pathname === matchPath || location.pathname.startsWith(`${matchPath}/`)
+  }
+
+  const handleTabClick = (tab: MobileNavTab): void => {
+    if (tab.directNav && tab.path) {
+      setOpenSheet(null)
+      navigateToRoute(tab.path)
+      return
+    }
+    setOpenSheet((current) => (current === tab.key ? null : (tab.key as SheetKey)))
+  }
+
+  const handleSheetClose = useCallback((): void => {
+    setOpenSheet(null)
+  }, [])
+
+  const handleSheetSelect = useCallback(
+    (item: SheetItem): void => {
+      if (!item.path) return
+      setOpenSheet(null)
+      navigateToRoute(item.path)
+    },
+    [navigateToRoute],
+  )
+
+  if (!isMobile) return null
+
+  return (
+    <>
+      <nav
+        className={cx(classes.root, openSheet && classes.rootElevated)}
+        aria-label={t('menus.mobileNavigation')}
+        data-testid="mobile-bottom-nav"
+      >
+        {tabs.map((tab) => {
+          const active = isTabActive(tab)
+          return (
+            <button
+              key={tab.key}
+              type="button"
+              className={cx(classes.tab, active && classes.tabActive)}
+              aria-current={active ? 'page' : undefined}
+              aria-label={t(tab.titleKey)}
+              onClick={() => handleTabClick(tab)}
+            >
+              <span className={classes.iconWrap}>{tab.icon}</span>
+              <span className={classes.label}>{t(tab.titleKey)}</span>
+              {active ? <span className={classes.activeIndicator} /> : null}
+            </button>
+          )
+        })}
+      </nav>
+      <MobileNavSheet openKey={openSheet} onClose={handleSheetClose} onSelect={handleSheetSelect} />
+    </>
+  )
+}
+
+export default MobileBottomNav