fix: clean folder
This commit is contained in:
ferdiansyah783
@@ -1,378 +0,0 @@
|
||||
// React Imports
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import type { CSSProperties, MouseEvent, ReactNode } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import { usePathname } from 'next/navigation'
|
||||
|
||||
// MUI Imports
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Collapse from '@mui/material/Collapse'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
import {
|
||||
useFloating,
|
||||
useDismiss,
|
||||
useRole,
|
||||
useInteractions,
|
||||
useHover,
|
||||
offset,
|
||||
flip,
|
||||
size,
|
||||
autoUpdate,
|
||||
FloatingPortal,
|
||||
safePolygon,
|
||||
useTransitionStyles
|
||||
} from '@floating-ui/react'
|
||||
|
||||
// Type Imports
|
||||
import type { Mode } from '@core/types'
|
||||
|
||||
// Component Imports
|
||||
import Link from '@components/Link'
|
||||
import CustomAvatar from '@core/components/mui/Avatar'
|
||||
|
||||
type Props = {
|
||||
mode: Mode
|
||||
isBelowLgScreen: boolean
|
||||
isDrawerOpen: boolean
|
||||
setIsDrawerOpen: (open: boolean) => void
|
||||
}
|
||||
|
||||
type MenuWrapperProps = {
|
||||
children: ReactNode
|
||||
refs: any
|
||||
isBelowLgScreen: boolean
|
||||
isOpen: boolean
|
||||
getFloatingProps: any
|
||||
top: number
|
||||
floatingStyles: CSSProperties
|
||||
isMounted: boolean
|
||||
styles: CSSProperties
|
||||
}
|
||||
|
||||
// Constants
|
||||
const pageData = [
|
||||
{
|
||||
title: 'Pricing',
|
||||
href: '/pricing'
|
||||
},
|
||||
{
|
||||
title: 'Payment',
|
||||
href: '/payment'
|
||||
},
|
||||
{
|
||||
title: 'Checkout',
|
||||
href: '/checkout'
|
||||
},
|
||||
{
|
||||
title: 'Help Center',
|
||||
href: '/help-center'
|
||||
}
|
||||
]
|
||||
|
||||
const authData = [
|
||||
{
|
||||
title: 'Login (Basic)',
|
||||
href: '/login-v1'
|
||||
},
|
||||
{
|
||||
title: 'Login (Cover)',
|
||||
href: '/login-v2'
|
||||
},
|
||||
{
|
||||
title: 'Register (Basic)',
|
||||
href: '/register-v1'
|
||||
},
|
||||
{
|
||||
title: 'Register (Cover)',
|
||||
href: '/register-v2'
|
||||
},
|
||||
{
|
||||
title: 'Register (Multi-steps)',
|
||||
href: '/register-multi-steps'
|
||||
},
|
||||
{
|
||||
title: 'Forgot Password (Basic)',
|
||||
href: '/forgot-password-v1'
|
||||
},
|
||||
{
|
||||
title: 'Forgot Password (Cover)',
|
||||
href: '/forgot-password-v2'
|
||||
},
|
||||
{
|
||||
title: 'Reset Password (Basic)',
|
||||
href: '/reset-password-v1'
|
||||
},
|
||||
{
|
||||
title: 'Reset Password (Cover)',
|
||||
href: '/reset-password-v2'
|
||||
}
|
||||
]
|
||||
|
||||
const othersData = [
|
||||
{
|
||||
title: 'Under Maintenance',
|
||||
href: '/misc/under-maintenance'
|
||||
},
|
||||
{
|
||||
title: 'Coming Soon',
|
||||
href: '/misc/coming-soon'
|
||||
},
|
||||
{
|
||||
title: 'Not Authorized',
|
||||
href: '/misc/401-not-authorized'
|
||||
},
|
||||
{
|
||||
title: 'Verify Email (Basic)',
|
||||
href: '/auth/verify-email-v1'
|
||||
},
|
||||
{
|
||||
title: 'Verify Email (Cover)',
|
||||
href: '/auth/verify-email-v2'
|
||||
},
|
||||
{
|
||||
title: 'Two Steps (Basic)',
|
||||
href: '/auth/two-steps-v1'
|
||||
},
|
||||
{
|
||||
title: 'Two Steps (Cover)',
|
||||
href: '/auth/two-steps-v2'
|
||||
}
|
||||
]
|
||||
|
||||
const MenuWrapper = (props: MenuWrapperProps) => {
|
||||
// Props
|
||||
const { children, refs, isBelowLgScreen, isOpen, getFloatingProps, top, floatingStyles, isMounted, styles } = props
|
||||
|
||||
if (!isBelowLgScreen) {
|
||||
return (
|
||||
<FloatingPortal>
|
||||
{isMounted && (
|
||||
<div ref={refs.setFloating} className='z-[1201] lg:z-[11]' {...getFloatingProps()} style={floatingStyles}>
|
||||
<div
|
||||
className='flex gap-8 p-8'
|
||||
style={{
|
||||
...styles,
|
||||
overflowY: 'auto',
|
||||
background: 'var(--mui-palette-background-paper)',
|
||||
minWidth: 100,
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
outline: 0,
|
||||
boxShadow: 'var(--mui-shadows-3)',
|
||||
maxBlockSize: `calc((var(--vh, 1vh) * 100) - ${top}px)`
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</FloatingPortal>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Collapse in={isOpen}>
|
||||
<div className='flex flex-col gap-6 mbs-3'>{children}</div>
|
||||
</Collapse>
|
||||
)
|
||||
}
|
||||
|
||||
const DropdownMenu = (props: Props) => {
|
||||
// Props
|
||||
const { isBelowLgScreen, isDrawerOpen, setIsDrawerOpen } = props
|
||||
|
||||
// states
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
// hooks
|
||||
const pathname = usePathname()
|
||||
|
||||
const { y, refs, floatingStyles, context } = useFloating<HTMLElement>({
|
||||
placement: 'bottom',
|
||||
open: isOpen,
|
||||
...(!isBelowLgScreen && { onOpenChange: setIsOpen }),
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [
|
||||
offset(14),
|
||||
flip({ padding: 10 }),
|
||||
size({
|
||||
apply({ rects, elements, availableHeight }) {
|
||||
Object.assign(elements.floating.style, {
|
||||
maxHeight: `${availableHeight}px`,
|
||||
minWidth: `${rects.reference.width}px`
|
||||
})
|
||||
},
|
||||
padding: 10
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
// Floating UI Transition Styles
|
||||
const { isMounted, styles } = useTransitionStyles(context, {
|
||||
// Configure both open and close durations:
|
||||
duration: 300,
|
||||
|
||||
initial: {
|
||||
opacity: 0,
|
||||
transform: 'translateY(10px)'
|
||||
},
|
||||
open: {
|
||||
opacity: 1,
|
||||
transform: 'translateY(0px)'
|
||||
},
|
||||
close: {
|
||||
opacity: 0,
|
||||
transform: 'translateY(10px)'
|
||||
}
|
||||
})
|
||||
|
||||
const hover = useHover(context, {
|
||||
handleClose: safePolygon({
|
||||
blockPointerEvents: true
|
||||
}),
|
||||
restMs: 25,
|
||||
delay: { open: 75 }
|
||||
})
|
||||
|
||||
const dismiss = useDismiss(context)
|
||||
const role = useRole(context, { role: 'menu' })
|
||||
|
||||
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role, hover])
|
||||
|
||||
const Tag = isBelowLgScreen ? 'div' : Fragment
|
||||
|
||||
const handleLinkClick = () => {
|
||||
if (isBelowLgScreen) {
|
||||
isDrawerOpen && setIsDrawerOpen(false)
|
||||
} else {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDrawerOpen && isOpen) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isDrawerOpen])
|
||||
|
||||
return (
|
||||
<Tag {...(isBelowLgScreen && { className: 'flex flex-col' })}>
|
||||
<Typography
|
||||
component={Link}
|
||||
color='text.primary'
|
||||
className={classnames('flex items-center gap-2 font-medium plb-3 pli-1.5 hover:text-primary', {
|
||||
'text-primary':
|
||||
pathname === '/front-pages/payment' ||
|
||||
pathname === '/front-pages/pricing' ||
|
||||
pathname === '/front-pages/checkout' ||
|
||||
pathname === '/front-pages/help-center' ||
|
||||
pathname === '/front-pages/help-center/article/how-to-add-product-in-cart'
|
||||
})}
|
||||
{...(isBelowLgScreen
|
||||
? {
|
||||
onClick: (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
setIsOpen(!isOpen)
|
||||
}
|
||||
}
|
||||
: {
|
||||
ref: refs.setReference,
|
||||
...getReferenceProps()
|
||||
})}
|
||||
>
|
||||
<span>Pages</span>
|
||||
<i
|
||||
className={classnames(
|
||||
{
|
||||
'tabler-chevron-down': !isBelowLgScreen || (isBelowLgScreen && !isOpen),
|
||||
'tabler-chevron-up': isBelowLgScreen && isOpen
|
||||
},
|
||||
'text-xl'
|
||||
)}
|
||||
/>
|
||||
</Typography>
|
||||
<MenuWrapper
|
||||
refs={refs}
|
||||
isBelowLgScreen={isBelowLgScreen}
|
||||
isOpen={isOpen}
|
||||
getFloatingProps={getFloatingProps}
|
||||
top={y ? y - window.scrollY : 0}
|
||||
floatingStyles={floatingStyles}
|
||||
isMounted={isMounted}
|
||||
styles={styles}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<CustomAvatar variant='rounded' color='primary' skin='light'>
|
||||
<i className='tabler-layout-grid' />
|
||||
</CustomAvatar>
|
||||
<Typography variant='h6'>Page</Typography>
|
||||
</div>
|
||||
{pageData.map((page, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={'/front-pages' + page.href}
|
||||
className={classnames('flex items-center gap-3 focus:outline-none hover:text-primary', {
|
||||
'text-primary': pathname.includes('/front-pages' + page.href)
|
||||
})}
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
<i className='tabler-circle text-[10px]' />
|
||||
<span>{page.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<CustomAvatar variant='rounded' color='primary' skin='light'>
|
||||
<i className='tabler-lock' />
|
||||
</CustomAvatar>
|
||||
<Typography variant='h6'>Auth Demo</Typography>
|
||||
</div>
|
||||
{authData.map((page, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={'/pages/auth' + page.href}
|
||||
target='_blank'
|
||||
className='flex items-center gap-3 focus:outline-none hover:text-primary'
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
<i className='tabler-circle text-[10px]' />
|
||||
<span>{page.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<CustomAvatar variant='rounded' color='primary' skin='light'>
|
||||
<i className='tabler-photo' />
|
||||
</CustomAvatar>
|
||||
<Typography variant='h6'>Auth Demo</Typography>
|
||||
</div>
|
||||
{othersData.map((page, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={'/pages' + page.href}
|
||||
target='_blank'
|
||||
className='flex items-center gap-3 focus:outline-none hover:text-primary'
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
<i className='tabler-circle text-[10px]' />
|
||||
<span>{page.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
{!isBelowLgScreen && (
|
||||
<div className='flex bg-backgroundDefault p-2 rounded'>
|
||||
<img src='/images/front-pages/dropdown-image.png' width='385' alt='dropdown image' className='rounded' />
|
||||
</div>
|
||||
)}
|
||||
</MenuWrapper>
|
||||
</Tag>
|
||||
)
|
||||
}
|
||||
|
||||
export default DropdownMenu
|
||||
@@ -1,208 +0,0 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Grid from '@mui/material/Grid2'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Button from '@mui/material/Button'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { Mode } from '@core/types'
|
||||
|
||||
// Component Imports
|
||||
import Link from '@components/Link'
|
||||
import Logo from '@components/layout/shared/Logo'
|
||||
import CustomTextField from '@core/components/mui/TextField'
|
||||
|
||||
// Hooks Imports
|
||||
import { useImageVariant } from '@core/hooks/useImageVariant'
|
||||
|
||||
// Util Imports
|
||||
import { frontLayoutClasses } from '@layouts/utils/layoutClasses'
|
||||
|
||||
// Styles Imports
|
||||
import styles from './styles.module.css'
|
||||
import frontCommonStyles from '@views/front-pages/styles.module.css'
|
||||
|
||||
const Footer = ({ mode }: { mode: Mode }) => {
|
||||
// Vars
|
||||
const footerImageLight = '/images/front-pages/footer-bg-light.png'
|
||||
const footerImageDark = '/images/front-pages/footer-bg-dark.png'
|
||||
|
||||
// Hooks
|
||||
const dashboardImage = useImageVariant(mode, footerImageLight, footerImageDark)
|
||||
|
||||
return (
|
||||
<footer className={frontLayoutClasses.footer}>
|
||||
<div className='relative'>
|
||||
<img src={dashboardImage} alt='footer bg' className='absolute inset-0 is-full bs-full object-cover -z-[1]' />
|
||||
<div className={classnames('plb-12 text-white', frontCommonStyles.layoutSpacing)}>
|
||||
<Grid container rowSpacing={10} columnSpacing={12}>
|
||||
<Grid size={{ xs: 12, lg: 5 }}>
|
||||
<div className='flex flex-col items-start gap-6'>
|
||||
<Link href='/front-pages/landing-page'>
|
||||
<Logo color='var(--mui-palette-common-white)' />
|
||||
</Link>
|
||||
<Typography color='white' className='md:max-is-[390px] opacity-[0.78]'>
|
||||
Most Powerful & Comprehensive 🤩 React NextJS Admin Template with Elegant Material Design & Unique
|
||||
Layouts.
|
||||
</Typography>
|
||||
<div className='flex items-end'>
|
||||
<CustomTextField
|
||||
size='small'
|
||||
className={styles.inputBorder}
|
||||
label='Subscribe to newsletter'
|
||||
placeholder='Your email'
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
borderStartEndRadius: '0 !important',
|
||||
borderEndEndRadius: '0 !important',
|
||||
'&:not(.Mui-focused)': {
|
||||
borderColor: 'rgb(var(--mui-mainColorChannels-dark) / 0.22)'
|
||||
},
|
||||
'&.MuiFilledInput-root:not(.Mui-focused):not(.Mui-disabled):hover': {
|
||||
borderColor: 'rgba(255 255 255 / 0.6) !important'
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{
|
||||
borderStartStartRadius: 0,
|
||||
borderEndStartRadius: 0
|
||||
}}
|
||||
>
|
||||
Subscribe
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 3, lg: 2 }}>
|
||||
<Typography color='white' className='font-medium mbe-6 opacity-[0.92]'>
|
||||
Pages
|
||||
</Typography>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<Typography component={Link} href='/front-pages/pricing' color='white' className='opacity-[0.78]'>
|
||||
Pricing
|
||||
</Typography>
|
||||
<Link href='/front-pages/payment' className='flex items-center gap-[10px]'>
|
||||
<Typography color='white' className='opacity-[0.78]'>
|
||||
Payment
|
||||
</Typography>
|
||||
<Chip label='New' color='primary' size='small' />
|
||||
</Link>
|
||||
<Typography
|
||||
component={Link}
|
||||
href='/pages/misc/under-maintenance'
|
||||
color='white'
|
||||
className='opacity-[0.78]'
|
||||
>
|
||||
Maintenance
|
||||
</Typography>
|
||||
<Typography component={Link} href='/pages/misc/coming-soon' color='white' className='opacity-[0.78]'>
|
||||
Coming Soon
|
||||
</Typography>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 3, lg: 2 }}>
|
||||
<Typography color='white' className='font-medium mbe-6 opacity-[0.92]'>
|
||||
Products
|
||||
</Typography>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<Typography component={Link} href='/front-pages/landing-page' color='white' className='opacity-[0.78]'>
|
||||
Page builder
|
||||
</Typography>
|
||||
<Typography component={Link} href='/front-pages/landing-page' color='white' className='opacity-[0.78]'>
|
||||
Admin Dashboards
|
||||
</Typography>
|
||||
<Typography component={Link} href='/front-pages/landing-page' color='white' className='opacity-[0.78]'>
|
||||
UI Kits
|
||||
</Typography>
|
||||
<Typography component={Link} href='/front-pages/landing-page' color='white' className='opacity-[0.78]'>
|
||||
Illustrations
|
||||
</Typography>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
<Typography color='white' className='font-medium mbe-6 opacity-[0.92]'>
|
||||
Download our App
|
||||
</Typography>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<Link className='bg-[#282C3E] bs-[56px] is-[211px] rounded'>
|
||||
<div className='flex items-center pli-5 plb-[7px] gap-6'>
|
||||
<img src='/images/front-pages/apple-icon.png' alt='apple store' className='bs-[34px]' />
|
||||
<div className='flex flex-col items-start'>
|
||||
<Typography variant='body2' color='white' className='opacity-75'>
|
||||
Download on the
|
||||
</Typography>
|
||||
<Typography color='white' className='font-medium opacity-[0.92]'>
|
||||
App Store
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link className='bg-[#282C3E] bs-[56px] is-[211px] rounded'>
|
||||
<div className='flex items-center pli-5 plb-[7px] gap-6'>
|
||||
<img src='/images/front-pages/google-play-icon.png' alt='Google play' className='bs-[34px]' />
|
||||
<div className='flex flex-col items-start'>
|
||||
<Typography variant='body2' color='white' className='opacity-75'>
|
||||
Download on the
|
||||
</Typography>
|
||||
<Typography color='white' className='font-medium opacity-[0.92]'>
|
||||
Google Play
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-[#211B2C]'>
|
||||
<div
|
||||
className={classnames(
|
||||
'flex flex-wrap items-center justify-center sm:justify-between gap-4 plb-[15px]',
|
||||
frontCommonStyles.layoutSpacing
|
||||
)}
|
||||
>
|
||||
<Typography className='text-white' variant='body2'>
|
||||
<span>{`© ${new Date().getFullYear()}, Made with `}</span>
|
||||
<span>{`❤️`}</span>
|
||||
<span>{` by `}</span>
|
||||
<Link href='https://pixinvent.com/' target='_blank' className='font-medium text-white'>
|
||||
Pixinvent
|
||||
</Link>
|
||||
</Typography>
|
||||
<div className='flex gap-1.5 items-center'>
|
||||
<IconButton component={Link} size='small' href='https://github.com/pixinvent' target='_blank'>
|
||||
<i className='tabler-brand-github-filled text-white text-lg' />
|
||||
</IconButton>
|
||||
<IconButton component={Link} size='small' href='https://www.facebook.com/pixinvents/' target='_blank'>
|
||||
<i className='tabler-brand-facebook-filled text-white text-lg' />
|
||||
</IconButton>
|
||||
<IconButton component={Link} size='small' href='https://x.com/pixinvents' target='_blank'>
|
||||
<i className='tabler-brand-twitter-filled text-white text-lg' />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
component={Link}
|
||||
size='small'
|
||||
href='https://www.youtube.com/channel/UClOcB3o1goJ293ri_Hxpklg'
|
||||
target='_blank'
|
||||
>
|
||||
<i className='tabler-brand-youtube-filled text-white text-lg' />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -1,165 +0,0 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useEffect } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import { usePathname } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
|
||||
// MUI Imports
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Drawer from '@mui/material/Drawer'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { Mode } from '@core/types'
|
||||
|
||||
// Hook Imports
|
||||
import { useIntersection } from '@/hooks/useIntersection'
|
||||
|
||||
// Component Imports
|
||||
import DropdownMenu from './DropdownMenu'
|
||||
|
||||
type Props = {
|
||||
mode: Mode
|
||||
isDrawerOpen: boolean
|
||||
setIsDrawerOpen: (open: boolean) => void
|
||||
}
|
||||
|
||||
type WrapperProps = {
|
||||
children: React.ReactNode
|
||||
isBelowLgScreen: boolean
|
||||
className?: string
|
||||
isDrawerOpen: boolean
|
||||
setIsDrawerOpen: (open: boolean) => void
|
||||
}
|
||||
|
||||
const Wrapper = (props: WrapperProps) => {
|
||||
// Props
|
||||
const { children, isBelowLgScreen, className, isDrawerOpen, setIsDrawerOpen } = props
|
||||
|
||||
if (isBelowLgScreen) {
|
||||
return (
|
||||
<Drawer
|
||||
variant='temporary'
|
||||
anchor='left'
|
||||
open={isDrawerOpen}
|
||||
onClose={() => setIsDrawerOpen(false)}
|
||||
ModalProps={{
|
||||
keepMounted: true
|
||||
}}
|
||||
sx={{ '& .MuiDrawer-paper': { width: ['100%', 300] } }}
|
||||
className={classnames('p-5', className)}
|
||||
>
|
||||
<div className='p-4 flex flex-col gap-x-3'>
|
||||
<IconButton onClick={() => setIsDrawerOpen(false)} className='absolute inline-end-4 block-start-2'>
|
||||
<i className='tabler-x' />
|
||||
</IconButton>
|
||||
{children}
|
||||
</div>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
return <div className={classnames('flex items-center flex-wrap gap-x-4 gap-y-3', className)}>{children}</div>
|
||||
}
|
||||
|
||||
const FrontMenu = (props: Props) => {
|
||||
// Props
|
||||
const { isDrawerOpen, setIsDrawerOpen, mode } = props
|
||||
|
||||
// Hooks
|
||||
const pathname = usePathname()
|
||||
const isBelowLgScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'))
|
||||
const { intersections } = useIntersection()
|
||||
|
||||
useEffect(() => {
|
||||
if (!isBelowLgScreen && isDrawerOpen) {
|
||||
setIsDrawerOpen(false)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isBelowLgScreen])
|
||||
|
||||
return (
|
||||
<Wrapper isBelowLgScreen={isBelowLgScreen} isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen}>
|
||||
<Typography
|
||||
color='text.primary'
|
||||
component={Link}
|
||||
href='/front-pages/landing-page'
|
||||
className={classnames('font-medium plb-3 pli-1.5 hover:text-primary', {
|
||||
'text-primary':
|
||||
!intersections.features &&
|
||||
!intersections.team &&
|
||||
!intersections.faq &&
|
||||
!intersections['contact-us'] &&
|
||||
pathname === '/front-pages/landing-page'
|
||||
})}
|
||||
>
|
||||
Home
|
||||
</Typography>
|
||||
<Typography
|
||||
color='text.primary'
|
||||
component={Link}
|
||||
href='/front-pages/landing-page#features'
|
||||
className={classnames('font-medium plb-3 pli-1.5 hover:text-primary', {
|
||||
'text-primary': intersections.features
|
||||
})}
|
||||
>
|
||||
Features
|
||||
</Typography>
|
||||
<Typography
|
||||
color='text.primary'
|
||||
component={Link}
|
||||
href='/front-pages/landing-page#team'
|
||||
className={classnames('font-medium plb-3 pli-1.5 hover:text-primary', {
|
||||
'text-primary': intersections.team
|
||||
})}
|
||||
>
|
||||
Team
|
||||
</Typography>
|
||||
<Typography
|
||||
color='text.primary'
|
||||
component={Link}
|
||||
href='/front-pages/landing-page#faq'
|
||||
className={classnames('font-medium plb-3 pli-1.5 hover:text-primary', {
|
||||
'text-primary': intersections.faq
|
||||
})}
|
||||
>
|
||||
FAQ
|
||||
</Typography>
|
||||
<Typography
|
||||
color='text.primary'
|
||||
component={Link}
|
||||
href='/front-pages/landing-page#contact-us'
|
||||
className={classnames('font-medium plb-3 pli-1.5 hover:text-primary', {
|
||||
'text-primary': intersections['contact-us']
|
||||
})}
|
||||
>
|
||||
Contact us
|
||||
</Typography>
|
||||
<DropdownMenu
|
||||
mode={mode}
|
||||
isBelowLgScreen={isBelowLgScreen}
|
||||
isDrawerOpen={isDrawerOpen}
|
||||
setIsDrawerOpen={setIsDrawerOpen}
|
||||
/>
|
||||
<Typography
|
||||
component={Link}
|
||||
color='text.primary'
|
||||
href='/'
|
||||
target='_blank'
|
||||
className='font-medium plb-3 pli-1.5 hover:text-primary'
|
||||
>
|
||||
Admin
|
||||
</Typography>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default FrontMenu
|
||||
@@ -1,100 +0,0 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useState } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import Link from 'next/link'
|
||||
|
||||
// MUI Imports
|
||||
import Button from '@mui/material/Button'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||
import useScrollTrigger from '@mui/material/useScrollTrigger'
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { Mode } from '@core/types'
|
||||
|
||||
// Component Imports
|
||||
import Logo from '@components/layout/shared/Logo'
|
||||
import ModeDropdown from '@components/layout/shared/ModeDropdown'
|
||||
import FrontMenu from './FrontMenu'
|
||||
import CustomIconButton from '@core/components/mui/IconButton'
|
||||
|
||||
// Util Imports
|
||||
import { frontLayoutClasses } from '@layouts/utils/layoutClasses'
|
||||
|
||||
// Styles Imports
|
||||
import styles from './styles.module.css'
|
||||
|
||||
const Header = ({ mode }: { mode: Mode }) => {
|
||||
// States
|
||||
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
|
||||
|
||||
// Hooks
|
||||
const isBelowLgScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'))
|
||||
|
||||
// Detect window scroll
|
||||
const trigger = useScrollTrigger({
|
||||
threshold: 0,
|
||||
disableHysteresis: true
|
||||
})
|
||||
|
||||
return (
|
||||
<header className={classnames(frontLayoutClasses.header, styles.header)}>
|
||||
<div className={classnames(frontLayoutClasses.navbar, styles.navbar, { [styles.headerScrolled]: trigger })}>
|
||||
<div className={classnames(frontLayoutClasses.navbarContent, styles.navbarContent)}>
|
||||
{isBelowLgScreen ? (
|
||||
<div className='flex items-center gap-2 sm:gap-4'>
|
||||
<IconButton onClick={() => setIsDrawerOpen(true)} className='-mis-2'>
|
||||
<i className='tabler-menu-2 text-textPrimary' />
|
||||
</IconButton>
|
||||
<Link href='/front-pages/landing-page'>
|
||||
<Logo />
|
||||
</Link>
|
||||
<FrontMenu mode={mode} isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen} />
|
||||
</div>
|
||||
) : (
|
||||
<div className='flex items-center gap-10'>
|
||||
<Link href='/front-pages/landing-page'>
|
||||
<Logo />
|
||||
</Link>
|
||||
<FrontMenu mode={mode} isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen} />
|
||||
</div>
|
||||
)}
|
||||
<div className='flex items-center gap-2 sm:gap-4'>
|
||||
<ModeDropdown />
|
||||
{isBelowLgScreen ? (
|
||||
<CustomIconButton
|
||||
component={Link}
|
||||
variant='contained'
|
||||
href='https://1.envato.market/vuexy_admin'
|
||||
color='primary'
|
||||
target='_blank'
|
||||
>
|
||||
<i className='tabler-shopping-cart text-xl' />
|
||||
</CustomIconButton>
|
||||
) : (
|
||||
<Button
|
||||
component={Link}
|
||||
variant='contained'
|
||||
href='https://1.envato.market/vuexy_admin'
|
||||
startIcon={<i className='tabler-shopping-cart text-xl' />}
|
||||
className='whitespace-nowrap'
|
||||
target='_blank'
|
||||
>
|
||||
Purchase Now
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -1,27 +0,0 @@
|
||||
// Type Imports
|
||||
import type { ChildrenType } from '@core/types'
|
||||
|
||||
// Component Imports
|
||||
import Footer from '@components/layout/front-pages/Footer'
|
||||
import Header from '@components/layout/front-pages/Header'
|
||||
|
||||
// Server Action Imports
|
||||
import { getServerMode } from '@core/utils/serverHelpers'
|
||||
|
||||
// Util Imports
|
||||
import { frontLayoutClasses } from '@layouts/utils/layoutClasses'
|
||||
|
||||
const FrontLayout = async ({ children }: ChildrenType) => {
|
||||
// Vars
|
||||
const mode = await getServerMode()
|
||||
|
||||
return (
|
||||
<div className={frontLayoutClasses.root}>
|
||||
<Header mode={mode} />
|
||||
{children}
|
||||
<Footer mode={mode} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FrontLayout
|
||||
@@ -1,73 +0,0 @@
|
||||
.header {
|
||||
position: sticky;
|
||||
inset-block-start: 0;
|
||||
z-index: var(--header-z-index);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
inline-size: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset-block-start: 0;
|
||||
inset-inline: 0;
|
||||
block-size: 100%;
|
||||
backdrop-filter: saturate(100%) blur(6px);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
inline-size: calc(100% - 48px);
|
||||
padding-block: 0.438rem;
|
||||
padding-inline: 1.5rem;
|
||||
margin-inline: auto;
|
||||
margin-block-start: 1rem;
|
||||
pointer-events: auto;
|
||||
background-color: rgb(var(--mui-palette-background-paperChannel) / 0.38);
|
||||
border: 2px solid rgb(var(--mui-palette-background-paperChannel) / 0.68);
|
||||
border-radius: var(--mui-shape-borderRadius);
|
||||
|
||||
&.headerScrolled {
|
||||
background-color: var(--mui-palette-background-paper);
|
||||
border-color: var(--mui-palette-background-paper);
|
||||
box-shadow: var(--mui-customShadows-sm);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
max-inline-size: calc(900px - 48px);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
max-inline-size: calc(1200px - 48px);
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
max-inline-size: calc(1440px - 48px);
|
||||
}
|
||||
|
||||
.navbarContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inputBorder {
|
||||
fieldset {
|
||||
border-color: rgb(var(--mui-mainColorChannels-dark) / 0.22) !important;
|
||||
}
|
||||
label,
|
||||
input {
|
||||
color: rgb(var(--mui-mainColorChannels-dark) / 0.9) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footerRadius {
|
||||
border-start-start-radius: 3.75rem;
|
||||
border-start-end-radius: 3.75rem;
|
||||
}
|
||||
@@ -12,8 +12,7 @@ import type { getDictionary } from '@/utils/getDictionary'
|
||||
import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
|
||||
|
||||
// Component Imports
|
||||
import { Menu, SubMenu, MenuItem, MenuSection } from '@menu/vertical-menu'
|
||||
import CustomChip from '@core/components/mui/Chip'
|
||||
import { Menu, MenuItem, MenuSection, SubMenu } from '@menu/vertical-menu'
|
||||
|
||||
// import { GenerateVerticalMenu } from '@components/GenerateMenu'
|
||||
|
||||
@@ -81,33 +80,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
||||
renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
|
||||
menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
|
||||
>
|
||||
<SubMenu
|
||||
label={dictionary['navigation'].dashboards}
|
||||
icon={<i className='tabler-smart-home' />}
|
||||
suffix={<CustomChip label='5' size='small' color='error' round='true' />}
|
||||
>
|
||||
<SubMenu label={dictionary['navigation'].dashboards} icon={<i className='tabler-smart-home' />}>
|
||||
<MenuItem href={`/${locale}/dashboards/crm`}>{dictionary['navigation'].crm}</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/analytics`}>{dictionary['navigation'].analytics}</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/ecommerce`}>{dictionary['navigation'].eCommerce}</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/academy`}>{dictionary['navigation'].academy}</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/logistics`}>{dictionary['navigation'].logistics}</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].frontPages} icon={<i className='tabler-files' />}>
|
||||
<MenuItem href='/front-pages/landing-page' target='_blank'>
|
||||
{dictionary['navigation'].landing}
|
||||
</MenuItem>
|
||||
<MenuItem href='/front-pages/pricing' target='_blank'>
|
||||
{dictionary['navigation'].pricing}
|
||||
</MenuItem>
|
||||
<MenuItem href='/front-pages/payment' target='_blank'>
|
||||
{dictionary['navigation'].payment}
|
||||
</MenuItem>
|
||||
<MenuItem href='/front-pages/checkout' target='_blank'>
|
||||
{dictionary['navigation'].checkout}
|
||||
</MenuItem>
|
||||
<MenuItem href='/front-pages/help-center' target='_blank'>
|
||||
{dictionary['navigation'].helpCenter}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<MenuSection label={dictionary['navigation'].appsPages}>
|
||||
<SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-shopping-cart' />}>
|
||||
@@ -118,32 +94,16 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/category`}>
|
||||
{dictionary['navigation'].category}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/units`}>
|
||||
{dictionary['navigation'].units}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/units`}>{dictionary['navigation'].units}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/ingredients`}>
|
||||
{dictionary['navigation'].ingredients}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].orders}>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/orders/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
<MenuItem
|
||||
href={`/${locale}/apps/ecommerce/orders/details/5434`}
|
||||
exactMatch={false}
|
||||
activeUrl='/apps/ecommerce/orders/details'
|
||||
>
|
||||
{dictionary['navigation'].details}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].customers}>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/customers/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
<MenuItem
|
||||
href={`/${locale}/apps/ecommerce/customers/details/879861`}
|
||||
exactMatch={false}
|
||||
activeUrl='/apps/ecommerce/customers/details'
|
||||
>
|
||||
{dictionary['navigation'].details}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
{/* <MenuItem href={`/${locale}/apps/ecommerce/manage-reviews`}>
|
||||
{dictionary['navigation'].manageReviews}
|
||||
@@ -155,48 +115,6 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
||||
<MenuItem href={`/${locale}/apps/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/stock/adjustment`}>{dictionary['navigation'].addjustment}</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].academy} icon={<i className='tabler-school' />}>
|
||||
<MenuItem href={`/${locale}/apps/academy/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/academy/my-courses`}>{dictionary['navigation'].myCourses}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/academy/course-details`}>
|
||||
{dictionary['navigation'].courseDetails}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].logistics} icon={<i className='tabler-truck' />}>
|
||||
<MenuItem href={`/${locale}/apps/logistics/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/logistics/fleet`}>{dictionary['navigation'].fleet}</MenuItem>
|
||||
</SubMenu>
|
||||
<MenuItem
|
||||
href={`/${locale}/apps/email`}
|
||||
icon={<i className='tabler-mail' />}
|
||||
exactMatch={false}
|
||||
activeUrl='/apps/email'
|
||||
>
|
||||
{dictionary['navigation'].email}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/chat`} icon={<i className='tabler-message-circle-2' />}>
|
||||
{dictionary['navigation'].chat}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/calendar`} icon={<i className='tabler-calendar' />}>
|
||||
{dictionary['navigation'].calendar}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/kanban`} icon={<i className='tabler-copy' />}>
|
||||
{dictionary['navigation'].kanban}
|
||||
</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].invoice} icon={<i className='tabler-file-description' />}>
|
||||
<MenuItem href={`/${locale}/apps/invoice/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
<MenuItem
|
||||
href={`/${locale}/apps/invoice/preview/4987`}
|
||||
exactMatch={false}
|
||||
activeUrl='/apps/invoice/preview'
|
||||
>
|
||||
{dictionary['navigation'].preview}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/invoice/edit/4987`} exactMatch={false} activeUrl='/apps/invoice/edit'>
|
||||
{dictionary['navigation'].edit}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/invoice/add`}>{dictionary['navigation'].add}</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].user} icon={<i className='tabler-user' />}>
|
||||
<MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem>
|
||||
@@ -205,196 +123,6 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
||||
<MenuItem href={`/${locale}/apps/roles`}>{dictionary['navigation'].roles}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/permissions`}>{dictionary['navigation'].permissions}</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].pages} icon={<i className='tabler-file' />}>
|
||||
<MenuItem href={`/${locale}/pages/user-profile`}>{dictionary['navigation'].userProfile}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/account-settings`}>{dictionary['navigation'].accountSettings}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/faq`}>{dictionary['navigation'].faq}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/pricing`}>{dictionary['navigation'].pricing}</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].miscellaneous}>
|
||||
<MenuItem href={`/${locale}/pages/misc/coming-soon`} target='_blank'>
|
||||
{dictionary['navigation'].comingSoon}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/misc/under-maintenance`} target='_blank'>
|
||||
{dictionary['navigation'].underMaintenance}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/misc/404-not-found`} target='_blank'>
|
||||
{dictionary['navigation'].pageNotFound404}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/misc/401-not-authorized`} target='_blank'>
|
||||
{dictionary['navigation'].notAuthorized401}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].authPages} icon={<i className='tabler-shield-lock' />}>
|
||||
<SubMenu label={dictionary['navigation'].login}>
|
||||
<MenuItem href={`/${locale}/pages/auth/login-v1`} target='_blank'>
|
||||
{dictionary['navigation'].loginV1}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/login-v2`} target='_blank'>
|
||||
{dictionary['navigation'].loginV2}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].register}>
|
||||
<MenuItem href={`/${locale}/pages/auth/register-v1`} target='_blank'>
|
||||
{dictionary['navigation'].registerV1}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/register-v2`} target='_blank'>
|
||||
{dictionary['navigation'].registerV2}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/register-multi-steps`} target='_blank'>
|
||||
{dictionary['navigation'].registerMultiSteps}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].verifyEmail}>
|
||||
<MenuItem href={`/${locale}/pages/auth/verify-email-v1`} target='_blank'>
|
||||
{dictionary['navigation'].verifyEmailV1}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/verify-email-v2`} target='_blank'>
|
||||
{dictionary['navigation'].verifyEmailV2}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].forgotPassword}>
|
||||
<MenuItem href={`/${locale}/pages/auth/forgot-password-v1`} target='_blank'>
|
||||
{dictionary['navigation'].forgotPasswordV1}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/forgot-password-v2`} target='_blank'>
|
||||
{dictionary['navigation'].forgotPasswordV2}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].resetPassword}>
|
||||
<MenuItem href={`/${locale}/pages/auth/reset-password-v1`} target='_blank'>
|
||||
{dictionary['navigation'].resetPasswordV1}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/reset-password-v2`} target='_blank'>
|
||||
{dictionary['navigation'].resetPasswordV2}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].twoSteps}>
|
||||
<MenuItem href={`/${locale}/pages/auth/two-steps-v1`} target='_blank'>
|
||||
{dictionary['navigation'].twoStepsV1}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/auth/two-steps-v2`} target='_blank'>
|
||||
{dictionary['navigation'].twoStepsV2}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].wizardExamples} icon={<i className='tabler-dots' />}>
|
||||
<MenuItem href={`/${locale}/pages/wizard-examples/checkout`}>{dictionary['navigation'].checkout}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/wizard-examples/property-listing`}>
|
||||
{dictionary['navigation'].propertyListing}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/wizard-examples/create-deal`}>
|
||||
{dictionary['navigation'].createDeal}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<MenuItem href={`/${locale}/pages/dialog-examples`} icon={<i className='tabler-square' />}>
|
||||
{dictionary['navigation'].dialogExamples}
|
||||
</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].widgetExamples} icon={<i className='tabler-chart-bar' />}>
|
||||
<MenuItem href={`/${locale}/pages/widget-examples/basic`}>{dictionary['navigation'].basic}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/widget-examples/advanced`}>{dictionary['navigation'].advanced}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/widget-examples/statistics`}>
|
||||
{dictionary['navigation'].statistics}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/widget-examples/charts`}>{dictionary['navigation'].charts}</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/widget-examples/actions`}>{dictionary['navigation'].actions}</MenuItem>
|
||||
</SubMenu>
|
||||
</MenuSection>
|
||||
<MenuSection label={dictionary['navigation'].formsAndTables}>
|
||||
<MenuItem href={`/${locale}/forms/form-layouts`} icon={<i className='tabler-layout' />}>
|
||||
{dictionary['navigation'].formLayouts}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/forms/form-validation`} icon={<i className='tabler-checkup-list' />}>
|
||||
{dictionary['navigation'].formValidation}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/forms/form-wizard`} icon={<i className='tabler-git-merge' />}>
|
||||
{dictionary['navigation'].formWizard}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/react-table`} icon={<i className='tabler-table' />}>
|
||||
{dictionary['navigation'].reactTable}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-checkbox' />}
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/form-elements`}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
>
|
||||
{dictionary['navigation'].formELements}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-layout-board-split' />}
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/mui-table`}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
>
|
||||
{dictionary['navigation'].muiTables}
|
||||
</MenuItem>
|
||||
</MenuSection>
|
||||
<MenuSection label={dictionary['navigation'].chartsMisc}>
|
||||
<SubMenu label={dictionary['navigation'].charts} icon={<i className='tabler-chart-donut-2' />}>
|
||||
<MenuItem href={`/${locale}/charts/apex-charts`}>{dictionary['navigation'].apex}</MenuItem>
|
||||
<MenuItem href={`/${locale}/charts/recharts`}>{dictionary['navigation'].recharts}</MenuItem>
|
||||
</SubMenu>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-cards' />}
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/foundation`}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
>
|
||||
{dictionary['navigation'].foundation}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-atom' />}
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/components`}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
>
|
||||
{dictionary['navigation'].components}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-list-search' />}
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/menu-examples/overview`}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
>
|
||||
{dictionary['navigation'].menuExamples}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-lifebuoy' />}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
href='https://pixinvent.ticksy.com'
|
||||
>
|
||||
{dictionary['navigation'].raiseSupport}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-book-2' />}
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}`}
|
||||
>
|
||||
{dictionary['navigation'].documentation}
|
||||
</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].others} icon={<i className='tabler-box' />}>
|
||||
<MenuItem suffix={<CustomChip label='New' size='small' color='info' round='true' />}>
|
||||
{dictionary['navigation'].itemWithBadge}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href='https://pixinvent.com'
|
||||
target='_blank'
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
>
|
||||
{dictionary['navigation'].externalLink}
|
||||
</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].menuLevels}>
|
||||
<MenuItem>{dictionary['navigation'].menuLevel2}</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].menuLevel2}>
|
||||
<MenuItem>{dictionary['navigation'].menuLevel3}</MenuItem>
|
||||
<MenuItem>{dictionary['navigation'].menuLevel3}</MenuItem>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<MenuItem disabled>{dictionary['navigation'].disabledMenu}</MenuItem>
|
||||
</SubMenu>
|
||||
</MenuSection>
|
||||
</Menu>
|
||||
{/* <Menu
|
||||
|
||||
Reference in New Issue
Block a user