robobyte-front-builder 1.0.0

package/src/@core/layouts/components/shared-components/ModeToggler.js

@@ -0,0 +1,32 @@
+import IconButton from '@mui/material/IconButton'
+
+// ** Icons Imports
+import WeatherNight from 'mdi-material-ui/WeatherNight'
+import WeatherSunny from 'mdi-material-ui/WeatherSunny'
+
+const ModeToggler = props => {
+  // ** Props
+  const { settings, saveSettings } = props
+
+  const handleModeChange = mode => {
+    saveSettings({ ...settings, mode })
+  }
+
+  const handleModeToggle = () => {
+    if (settings.mode === 'light') {
+      handleModeChange('dark')
+    } else {
+      handleModeChange('light')
+    }
+  }
+
+  return (
+    // <IconButton color='inherit' aria-haspopup='true' onClick={handleModeToggle}>
+    //   {settings.mode === 'dark' ? <WeatherSunny /> : <WeatherNight />}
+    // </IconButton>
+    <>
+    </>
+  )
+}
+
+export default ModeToggler

package/src/@core/layouts/components/shared-components/NotificationDropdown.js

@@ -0,0 +1,226 @@
+// ** React Imports
+import { useState, Fragment } from 'react'
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import MuiMenu from '@mui/material/Menu'
+import MuiMenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+
+// ** Icons Imports
+import BellOutline from 'mdi-material-ui/BellOutline'
+
+// ** Third Party Components
+import PerfectScrollbarComponent from 'react-perfect-scrollbar'
+
+// ** Custom Components Imports
+import CustomChip from 'src/@core/components/mui/chip'
+import CustomAvatar from 'src/@core/components/mui/avatar'
+
+// ** Styled Menu component
+const Menu = styled(MuiMenu)(({ theme }) => ({
+  '& .MuiMenu-paper': {
+    width: 380,
+    overflow: 'hidden',
+    marginTop: theme.spacing(4),
+    [theme.breakpoints.down('sm')]: {
+      width: '100%'
+    }
+  },
+  '& .MuiMenu-list': {
+    padding: 0
+  }
+}))
+
+// ** Styled MenuItem component
+const MenuItem = styled(MuiMenuItem)(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  paddingBottom: theme.spacing(3),
+  borderBottom: `1px solid ${theme.palette.divider}`
+}))
+
+const styles = {
+  maxHeight: 344,
+  '& .MuiMenuItem-root:last-of-type': {
+    border: 0
+  }
+}
+
+// ** Styled PerfectScrollbar component
+const PerfectScrollbar = styled(PerfectScrollbarComponent)({
+  ...styles
+})
+
+// ** Styled Avatar component
+const Avatar = styled(CustomAvatar)({
+  width: '2.375rem',
+  height: '2.375rem',
+  fontSize: '1.125rem'
+})
+
+// ** Styled component for the title in MenuItems
+const MenuItemTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  flex: '1 1 100%',
+  overflow: 'hidden',
+  fontSize: '0.875rem',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  marginBottom: theme.spacing(0.75)
+}))
+
+// ** Styled component for the subtitle in MenuItems
+const MenuItemSubtitle = styled(Typography)({
+  flex: '1 1 100%',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+})
+
+const NotificationDropdown = props => {
+  // ** Props
+  const { settings } = props
+
+  // ** States
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  // ** Hook
+  const hidden = useMediaQuery(theme => theme.breakpoints.down('lg'))
+
+  // ** Vars
+  const { direction } = settings
+
+  const handleDropdownOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleDropdownClose = () => {
+    setAnchorEl(null)
+  }
+
+  const ScrollWrapper = ({ children }) => {
+    if (hidden) {
+      return <Box sx={{ ...styles, overflowY: 'auto', overflowX: 'hidden' }}>{children}</Box>
+    } else {
+      return (
+        <PerfectScrollbar options={{ wheelPropagation: false, suppressScrollX: true }}>{children}</PerfectScrollbar>
+      )
+    }
+  }
+
+  return (
+    <Fragment>
+      <IconButton color='inherit' aria-haspopup='true' onClick={handleDropdownOpen} aria-controls='customized-menu'>
+        <BellOutline />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleDropdownClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: direction === 'ltr' ? 'right' : 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: direction === 'ltr' ? 'right' : 'left' }}
+      >
+        <MenuItem disableRipple>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+            <Typography sx={{ fontWeight: 600 }}>Notifications</Typography>
+            <CustomChip
+              skin='light'
+              size='small'
+              label='8 New'
+              color='primary'
+              sx={{ height: 20, fontSize: '0.75rem', fontWeight: 500, borderRadius: '10px' }}
+            />
+          </Box>
+        </MenuItem>
+        <ScrollWrapper>
+          <MenuItem onClick={handleDropdownClose}>
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+              <Avatar alt='Flora' src='/images/avatars/4.png' />
+              <Box sx={{ mx: 4, flex: '1 1', display: 'flex', overflow: 'hidden', flexDirection: 'column' }}>
+                <MenuItemTitle>Congratulation Flora! 🎉</MenuItemTitle>
+                <MenuItemSubtitle variant='body2'>Won the monthly best seller badge</MenuItemSubtitle>
+              </Box>
+              <Typography variant='caption' sx={{ color: 'text.disabled' }}>
+                Today
+              </Typography>
+            </Box>
+          </MenuItem>
+          <MenuItem onClick={handleDropdownClose}>
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+              <Avatar skin='light'>VU</Avatar>
+              <Box sx={{ mx: 4, flex: '1 1', display: 'flex', overflow: 'hidden', flexDirection: 'column' }}>
+                <MenuItemTitle>New user registered.</MenuItemTitle>
+                <MenuItemSubtitle variant='body2'>5 hours ago</MenuItemSubtitle>
+              </Box>
+              <Typography variant='caption' sx={{ color: 'text.disabled' }}>
+                Yesterday
+              </Typography>
+            </Box>
+          </MenuItem>
+          <MenuItem onClick={handleDropdownClose}>
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+              <Avatar alt='message' src='/images/avatars/5.png' />
+              <Box sx={{ mx: 4, flex: '1 1', display: 'flex', overflow: 'hidden', flexDirection: 'column' }}>
+                <MenuItemTitle>New message received 👋🏻</MenuItemTitle>
+                <MenuItemSubtitle variant='body2'>You have 10 unread messages</MenuItemSubtitle>
+              </Box>
+              <Typography variant='caption' sx={{ color: 'text.disabled' }}>
+                11 Aug
+              </Typography>
+            </Box>
+          </MenuItem>
+          <MenuItem onClick={handleDropdownClose}>
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+              <img width={38} height={38} alt='paypal' src='/images/misc/paypal.png' />
+              <Box sx={{ mx: 4, flex: '1 1', display: 'flex', overflow: 'hidden', flexDirection: 'column' }}>
+                <MenuItemTitle>Paypal</MenuItemTitle>
+                <MenuItemSubtitle variant='body2'>Received Payment</MenuItemSubtitle>
+              </Box>
+              <Typography variant='caption' sx={{ color: 'text.disabled' }}>
+                25 May
+              </Typography>
+            </Box>
+          </MenuItem>
+          <MenuItem onClick={handleDropdownClose}>
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+              <Avatar alt='order' src='/images/avatars/3.png' />
+              <Box sx={{ mx: 4, flex: '1 1', display: 'flex', overflow: 'hidden', flexDirection: 'column' }}>
+                <MenuItemTitle>Revised Order 📦</MenuItemTitle>
+                <MenuItemSubtitle variant='body2'>New order revised from john</MenuItemSubtitle>
+              </Box>
+              <Typography variant='caption' sx={{ color: 'text.disabled' }}>
+                19 Mar
+              </Typography>
+            </Box>
+          </MenuItem>
+          <MenuItem onClick={handleDropdownClose}>
+            <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+              <img width={38} height={38} alt='chart' src='/images/misc/chart.png' />
+              <Box sx={{ mx: 4, flex: '1 1', display: 'flex', overflow: 'hidden', flexDirection: 'column' }}>
+                <MenuItemTitle>Finance report has been generated</MenuItemTitle>
+                <MenuItemSubtitle variant='body2'>25 hrs ago</MenuItemSubtitle>
+              </Box>
+              <Typography variant='caption' sx={{ color: 'text.disabled' }}>
+                27 Dec
+              </Typography>
+            </Box>
+          </MenuItem>
+        </ScrollWrapper>
+        <MenuItem
+          disableRipple
+          sx={{ py: 3.5, borderBottom: 0, borderTop: theme => `1px solid ${theme.palette.divider}` }}
+        >
+          <Button fullWidth variant='contained' onClick={handleDropdownClose}>
+            Read All Notifications
+          </Button>
+        </MenuItem>
+      </Menu>
+    </Fragment>
+  )
+}
+
+export default NotificationDropdown

