robobyte-front-builder 1.0.0

package/src/@core/layouts/BlankLayoutWithAppBar.js

@@ -0,0 +1,51 @@
+// ** MUI Imports
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+// ** AppBar Imports
+import AppBar from 'src/@core/layouts/components/blank-layout-with-appBar'
+
+// Styled component for Blank Layout with AppBar component
+const BlankLayoutWithAppBarWrapper = styled(Box)(({ theme }) => ({
+  height: '100vh',
+
+  // For V1 Blank layout pages
+  '& .content-center': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(5),
+    minHeight: `calc(100vh - ${theme.spacing(theme.mixins.toolbar.minHeight / 4)})`
+  },
+
+  // For V2 Blank layout pages
+  '& .content-right': {
+    display: 'flex',
+    overflowX: 'hidden',
+    position: 'relative',
+    minHeight: `calc(100vh - ${theme.spacing(theme.mixins.toolbar.minHeight / 4)})`
+  }
+}))
+
+const BlankLayoutWithAppBar = props => {
+  // ** Props
+  const { children } = props
+
+  return (
+    <BlankLayoutWithAppBarWrapper>
+      <AppBar />
+      <Box
+        className='app-content'
+        sx={{
+          overflowX: 'hidden',
+          position: 'relative',
+          minHeight: theme => `calc(100vh - ${theme.spacing(theme.mixins.toolbar.minHeight / 4)})`
+        }}
+      >
+        {children}
+      </Box>
+    </BlankLayoutWithAppBarWrapper>
+  )
+}
+
+export default BlankLayoutWithAppBar

package/src/@core/layouts/HorizontalLayout.jsx

@@ -0,0 +1,151 @@
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Fab from '@mui/material/Fab'
+import AppBar from '@mui/material/AppBar'
+import { styled } from '@mui/material/styles'
+import MuiToolbar from '@mui/material/Toolbar'
+
+// ** Icons Imports
+import ArrowUp from 'mdi-material-ui/ArrowUp'
+
+// ** Theme Config Import
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Components
+import Customizer from 'src/@core/components/customizer'
+import Footer from './components/shared-components/footer'
+import Navigation from './components/horizontal/navigation'
+import ScrollToTop from 'src/@core/components/scroll-to-top'
+import AppBarContent from './components/horizontal/app-bar-content'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+// ** Styled Component
+import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'
+
+const HorizontalLayoutWrapper = styled('div')({
+  display: 'flex',
+  minHeight: '100vh',
+  flexDirection: 'column',
+  ...(themeConfig.horizontalMenuAnimation && { overflow: 'clip' })
+})
+
+const Toolbar = styled(MuiToolbar)(({ theme }) => ({
+  width: '100%',
+  padding: `${theme.spacing(0, 6)} !important`,
+  [theme.breakpoints.down('sm')]: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(4)
+  },
+  [theme.breakpoints.down('xs')]: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2)
+  }
+}))
+
+const ContentWrapper = styled('main')(({ theme }) => ({
+  flexGrow: 1,
+  width: '100%',
+  padding: theme.spacing(6),
+  transition: 'padding .25s ease-in-out',
+  [theme.breakpoints.down('sm')]: {
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4)
+  }
+}))
+
+const HorizontalLayout = props => {
+  // ** Props
+  const {
+    hidden,
+    children,
+    settings,
+    scrollToTop,
+    saveSettings,
+    horizontalNavMenuContent: userHorizontalNavMenuContent
+  } = props
+
+  // ** Vars
+    const { skin, appBar, navHidden, appBarBlur, contentWidth } = settings
+
+  return (
+    <HorizontalLayoutWrapper className='layout-wrapper'>
+      <AppBar
+        color='default'
+        elevation={skin === 'bordered' ? 0 : 3}
+        className='layout-navbar-and-nav-container'
+        position={appBar === 'fixed' ? 'sticky' : 'static'}
+        sx={{
+          boxShadow: 0,
+          alignItems: 'center',
+          color: 'text.primary',
+          justifyContent: 'space-between',
+          ...(appBar === 'static' && { zIndex: 13 }),
+          backgroundColor: theme => theme.palette.background.paper,
+          ...(skin === 'bordered' && { borderBottom: theme => `1px solid ${theme.palette.divider}` }),
+          transition: 'border-bottom 0.2s ease-in-out, backdrop-filter .25s ease-in-out, box-shadow .25s ease-in-out',
+          ...(appBar === 'fixed'
+            ? appBarBlur && {
+                backdropFilter: 'blur(8px)',
+                backgroundColor: theme => hexToRGBA(theme.palette.background.paper, 0.9)
+              }
+            : {})
+        }}
+        {...props}
+      >
+        <Box
+          className='layout-navbar'
+          sx={{
+            width: '100%',
+            ...(navHidden ? {} : { borderBottom: theme => `1px solid ${theme.palette.divider}` })
+          }}
+        >
+          <Toolbar
+            sx={{
+              mx: 'auto',
+              ...(contentWidth === 'boxed' && { '@media (min-width:1440px)': { maxWidth: 1440 } }),
+              minHeight: theme => `${theme.mixins.toolbar.minHeight - 1}px !important`
+            }}
+          >
+            <AppBarContent {...props} hidden={hidden} settings={settings} saveSettings={saveSettings} />
+          </Toolbar>
+        </Box>
+
+      </AppBar>
+
+      <ContentWrapper
+        className='layout-page-content'
+        sx={{
+          ...(contentWidth === 'boxed' && {
+            mx: 'auto',
+            '@media (min-width:1440px)': { maxWidth: 1440 },
+            '@media (min-width:1200px)': { maxWidth: '100%'}
+          })
+        }}
+      >
+        {children}
+      </ContentWrapper>
+
+      <Footer {...props} />
+
+      <DatePickerWrapper sx={{ zIndex: 11 }}>
+        <Box id='react-datepicker-portal'></Box>
+      </DatePickerWrapper>
+
+      {themeConfig.disableCustomizer || hidden ? null : <Customizer />}
+
+      {scrollToTop ? (
+        scrollToTop(props)
+      ) : (
+        <ScrollToTop className='mui-fixed'>
+          <Fab color='primary' size='small' aria-label='scroll back to top'>
+            <ArrowUp />
+          </Fab>
+        </ScrollToTop>
+      )}
+    </HorizontalLayoutWrapper>
+  )
+}
+
+export default HorizontalLayout

