feat: Unify navigation with consistent header and centered bottom menu
- Removed duplicate MobileNav AppBar from desktop view - Added unified header bar across all screen sizes (mobile + desktop) - Positioned connection status on left, user menu on right in header - Centered bottom navigation menu on desktop (30% width with 20px margin) - Hidden floating voice button on desktop (using center button instead) - Updated voice command button to pink color (#FF69B4) matching design - Added rounded corners to desktop bottom navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -62,134 +62,30 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
flexDirection: 'column',
|
||||
minHeight: '100vh',
|
||||
bgcolor: 'background.default',
|
||||
pb: { xs: '64px', md: 0 }, // Space for tab bar on mobile
|
||||
pb: '64px', // Space for tab bar on both mobile and desktop
|
||||
}}>
|
||||
{!isMobile && <MobileNav />}
|
||||
|
||||
{/* Mobile Header Bar */}
|
||||
{isMobile && (
|
||||
{/* Header Bar - Both Mobile and Desktop */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 48,
|
||||
bgcolor: 'background.paper',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
zIndex: 1200,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
>
|
||||
{/* Connection Status & Presence Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 48,
|
||||
bgcolor: 'background.paper',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
zIndex: 1200,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
>
|
||||
{/* Connection Status & Presence Indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
|
||||
<Chip
|
||||
icon={isConnected ? <Wifi /> : <WifiOff />}
|
||||
label={isConnected ? t('connection.live') : t('connection.offline')}
|
||||
size="small"
|
||||
color={isConnected ? 'success' : 'default'}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{isConnected && presence.count > 1 && (
|
||||
<Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
|
||||
<Chip
|
||||
icon={<People />}
|
||||
label={presence.count}
|
||||
size="small"
|
||||
color="primary"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* User Menu Button - Top Right */}
|
||||
<IconButton
|
||||
onClick={handleMenuOpen}
|
||||
size="small"
|
||||
aria-label="user menu"
|
||||
aria-controls={anchorEl ? 'user-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={anchorEl ? 'true' : undefined}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
bgcolor: 'primary.main',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
{user?.name?.charAt(0).toUpperCase() || 'U'}
|
||||
</Avatar>
|
||||
</IconButton>
|
||||
|
||||
<Menu
|
||||
id="user-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
onClick={handleMenuClose}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
sx={{
|
||||
mt: 1,
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={() => handleNavigate('/settings')}>
|
||||
<ListItemIcon>
|
||||
<Settings fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.settings')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => handleNavigate('/children')}>
|
||||
<ListItemIcon>
|
||||
<ChildCare fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.children')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => handleNavigate('/family')}>
|
||||
<ListItemIcon>
|
||||
<Group fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.family')}</ListItemText>
|
||||
</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={handleLogout}>
|
||||
<ListItemIcon>
|
||||
<Logout fontSize="small" color="error" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.logout')}</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Connection Status & Presence Indicator - Desktop Only */}
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 16,
|
||||
right: 16,
|
||||
zIndex: 1200,
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
}}
|
||||
@@ -202,7 +98,6 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
color={isConnected ? 'success' : 'default'}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
@@ -216,13 +111,72 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
color="primary"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
boxShadow: 1,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* User Menu Button - Top Right */}
|
||||
<IconButton
|
||||
onClick={handleMenuOpen}
|
||||
size="small"
|
||||
aria-label="user menu"
|
||||
aria-controls={anchorEl ? 'user-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={anchorEl ? 'true' : undefined}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
bgcolor: 'primary.main',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
{user?.name?.charAt(0).toUpperCase() || 'U'}
|
||||
</Avatar>
|
||||
</IconButton>
|
||||
|
||||
<Menu
|
||||
id="user-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
onClick={handleMenuClose}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
sx={{
|
||||
mt: 1,
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={() => handleNavigate('/settings')}>
|
||||
<ListItemIcon>
|
||||
<Settings fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.settings')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => handleNavigate('/children')}>
|
||||
<ListItemIcon>
|
||||
<ChildCare fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.children')}</ListItemText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => handleNavigate('/family')}>
|
||||
<ListItemIcon>
|
||||
<Group fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.family')}</ListItemText>
|
||||
</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={handleLogout}>
|
||||
<ListItemIcon>
|
||||
<Logout fontSize="small" color="error" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('navigation.logout')}</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Container
|
||||
maxWidth={isTablet ? 'md' : 'lg'}
|
||||
@@ -230,13 +184,13 @@ export const AppShell = ({ children }: AppShellProps) => {
|
||||
flex: 1,
|
||||
px: { xs: 2, md: 3 },
|
||||
py: 3,
|
||||
pt: { xs: '64px', md: 3 }, // Add top padding for header bar on mobile
|
||||
pt: '64px', // Add top padding for header bar on both mobile and desktop
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Container>
|
||||
|
||||
{isMobile && <TabBar />}
|
||||
<TabBar />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user