package/src/@core/layouts/components/shared-components/UserDropdown.js

@@ -0,0 +1,177 @@
+// ** React Imports
+import { useState, Fragment } from 'react'
+
+// ** Next Import
+import { useRouter } from 'next/router'
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Menu from '@mui/material/Menu'
+import Badge from '@mui/material/Badge'
+import Avatar from '@mui/material/Avatar'
+import Divider from '@mui/material/Divider'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+
+// ** Icons Imports
+import CogOutline from 'mdi-material-ui/CogOutline'
+import CurrencyUsd from 'mdi-material-ui/CurrencyUsd'
+import EmailOutline from 'mdi-material-ui/EmailOutline'
+import LogoutVariant from 'mdi-material-ui/LogoutVariant'
+import AccountOutline from 'mdi-material-ui/AccountOutline'
+import MessageOutline from 'mdi-material-ui/MessageOutline'
+import HelpCircleOutline from 'mdi-material-ui/HelpCircleOutline'
+
+// ** Context
+import { useAuth } from 'src/hooks/useAuth'
+
+// ** Styled Components
+const BadgeContentSpan = styled('span')(({ theme }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: '50%',
+  backgroundColor: theme.palette.success.main,
+  boxShadow: `0 0 0 2px ${theme.palette.background.paper}`
+}))
+
+const UserDropdown = props => {
+  // ** Props
+  const { settings } = props
+
+  // ** States
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  // ** Hooks
+  const router = useRouter()
+  const { logout } = useAuth()
+
+  // ** Vars
+  const { direction } = settings
+
+  const handleDropdownOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleDropdownClose = url => {
+    if (url) {
+      router.push(url)
+    }
+    setAnchorEl(null)
+  }
+
+  const styles = {
+    py: 2,
+    px: 4,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    color: 'text.primary',
+    textDecoration: 'none',
+    '& svg': {
+      fontSize: '1.375rem',
+      color: 'text.secondary'
+    }
+  }
+
+  const handleLogout = () => {
+    logout()
+    handleDropdownClose()
+  }
+
+  return (
+    <Fragment>
+      <Badge
+        overlap='circular'
+        onClick={handleDropdownOpen}
+        sx={{ ml: 2, cursor: 'pointer' }}
+        badgeContent={<BadgeContentSpan />}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+      >
+        <Avatar
+          alt='John Doe'
+          onClick={handleDropdownOpen}
+          sx={{ width: 40, height: 40 }}
+          src='/images/avatars/1.png'
+        />
+      </Badge>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => handleDropdownClose()}
+        sx={{ '& .MuiMenu-paper': { width: 230, mt: 4 } }}
+        anchorOrigin={{ vertical: 'bottom', horizontal: direction === 'ltr' ? 'right' : 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: direction === 'ltr' ? 'right' : 'left' }}
+      >
+        <Box sx={{ pt: 2, pb: 3, px: 4 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Badge
+              overlap='circular'
+              badgeContent={<BadgeContentSpan />}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+              }}
+            >
+              <Avatar alt='John Doe' src='/images/avatars/1.png' sx={{ width: '2.5rem', height: '2.5rem' }} />
+            </Badge>
+            <Box sx={{ display: 'flex', ml: 3, alignItems: 'flex-start', flexDirection: 'column' }}>
+              <Typography sx={{ fontWeight: 600 }}>John Doe</Typography>
+              <Typography variant='body2' sx={{ fontSize: '0.8rem', color: 'text.disabled' }}>
+                Admin
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+        <Divider sx={{ mt: 0, mb: 1 }} />
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose('/apps/user/view/12')}>
+          <Box sx={styles}>
+            <AccountOutline sx={{ mr: 2 }} />
+            Profile
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose('/apps/email')}>
+          <Box sx={styles}>
+            <EmailOutline sx={{ mr: 2 }} />
+            Inbox
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose('/apps/chat')}>
+          <Box sx={styles}>
+            <MessageOutline sx={{ mr: 2 }} />
+            Chat
+          </Box>
+        </MenuItem>
+        <Divider />
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/account-settings')}>
+          <Box sx={styles}>
+            <CogOutline sx={{ mr: 2 }} />
+            Settings
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/pricing')}>
+          <Box sx={styles}>
+            <CurrencyUsd sx={{ mr: 2 }} />
+            Pricing
+          </Box>
+        </MenuItem>
+        <MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/faq')}>
+          <Box sx={styles}>
+            <HelpCircleOutline sx={{ mr: 2 }} />
+            FAQ
+          </Box>
+        </MenuItem>
+        <Divider />
+        <MenuItem sx={{ py: 2 }} onClick={handleLogout}>
+          <LogoutVariant sx={{ mr: 2, fontSize: '1.375rem', color: 'text.secondary' }} />
+          Logout
+        </MenuItem>
+      </Menu>
+    </Fragment>
+  )
+}
+
+export default UserDropdown