package/src/@core/layouts/Layout.js

@@ -0,0 +1,39 @@
+// ** React Import
+import { useEffect, useRef } from 'react'
+
+// ** Layout Components
+import VerticalLayout from './VerticalLayout'
+import HorizontalLayout from './HorizontalLayout'
+
+const Layout = props => {
+  // ** Props
+  const { hidden, children, settings, saveSettings } = props
+
+  // ** Ref
+  const isCollapsed = useRef(settings.navCollapsed)
+  useEffect(() => {
+    if (hidden) {
+      if (settings.navCollapsed) {
+        saveSettings({ ...settings, navCollapsed: false, layout: 'vertical' })
+        isCollapsed.current = true
+      } else {
+        saveSettings({ ...settings, layout: 'vertical' })
+      }
+    } else {
+      if (isCollapsed.current) {
+        saveSettings({ ...settings, navCollapsed: true, layout: settings.lastLayout })
+        isCollapsed.current = false
+      } else {
+        saveSettings({ ...settings, layout: settings.lastLayout })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hidden])
+  if (settings.layout === 'horizontal') {
+    return <HorizontalLayout {...props}>{children}</HorizontalLayout>
+  }
+
+  return <VerticalLayout {...props}>{children}</VerticalLayout>
+}
+
+export default Layout

package/src/@core/layouts/VerticalLayout.jsx

@@ -0,0 +1,124 @@
+// ** React Imports
+import { useState } from 'react'
+
+// ** MUI Imports
+import Fab from '@mui/material/Fab'
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+// ** Icons Imports
+import ArrowUp from 'mdi-material-ui/ArrowUp'
+
+// ** Theme Config Import
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Components
+import AppBar from './components/vertical/appBar'
+import Customizer from 'src/@core/components/customizer'
+import Navigation from './components/vertical/navigation'
+import Footer from './components/shared-components/footer'
+import ScrollToTop from 'src/@core/components/scroll-to-top'
+
+// ** Styled Component
+import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'
+
+const VerticalLayoutWrapper = styled('div')({
+  height: '100%',
+  display: 'flex'
+})
+
+const MainContentWrapper = styled(Box)({
+  flexGrow: 1,
+  minWidth: 0,
+  display: 'flex',
+  minHeight: '100vh',
+  flexDirection: 'column'
+})
+
+const ContentWrapper = styled('main')(({ theme }) => ({
+  flexGrow: 1,
+  width: '100%',
+  padding: theme.spacing(6),
+  transition: 'padding .25s ease-in-out',
+  [theme.breakpoints.down('sm')]: {
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4)
+  }
+}))
+
+const VerticalLayout = props => {
+  // ** Props
+  const { hidden, settings, children, scrollToTop } = props
+
+  // ** Vars
+  const { skin, navHidden, contentWidth } = settings
+  const { navigationSize, disableCustomizer, collapsedNavigationSize } = themeConfig
+  const navWidth = navigationSize
+  const navigationBorderWidth = skin === 'bordered' ? 1 : 0
+  const collapsedNavWidth = collapsedNavigationSize
+
+  // ** States
+  const [navHover, setNavHover] = useState(false)
+  const [navVisible, setNavVisible] = useState(false)
+
+  // ** Toggle Functions
+  const toggleNavVisibility = () => setNavVisible(!navVisible)
+
+  return (
+    <>
+      <VerticalLayoutWrapper className='layout-wrapper'>
+        {navHidden &&
+        themeConfig.layout === 'vertical' &&
+        !(navHidden && settings.lastLayout === 'horizontal') ? null : (
+          <Navigation
+            navWidth={navWidth}
+            navHover={navHover}
+            navVisible={navVisible}
+            setNavHover={setNavHover}
+            setNavVisible={setNavVisible}
+            collapsedNavWidth={collapsedNavWidth}
+            toggleNavVisibility={toggleNavVisibility}
+            navigationBorderWidth={navigationBorderWidth}
+            {...props}
+          />
+        )}
+        <MainContentWrapper className='layout-content-wrapper'>
+          <AppBar toggleNavVisibility={toggleNavVisibility} {...props} />
+
+          <ContentWrapper
+            className='layout-page-content'
+            sx={{
+              ...(contentWidth === 'boxed' && {
+                mx: 'auto',
+                '@media (min-width:1440px)': { maxWidth: 1440 },
+                '@media (min-width:1200px)': { maxWidth: '100%' }
+              })
+            }}
+          >
+            {children}
+          </ContentWrapper>
+
+          <Footer {...props} />
+
+          <DatePickerWrapper sx={{ zIndex: 11 }}>
+            <Box id='react-datepicker-portal'></Box>
+          </DatePickerWrapper>
+        </MainContentWrapper>
+      </VerticalLayoutWrapper>
+
+      {disableCustomizer || hidden ? null : <Customizer />}
+
+      {scrollToTop ? (
+        scrollToTop(props)
+      ) : (
+        <ScrollToTop className='mui-fixed'>
+          <Fab color='primary' size='small' aria-label='scroll back to top'>
+            <ArrowUp />
+          </Fab>
+        </ScrollToTop>
+      )}
+    </>
+  )
+}
+
+export default VerticalLayout

package/src/@core/layouts/components/blank-layout-with-appBar/index.js

@@ -0,0 +1,115 @@
+// ** Next Import
+import Link from 'next/link'
+
+// ** MUI Imports
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { styled, useTheme } from '@mui/material/styles'
+
+// ** Configs
+import themeConfig from 'src/configs/themeConfig'
+
+const StyledLink = styled('a')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none',
+  marginRight: theme.spacing(8)
+}))
+
+const BlankLayoutAppBar = () => {
+  // ** Hooks
+  const theme = useTheme()
+
+  return (
+    <AppBar elevation={3} color='default' position='sticky'>
+      <Toolbar
+        sx={{
+          justifyContent: 'space-between',
+          p: theme => `${theme.spacing(0, 6)} !important`,
+          minHeight: `${theme.mixins.toolbar.minHeight}px !important`
+        }}
+      >
+        <Link href='/' passHref>
+          <StyledLink>
+            <svg width={40} fill='none' height={22} viewBox='0 0 268 150' xmlns='http://www.w3.org/2000/svg'>
+              <rect
+                rx='25.1443'
+                width='50.2886'
+                height='143.953'
+                fill={theme.palette.primary.main}
+                transform='matrix(-0.865206 0.501417 0.498585 0.866841 195.571 0)'
+              />
+              <rect
+                rx='25.1443'
+                width='50.2886'
+                height='143.953'
+                fillOpacity='0.4'
+                fill='url(#paint0_linear_7821_79167)'
+                transform='matrix(-0.865206 0.501417 0.498585 0.866841 196.084 0)'
+              />
+              <rect
+                rx='25.1443'
+                width='50.2886'
+                height='143.953'
+                fill={theme.palette.primary.main}
+                transform='matrix(0.865206 0.501417 -0.498585 0.866841 173.147 0)'
+              />
+              <rect
+                rx='25.1443'
+                width='50.2886'
+                height='143.953'
+                fill={theme.palette.primary.main}
+                transform='matrix(-0.865206 0.501417 0.498585 0.866841 94.1973 0)'
+              />
+              <rect
+                rx='25.1443'
+                width='50.2886'
+                height='143.953'
+                fillOpacity='0.4'
+                fill='url(#paint1_linear_7821_79167)'
+                transform='matrix(-0.865206 0.501417 0.498585 0.866841 94.1973 0)'
+              />
+              <rect
+                rx='25.1443'
+                width='50.2886'
+                height='143.953'
+                fill={theme.palette.primary.main}
+                transform='matrix(0.865206 0.501417 -0.498585 0.866841 71.7728 0)'
+              />
+              <defs>
+                <linearGradient
+                  y1='0'
+                  x1='25.1443'
+                  x2='25.1443'
+                  y2='143.953'
+                  id='paint0_linear_7821_79167'
+                  gradientUnits='userSpaceOnUse'
+                >
+                  <stop />
+                  <stop offset='1' stopOpacity='0' />
+                </linearGradient>
+                <linearGradient
+                  y1='0'
+                  x1='25.1443'
+                  x2='25.1443'
+                  y2='143.953'
+                  id='paint1_linear_7821_79167'
+                  gradientUnits='userSpaceOnUse'
+                >
+                  <stop />
+                  <stop offset='1' stopOpacity='0' />
+                </linearGradient>
+              </defs>
+            </svg>
+            <Typography variant='h6' sx={{ ml: 2, fontWeight: 700, lineHeight: 1.2 }}>
+              {themeConfig.templateName}
+            </Typography>
+          </StyledLink>
+        </Link>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default BlankLayoutAppBar

package/src/@core/layouts/components/horizontal/app-bar-content/index.js

@@ -0,0 +1,67 @@
+// ** Next Import
+import Link from 'next/link'
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { styled, useTheme } from '@mui/material/styles'
+
+// ** Theme Config Import
+import themeConfig from 'src/configs/themeConfig'
+import Navigation from "src/@core/layouts/components/horizontal/navigation";
+import Toolbar from "@mui/material/Toolbar";
+
+const StyledLink = styled('a')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none',
+  marginRight: theme.spacing(8)
+}))
+
+const AppBarContent = props => {
+  // ** Props
+  const {
+    horizontalAppBarContent: userHorizontalAppBarContent,
+    horizontalAppBarBranding: userHorizontalAppBarBranding,
+    settings,
+    horizontalNavMenuContent: userHorizontalNavMenuContent
+  } = props
+  const { skin, appBar, navHidden, appBarBlur, contentWidth } = settings
+
+  // ** Hooks
+  const theme = useTheme()
+
+  return (
+    <Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      {userHorizontalAppBarBranding ? (
+        userHorizontalAppBarBranding(props)
+      ) : (
+        <Link href='/' passHref>
+          <StyledLink>
+            <img src={'/images/appicon.png'} width={50} alt={'logo'}/>
+            {/*<Typography variant='h6' sx={{ml: 2, fontWeight: 700, lineHeight: 1.2}}>*/}
+            {/*  {themeConfig.templateName}*/}
+            {/*</Typography>*/}
+          </StyledLink>
+        </Link>
+      )}
+      {navHidden ? null : (
+        <Box className='layout-horizontal-nav'>
+          <Toolbar
+            className='horizontal-nav-content-container'
+            sx={{
+              mx: 'auto',
+              ...(contentWidth === 'boxed' && { '@media (min-width:1440px)': { maxWidth: 1440 } }),
+              minHeight: theme => `${theme.mixins.toolbar.minHeight - (skin === 'bordered' ? 1 : 0)}px !important`
+            }}
+          >
+            {(userHorizontalNavMenuContent && userHorizontalNavMenuContent(props)) || <Navigation {...props} />}
+          </Toolbar>
+        </Box>
+      )}
+      {userHorizontalAppBarContent ? userHorizontalAppBarContent(props) : null}
+    </Box>
+  )
+}
+
+export default AppBarContent