jonas/donetick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: simplify menu icon logic in NavBar component

Browse Source
This commit is contained in:
Mo Tarbin
2026-02-08 01:35:45 -05:00
parent 925cf982ca
commit 560cceca9b
2 changed files with 111 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/views/Modals/Inputs/LabelModal.jsx
View File

@@ -91,75 +91,80 @@ function LabelModal({ isOpen, onClose, label }) {
}
return (
<ResponsiveModal open={isOpen} onClose={onClose}>
<Typography level='title-md' mb={1}>
{label ? 'Edit Label' : 'Add Label'}
</Typography>
<ResponsiveModal
open={isOpen}
onClose={onClose}
size='lg'
fullWidth={true}
title={label ? 'Edit Label' : 'Add Label'}
footer={
<Box display='flex' justifyContent='space-around' mt={1}>
<Button size='lg' onClick={handleSave} fullWidth sx={{ mr: 1 }}>
{label ? 'Save Changes' : 'Add Label'}
</Button>
<Button size='lg' onClick={onClose} variant='outlined'>
Cancel
</Button>
</Box>
}
>
<Box>
<FormControl>
<Typography gutterBottom level='body-sm' alignSelf='start'>
Name
</Typography>
<Input
fullWidth
id='labelName'
value={labelName}
onChange={e => setLabelName(e.target.value)}
/>
</FormControl>
<FormControl>
<Typography gutterBottom level='body-sm' alignSelf='start'>
Name
</Typography>
<Input
fullWidth
id='labelName'
value={labelName}
onChange={e => setLabelName(e.target.value)}
/>
</FormControl>
<FormControl>
<Typography gutterBottom level='body-sm' alignSelf='start'>
Color
</Typography>
<Select
value={color}
onChange={(e, value) => value && setColor(value)}
renderValue={selected => (
<Typography
startDecorator={
<Box
className='size-4'
borderRadius={10}
sx={{ background: selected.value }}
/>
}
>
{selected.label}
</Typography>
)}
>
{LABEL_COLORS.map(val => (
<Option key={val.value} value={val.value}>
<Box className='flex items-center justify-between'>
<Box
width={20}
height={20}
borderRadius={10}
sx={{ background: val.value }}
/>
<Typography sx={{ ml: 1 }} variant='caption'>
{val.name}
</Typography>
</Box>
</Option>
))}
</Select>
</FormControl>
<FormControl>
<Typography gutterBottom level='body-sm' alignSelf='start'>
Color
</Typography>
<Select
value={color}
onChange={(e, value) => value && setColor(value)}
renderValue={selected => (
<Typography
startDecorator={
<Box
className='size-4'
borderRadius={10}
sx={{ background: selected.value }}
/>
}
>
{selected.label}
</Typography>
)}
>
{LABEL_COLORS.map(val => (
<Option key={val.value} value={val.value}>
<Box className='flex items-center justify-between'>
<Box
width={20}
height={20}
borderRadius={10}
sx={{ background: val.value }}
/>
<Typography sx={{ ml: 1 }} variant='caption'>
{val.name}
</Typography>
</Box>
</Option>
))}
</Select>
</FormControl>
{error && (
<Typography color='warning' level='body-sm'>
{error}
</Typography>
)}
<Box display='flex' justifyContent='space-around' mt={1}>
<Button size='lg' onClick={handleSave} fullWidth sx={{ mr: 1 }}>
{label ? 'Save Changes' : 'Add Label'}
</Button>
<Button size='lg' onClick={onClose} variant='outlined'>
Cancel
</Button>
{error && (
<Typography color='warning' level='body-sm'>
{error}
</Typography>
)}
</Box>
</ResponsiveModal>
)

70
src/views/components/NavBar.jsx
View File

@@ -127,6 +127,44 @@ const NavBar = () => {
}
})
}, [])
const getMenuIcon = () => {
const menuRounded = (
<IconButton size='md' variant='plain' onClick={() => setDrawerOpen(true)}>
<MenuRounded />
</IconButton>
)
if (!Capacitor.isNativePlatform()) {
return menuRounded
}
if (
['/chores', '/'].includes(location.pathname) &&
!searchParams.get('filter')
) {
return menuRounded
}
return (
<IconButton
size='md'
variant='plain'
onClick={() => {
if (location.pathname === '/chores') {
// Navigate back to calendar view
navigate('/')
} else {
// Default back navigation
navigate(-1)
}
}}
title={
searchParams.get('from') === 'calendar' ? 'Back to Calendar' : 'Back'
}
>
<ArrowBack />
</IconButton>
)
}
if (
[
'/signup',
@@ -172,37 +210,7 @@ const NavBar = () => {
backgroundColor: 'var(--joy-palette-background-body)',
}}
>
{['/chores', '/'].includes(location.pathname) &&
!searchParams.get('filter') ? (
<IconButton
size='md'
variant='plain'
onClick={() => setDrawerOpen(true)}
>
<MenuRounded />
</IconButton>
) : (
<IconButton
size='md'
variant='plain'
onClick={() => {
if (location.pathname === '/chores') {
// Navigate back to calendar view
navigate('/')
} else {
// Default back navigation
navigate(-1)
}
}}
title={
searchParams.get('from') === 'calendar'
? 'Back to Calendar'
: 'Back'
}
>
<ArrowBack />
</IconButton>
)}
{getMenuIcon()}
<Box className='flex-1' />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<UserProfileAvatar />