package/src/@core/layouts/components/shared-components/footer/FooterContent.js

@@ -0,0 +1,46 @@
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Link from '@mui/material/Link'
+import Typography from '@mui/material/Typography'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+const FooterContent = () => {
+  // ** Var
+  const hidden = useMediaQuery(theme => theme.breakpoints.down('md'))
+
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Typography sx={{ mr: 2 }}>
+        {`© ${new Date().getFullYear()}, Made with `}
+        <Box component='span' sx={{ color: 'error.main' }}>
+          ❤️
+        </Box>
+        {` by `}
+        <Link target='_blank' href='https://pixinvent.com/'>
+          Pixinvent
+        </Link>
+      </Typography>
+      {hidden ? null : (
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', '& :not(:last-child)': { mr: 4 } }}>
+          <Link target='_blank' href='https://themeforest.net/licenses/standard'>
+            License
+          </Link>
+          <Link target='_blank' href='https://1.envato.market/pixinvent_portfolio'>
+            More Themes
+          </Link>
+          <Link
+            target='_blank'
+            href='https://pixinvent.com/demo/materialize-mui-react-nextjs-admin-template/documentation'
+          >
+            Documentation
+          </Link>
+          <Link target='_blank' href='https://pixinvent.ticksy.com/'>
+            Support
+          </Link>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default FooterContent

package/src/@core/layouts/components/shared-components/footer/index.js

@@ -0,0 +1,61 @@
+// ** MUI Imports
+import Box from '@mui/material/Box'
+
+// ** Footer Content Component
+import FooterContent from './FooterContent'
+
+const Footer = props => {
+  // ** Props
+  const { settings, footerContent: userFooterContent } = props
+
+  // ** Vars
+  const { skin, footer, contentWidth } = settings
+  if (footer === 'hidden') {
+    return null
+  }
+
+  return (
+    <Box
+      component='footer'
+      className='layout-footer'
+      sx={{
+        zIndex: 10,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(footer === 'fixed' && { bottom: 0, px: [4, 6], position: 'sticky' })
+      }}
+    >
+      <Box
+        className='footer-content-container'
+        sx={{
+          py: 4,
+          px: [4, 6],
+          width: '100%',
+          borderTopLeftRadius: 14,
+          borderTopRightRadius: 14,
+          ...(contentWidth === 'boxed' && { '@media (min-width:1440px)': { maxWidth: 1440 } }),
+          ...(footer === 'fixed' && {
+            backgroundColor: theme => theme.palette.background.paper,
+            boxShadow: theme => theme.shadows[skin === 'bordered' ? 0 : 4],
+            ...(contentWidth === 'boxed' && {
+              '@media (min-width:1440px)': { maxWidth: theme => `calc(1440px - ${theme.spacing(6)} * 2)` }
+            }),
+            ...(skin === 'bordered'
+              ? { border: theme => `1px solid ${theme.palette.divider}`, borderBottomWidth: 0 }
+              : {
+                  boxShadow: theme =>
+                    `0 -4px 8px -2px rgba(${
+                      theme.palette.mode === 'light' ? theme.palette.customColors.main : '20, 21, 33'
+                    }, ${theme.palette.mode === 'light' ? 0.2 : 0.42})`
+                })
+          })
+        }}
+      >
+        {userFooterContent ? userFooterContent(props) : <FooterContent />}
+      </Box>
+    </Box>
+  )
+}
+
+export default Footer

package/src/@core/layouts/components/vertical/appBar/index.js

@@ -0,0 +1,74 @@
+// ** MUI Imports
+import { styled, useTheme } from '@mui/material/styles'
+import useScrollTrigger from '@mui/material/useScrollTrigger'
+import MuiAppBar from '@mui/material/AppBar'
+import MuiToolbar from '@mui/material/Toolbar'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const AppBar = styled(MuiAppBar)(({ theme }) => ({
+  transition: 'none',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: theme.spacing(0, 6),
+  backgroundColor: 'transparent',
+  color: theme.palette.text.primary,
+  minHeight: theme.mixins.toolbar.minHeight,
+  [theme.breakpoints.down('sm')]: {
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4)
+  }
+}))
+
+const Toolbar = styled(MuiToolbar)(({ theme }) => ({
+  width: '100%',
+  padding: '0 !important',
+  borderBottomLeftRadius: theme.shape.borderRadius,
+  borderBottomRightRadius: theme.shape.borderRadius,
+  minHeight: `${theme.mixins.toolbar.minHeight}px !important`,
+  transition: 'padding .25s ease-in-out, box-shadow .25s ease-in-out, backdrop-filter .25s ease-in-out'
+}))
+
+const LayoutAppBar = props => {
+  // ** Props
+  const { settings, verticalAppBarContent: userVerticalAppBarContent } = props
+
+  // ** Hooks
+  const theme = useTheme()
+  const scrollTrigger = useScrollTrigger({ threshold: 0, disableHysteresis: true })
+
+  // ** Vars
+  const { skin, appBar, appBarBlur, contentWidth } = settings
+
+  const appBarFixedStyles = () => {
+    return {
+      px: `${theme.spacing(6)} !important`,
+      ...(appBarBlur && { backdropFilter: 'blur(8px)' }),
+      boxShadow: theme.shadows[skin === 'bordered' ? 0 : 3],
+      backgroundColor: hexToRGBA(theme.palette.background.paper, appBarBlur ? 0.9 : 1),
+      ...(skin === 'bordered' && { border: `1px solid ${theme.palette.divider}`, borderTopWidth: 0 })
+    }
+  }
+  if (appBar === 'hidden') {
+    return null
+  }
+
+  return (
+    <AppBar elevation={0} color='default' className='layout-navbar' position={appBar === 'fixed' ? 'sticky' : 'static'}>
+      <Toolbar
+        className='navbar-content-container'
+        sx={{
+          ...(appBar === 'fixed' && scrollTrigger && { ...appBarFixedStyles() }),
+          ...(contentWidth === 'boxed' && {
+            '@media (min-width:1440px)': { maxWidth: `calc(1440px - ${theme.spacing(6)} * 2)` }
+          })
+        }}
+      >
+        {(userVerticalAppBarContent && userVerticalAppBarContent(props)) || null}
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default LayoutAppBar