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>
+  )
+}