diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-06-30 18:55:39 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-06-30 18:55:39 -0400 |
commit | 2657469964e24ffbeb905024532120395f6e797c (patch) | |
tree | 2fe9db8a4ecfa92d854ca94f7586d81163c8bd25 /src/views/components/NavBarMobile.jsx | |
download | donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.gz donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.bz2 donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.zip |
move to Donetick Org, First commit frontend
Diffstat (limited to '')
-rw-r--r-- | src/views/components/NavBarMobile.jsx | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/src/views/components/NavBarMobile.jsx b/src/views/components/NavBarMobile.jsx new file mode 100644 index 0000000..5fb1100 --- /dev/null +++ b/src/views/components/NavBarMobile.jsx @@ -0,0 +1,107 @@ +import * as React from 'react' +import Box from '@mui/joy/Box' +import ListItemDecorator from '@mui/joy/ListItemDecorator' +import Tabs from '@mui/joy/Tabs' +import TabList from '@mui/joy/TabList' +import Tab, { tabClasses } from '@mui/joy/Tab' +import HomeRoundedIcon from '@mui/icons-material/HomeRounded' +import FavoriteBorder from '@mui/icons-material/FavoriteBorder' +import Search from '@mui/icons-material/Search' +import Person from '@mui/icons-material/Person' + +export default function NavBarMobile() { + const [index, setIndex] = React.useState(0) + const colors = ['primary', 'danger', 'success', 'warning'] + return ( + <Box + sx={{ + position: 'absolute', + width: '100%', + bottom: 0, + + flexGrow: 1, + + p: 1, + borderTopLeftRadius: '12px', + borderTopRightRadius: '12px', + + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }} + > + <Tabs + size='lg' + aria-label='Bottom Navigation' + value={index} + onChange={(event, value) => setIndex(value)} + sx={theme => ({ + p: 1, + borderRadius: 16, + maxWidth: 500, + // mx: 'auto', + boxShadow: theme.shadow.sm, + '--joy-shadowChannel': theme.vars.palette[colors[index]].darkChannel, + [`& .${tabClasses.root}`]: { + py: 1, + flex: 1, + transition: '0.3s', + fontWeight: 'md', + fontSize: 'md', + [`&:not(.${tabClasses.selected}):not(:hover)`]: { + opacity: 0.7, + }, + }, + })} + > + <TabList + variant='plain' + size='sm' + disableUnderline + sx={{ borderRadius: 'lg', p: 0 }} + > + <Tab + disableIndicator + orientation='vertical' + {...(index === 0 && { color: colors[0] })} + > + <ListItemDecorator> + <HomeRoundedIcon /> + </ListItemDecorator> + Home + </Tab> + <Tab + disableIndicator + orientation='vertical' + {...(index === 1 && { color: colors[1] })} + > + <ListItemDecorator> + <FavoriteBorder /> + </ListItemDecorator> + Likes + </Tab> + <Tab + disableIndicator + orientation='vertical' + {...(index === 2 && { color: colors[2] })} + > + <ListItemDecorator> + <Search /> + </ListItemDecorator> + Search + </Tab> + <Tab + disableIndicator + orientation='vertical' + {...(index === 3 && { color: colors[3] })} + > + <ListItemDecorator> + <Person /> + </ListItemDecorator> + Profile + </Tab> + </TabList> + </Tabs> + </Box> + ) +} |