Mobile Nav: land.

src/common/app.nav.ts

@@ -112,6 +112,7 @@ export const navItems: {
       iconActive: FormatPaintIcon,
       type: 'app',
       route: '/draw',
+      // hideOnMobile: true,
       hideDrawer: true,
     },
     {

src/common/layout/optima/DesktopNav.tsx

@@ -12,7 +12,7 @@ import { checkDivider, checkVisibileIcon, NavItemApp, navItems } from '~/common/
 import { themeZIndexDesktopNav } from '~/common/app.theme';
 
 import { BringTheLove } from './components/BringTheLove';
-import { DesktopNavGroupButton, DesktopNavIcon, navItemClasses } from './components/DesktopNavIcon';
+import { DesktopNavGroupBox, DesktopNavIcon, navItemClasses } from './components/DesktopNavIcon';
 import { InvertedBar, InvertedBarCornerItem } from './components/InvertedBar';
 import { useOptimaDrawers } from './useOptimaDrawers';
 import { useOptimaLayout } from './useOptimaLayout';
@@ -137,14 +137,14 @@ export function DesktopNav(props: { component: React.ElementType, currentApp?: N
         </Tooltip>
       </InvertedBarCornerItem>
 
-      <DesktopNavGroupButton>
+      <DesktopNavGroupBox>
         {navAppItems}
-      </DesktopNavGroupButton>
+      </DesktopNavGroupBox>
 
-      <DesktopNavGroupButton sx={{ mb: 'calc(2 * var(--GroupMarginY))' }}>
+      <DesktopNavGroupBox sx={{ mb: 'calc(2 * var(--GroupMarginY))' }}>
         {navExtLinkItems}
         {navModalItems}
-      </DesktopNavGroupButton>
+      </DesktopNavGroupBox>
 
     </InvertedBar>
   );

src/common/layout/optima/MobileNav.tsx

@@ -1,40 +1,69 @@
 import * as React from 'react';
+import Router from 'next/router';
 
-import { Typography } from '@mui/joy';
+import type { SxProps } from '@mui/joy/styles/types';
 
-import type { NavItemApp } from '~/common/app.nav';
+import { checkDivider, checkVisibileIcon, NavItemApp, navItems } from '~/common/app.nav';
 
-import { InvertedBar, InvertedBarCornerItem } from './components/InvertedBar';
-import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
+import { InvertedBar } from './components/InvertedBar';
+import { MobileNavGroupBox, MobileNavIcon, mobileNavItemClasses } from './components/MobileNavIcon';
 
 
-export function MobileNav(props: { component: React.ElementType, currentApp?: NavItemApp, hideOnFocusMode?: boolean }) {
+export function MobileNav(props: {
+  component: React.ElementType,
+  currentApp?: NavItemApp,
+  hideOnFocusMode?: boolean,
+  sx?: SxProps,
+}) {
 
   // external state
-  const { isFocusedMode } = useOptimaLayout();
+  // const { isFocusedMode } = useOptimaLayout();
+
+
+  // App items
+  const navAppItems = React.useMemo(() => {
+    return navItems.apps
+      .filter(app => checkVisibileIcon(app, true, undefined))
+      .map((app) => {
+        const isActive = app === props.currentApp;
+
+        if (checkDivider(app)) {
+          // return <Divider key={'div-' + appIdx} sx={{ mx: 1, height: '50%', my: 'auto' }} />;
+          return null;
+        }
+
+        return (
+          <MobileNavIcon
+            key={'n-m-' + app.route.slice(1)}
+            aria-label={app.name}
+            variant={isActive ? 'solid' : undefined}
+            onClick={() => Router.push(app.landingRoute || app.route)}
+            className={`${mobileNavItemClasses.typeApp} ${isActive ? mobileNavItemClasses.active : ''}`}
+          >
+            {/*{(isActive && app.iconActive) ? <app.iconActive /> : <app.icon />}*/}
+            <app.icon />
+          </MobileNavIcon>
+        );
+      });
+  }, [props.currentApp]);
+
 
   // NOTE: this may be abrupt a little
-  if (isFocusedMode && props.hideOnFocusMode)
-    return null;
+  // if (isFocusedMode && props.hideOnFocusMode)
+  //   return null;
 
   return (
     <InvertedBar
       id='mobile-nav'
       component={props.component}
       direction='horizontal'
-      sx={{
-        justifyContent: 'space-around',
-      }}
+      sx={props.sx}
     >
-      <InvertedBarCornerItem sx={{ width: 'auto' }}>
-        <Typography level='title-sm'>
-          Chat
-        </Typography>
-      </InvertedBarCornerItem>
 
-      <Typography>
-        FIXME: MobileNav
-      </Typography>
+      <MobileNavGroupBox>
+        {navAppItems}
+      </MobileNavGroupBox>
+
     </InvertedBar>
   );
 }

src/common/layout/optima/PageBar.tsx

@@ -186,7 +186,7 @@ export function PageBar(props: { component: React.ElementType, currentApp?: NavI
 
       {/* [Mobile] Nav is implemented at the bottom of the Page Menu (for now) */}
       {!!props.isMobile && !!appMenuItems && <ListDivider sx={{ mb: 0 }} />}
-      {!!props.isMobile && <MobileNavListItem variant='solid' currentApp={props.currentApp} />}
+      {!!props.isMobile && <MobileNavListItem variant='solid' hideApps currentApp={props.currentApp} />}
 
     </CloseableMenu>
 

src/common/layout/optima/PageCore.tsx

@@ -6,6 +6,7 @@ import { Box } from '@mui/joy';
 import { themeBgApp, themeZIndexPageBar } from '~/common/app.theme';
 import type { NavItemApp } from '~/common/app.nav';
 
+import { MobileNav } from './MobileNav';
 import { PageBar } from './PageBar';
 
 
@@ -20,6 +21,10 @@ const pageCoreBarSx: SxProps = {
   zIndex: themeZIndexPageBar,
 };
 
+const pageCoreMobileNavSx: SxProps = {
+  flex: 0,
+};
+
 
 export const PageCore = (props: {
   component: React.ElementType,
@@ -44,13 +49,13 @@ export const PageCore = (props: {
     {props.children}
 
     {/* [Mobile] Nav bar at the bottom */}
-    {/* FIXME: TEMP: Disable mobilenav */}
-    {/*{props.isMobile && (*/}
-    {/*  <MobileNav*/}
-    {/*    component='nav'*/}
-    {/*    currentApp={props.currentApp}*/}
-    {/*    hideOnFocusMode*/}
-    {/*  />*/}
-    {/*)}*/}
+    {!!props.isMobile && (
+      <MobileNav
+        component='nav'
+        currentApp={props.currentApp}
+        hideOnFocusMode
+        sx={pageCoreMobileNavSx}
+      />
+    )}
 
   </Box>;

src/common/layout/optima/components/DesktopNavIcon.tsx

@@ -3,7 +3,7 @@ import { Box, IconButton, styled } from '@mui/joy';
 import { cssRainbowColorKeyframes } from '~/common/app.theme';
 
 
-export const DesktopNavGroupButton = styled(Box)({
+export const DesktopNavGroupBox = styled(Box)({
   // flex column
   display: 'flex',
   flexDirection: 'column',

src/common/layout/optima/components/MobileNavIcon.tsx

@@ -0,0 +1,51 @@
+import { Box, IconButton, styled } from '@mui/joy';
+
+
+export const MobileNavGroupBox = styled(Box)({
+  // layout
+  flex: 1,
+  minHeight: 'var(--Bar)',
+
+  // contents
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
+
+  // style
+  // backgroundColor: 'rgba(0 0 0 / 0.5)', // darken bg
+
+  // debug
+  // '& > *': { border: '1px solid red' },
+});
+
+export const mobileNavItemClasses = {
+  typeApp: 'NavButton-typeApp',
+  active: 'NavButton-active',
+};
+
+export const MobileNavIcon = styled(IconButton)(({ theme }) => ({
+
+  // custom vars
+  '--MarginY': '0.5rem',
+  '--ExtraPadX': '1rem',
+
+  // IconButton customization
+  '--Icon-fontSize': '1.25rem',
+  '--IconButton-size': 'calc(var(--Bar) - 2 * var(--MarginY))',
+  paddingInline: 'var(--ExtraPadX)',
+  border: 'none',
+
+  [`&.${mobileNavItemClasses.typeApp}:hover`]: {
+    backgroundColor: 'var(--variant-solidHoverBg)',
+    // backgroundColor: theme.palette.neutral.softHoverBg,
+    color: theme.palette.neutral.softColor,
+  },
+
+  // app active (non hover)
+  // [`&.${mobileNavItemClasses.typeApp}.${mobileNavItemClasses.active}`]: {
+  //   backgroundColor: ...
+  // },
+
+})) as typeof IconButton;