initial commit
This commit is contained in:
ferdiansyah783
@@ -0,0 +1,13 @@
|
||||
// Component Imports
|
||||
import LayoutFooter from '@layouts/components/horizontal/Footer'
|
||||
import FooterContent from './FooterContent'
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<LayoutFooter>
|
||||
<FooterContent />
|
||||
</LayoutFooter>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
// Next Imports
|
||||
import Link from 'next/link'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Hook Imports
|
||||
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
||||
|
||||
// Util Imports
|
||||
import { horizontalLayoutClasses } from '@layouts/utils/layoutClasses'
|
||||
|
||||
const FooterContent = () => {
|
||||
// Hooks
|
||||
const { isBreakpointReached } = useHorizontalNav()
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(horizontalLayoutClasses.footerContent, 'flex items-center justify-between flex-wrap gap-4')}
|
||||
>
|
||||
<p>
|
||||
<span className='text-textSecondary'>{`© ${new Date().getFullYear()}, Made with `}</span>
|
||||
<span>{`❤️`}</span>
|
||||
<span className='text-textSecondary'>{` by `}</span>
|
||||
<Link href='https://pixinvent.com/' target='_blank' className='text-primary uppercase'>
|
||||
Pixinvent
|
||||
</Link>
|
||||
</p>
|
||||
{!isBreakpointReached && (
|
||||
<div className='flex items-center gap-4'>
|
||||
<Link href='https://themeforest.net/licenses/standard' target='_blank' className='text-primary'>
|
||||
License
|
||||
</Link>
|
||||
<Link href='https://themeforest.net/user/pixinvent/portfolio' target='_blank' className='text-primary'>
|
||||
More Themes
|
||||
</Link>
|
||||
<Link
|
||||
href='https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation'
|
||||
target='_blank'
|
||||
className='text-primary'
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
<Link href='https://pixinvent.ticksy.com' target='_blank' className='text-primary'>
|
||||
Support
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FooterContent
|
||||
@@ -0,0 +1,32 @@
|
||||
'use client'
|
||||
|
||||
// Type Imports
|
||||
import type { getDictionary } from '@/utils/getDictionary'
|
||||
|
||||
// Component Imports
|
||||
import Navigation from './Navigation'
|
||||
import NavbarContent from './NavbarContent'
|
||||
import Navbar from '@layouts/components/horizontal/Navbar'
|
||||
import LayoutHeader from '@layouts/components/horizontal/Header'
|
||||
|
||||
// Hook Imports
|
||||
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
||||
|
||||
const Header = ({ dictionary }: { dictionary: Awaited<ReturnType<typeof getDictionary>> }) => {
|
||||
// Hooks
|
||||
const { isBreakpointReached } = useHorizontalNav()
|
||||
|
||||
return (
|
||||
<>
|
||||
<LayoutHeader>
|
||||
<Navbar>
|
||||
<NavbarContent />
|
||||
</Navbar>
|
||||
{!isBreakpointReached && <Navigation dictionary={dictionary} />}
|
||||
</LayoutHeader>
|
||||
{isBreakpointReached && <Navigation dictionary={dictionary} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,443 @@
|
||||
// Next Imports
|
||||
import { useParams } from 'next/navigation'
|
||||
|
||||
// MUI Imports
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Type Imports
|
||||
import type { getDictionary } from '@/utils/getDictionary'
|
||||
import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
|
||||
|
||||
// Component Imports
|
||||
import HorizontalNav, { Menu, SubMenu, MenuItem } from '@menu/horizontal-menu'
|
||||
import VerticalNavContent from './VerticalNavContent'
|
||||
import CustomChip from '@core/components/mui/Chip'
|
||||
|
||||
// import { GenerateHorizontalMenu } from '@components/GenerateMenu'
|
||||
|
||||
// Hook Imports
|
||||
import useVerticalNav from '@menu/hooks/useVerticalNav'
|
||||
|
||||
// Styled Component Imports
|
||||
import StyledHorizontalNavExpandIcon from '@menu/styles/horizontal/StyledHorizontalNavExpandIcon'
|
||||
import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
|
||||
|
||||
// Style Imports
|
||||
import menuItemStyles from '@core/styles/horizontal/menuItemStyles'
|
||||
import menuRootStyles from '@core/styles/horizontal/menuRootStyles'
|
||||
import verticalNavigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
|
||||
import verticalMenuItemStyles from '@core/styles/vertical/menuItemStyles'
|
||||
import verticalMenuSectionStyles from '@core/styles/vertical/menuSectionStyles'
|
||||
|
||||
// Menu Data Imports
|
||||
// import menuData from '@/data/navigation/horizontalMenuData'
|
||||
|
||||
type RenderExpandIconProps = {
|
||||
level?: number
|
||||
}
|
||||
|
||||
type RenderVerticalExpandIconProps = {
|
||||
open?: boolean
|
||||
transitionDuration?: VerticalMenuContextProps['transitionDuration']
|
||||
}
|
||||
|
||||
const RenderExpandIcon = ({ level }: RenderExpandIconProps) => (
|
||||
<StyledHorizontalNavExpandIcon level={level}>
|
||||
<i className='tabler-chevron-right' />
|
||||
</StyledHorizontalNavExpandIcon>
|
||||
)
|
||||
|
||||
const RenderVerticalExpandIcon = ({ open, transitionDuration }: RenderVerticalExpandIconProps) => (
|
||||
<StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
|
||||
<i className='tabler-chevron-right' />
|
||||
</StyledVerticalNavExpandIcon>
|
||||
)
|
||||
|
||||
const HorizontalMenu = ({ dictionary }: { dictionary: Awaited<ReturnType<typeof getDictionary>> }) => {
|
||||
// Hooks
|
||||
const verticalNavOptions = useVerticalNav()
|
||||
const theme = useTheme()
|
||||
const params = useParams()
|
||||
|
||||
// Vars
|
||||
const { transitionDuration } = verticalNavOptions
|
||||
const { lang: locale } = params
|
||||
|
||||
return (
|
||||
<HorizontalNav
|
||||
switchToVertical
|
||||
verticalNavContent={VerticalNavContent}
|
||||
verticalNavProps={{
|
||||
customStyles: verticalNavigationCustomStyles(verticalNavOptions, theme),
|
||||
backgroundColor: 'var(--mui-palette-background-paper)'
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
rootStyles={menuRootStyles(theme)}
|
||||
renderExpandIcon={({ level }) => <RenderExpandIcon level={level} />}
|
||||
menuItemStyles={menuItemStyles(theme, 'tabler-circle')}
|
||||
renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
|
||||
popoutMenuOffset={{
|
||||
mainAxis: ({ level }) => (level && level > 0 ? 14 : 12),
|
||||
alignmentAxis: 0
|
||||
}}
|
||||
verticalMenuProps={{
|
||||
menuItemStyles: verticalMenuItemStyles(verticalNavOptions, theme),
|
||||
renderExpandIcon: ({ open }) => (
|
||||
<RenderVerticalExpandIcon open={open} transitionDuration={transitionDuration} />
|
||||
),
|
||||
renderExpandedMenuItemIcon: { icon: <i className='tabler-circle text-xs' /> },
|
||||
menuSectionStyles: verticalMenuSectionStyles(verticalNavOptions, theme)
|
||||
}}
|
||||
>
|
||||
<SubMenu label={dictionary['navigation'].dashboards} icon={<i className='tabler-smart-home' />}>
|
||||
<MenuItem href={`/${locale}/dashboards/crm`} icon={<i className='tabler-chart-pie-2' />}>
|
||||
{dictionary['navigation'].crm}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/analytics`} icon={<i className='tabler-trending-up' />}>
|
||||
{dictionary['navigation'].analytics}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/ecommerce`} icon={<i className='tabler-shopping-cart' />}>
|
||||
{dictionary['navigation'].eCommerce}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/academy`} icon={<i className='tabler-school' />}>
|
||||
{dictionary['navigation'].academy}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/dashboards/logistics`} icon={<i className='tabler-truck' />}>
|
||||
{dictionary['navigation'].logistics}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].apps} icon={<i className='tabler-mail' />}>
|
||||
<SubMenu label={dictionary['navigation'].eCommerce} icon={<i className='tabler-shopping-cart' />}>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/dashboard`}>{dictionary['navigation'].dashboard}</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].products}>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/add`}>{dictionary['navigation'].add}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/products/category`}>
|
||||
{dictionary['navigation'].category}
|
||||
</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}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/referrals`}>{dictionary['navigation'].referrals}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/ecommerce/settings`}>{dictionary['navigation'].settings}</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>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].rolesPermissions} icon={<i className='tabler-lock' />}>
|
||||
<MenuItem href={`/${locale}/apps/roles`}>{dictionary['navigation'].roles}</MenuItem>
|
||||
<MenuItem href={`/${locale}/apps/permissions`}>{dictionary['navigation'].permissions}</MenuItem>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].pages} icon={<i className='tabler-file' />}>
|
||||
<MenuItem href={`/${locale}/pages/user-profile`} icon={<i className='tabler-user-circle' />}>
|
||||
{dictionary['navigation'].userProfile}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/account-settings`} icon={<i className='tabler-settings' />}>
|
||||
{dictionary['navigation'].accountSettings}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/faq`} icon={<i className='tabler-help-circle' />}>
|
||||
{dictionary['navigation'].faq}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/pages/pricing`} icon={<i className='tabler-currency-dollar' />}>
|
||||
{dictionary['navigation'].pricing}
|
||||
</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].miscellaneous} icon={<i className='tabler-file-info' />}>
|
||||
<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 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>
|
||||
<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>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].formsAndTables} icon={<i className='tabler-file-invoice' />}>
|
||||
<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>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].charts} icon={<i className='tabler-chart-donut-2' />}>
|
||||
<MenuItem href={`/${locale}/charts/apex-charts`} icon={<i className='tabler-chart-ppf' />}>
|
||||
{dictionary['navigation'].apex}
|
||||
</MenuItem>
|
||||
<MenuItem href={`/${locale}/charts/recharts`} icon={<i className='tabler-chart-sankey' />}>
|
||||
{dictionary['navigation'].recharts}
|
||||
</MenuItem>
|
||||
</SubMenu>
|
||||
<SubMenu label={dictionary['navigation'].others} icon={<i className='tabler-dots' />}>
|
||||
<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
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
href='https://pixinvent.ticksy.com'
|
||||
icon={<i className='tabler-lifebuoy' />}
|
||||
>
|
||||
{dictionary['navigation'].raiseSupport}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
target='_blank'
|
||||
icon={<i className='tabler-book-2' />}
|
||||
href={`${process.env.NEXT_PUBLIC_DOCS_URL}`}
|
||||
>
|
||||
{dictionary['navigation'].documentation}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
suffix={<CustomChip label='New' size='small' color='info' round='true' />}
|
||||
icon={<i className='tabler-notification' />}
|
||||
>
|
||||
{dictionary['navigation'].itemWithBadge}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<i className='tabler-link' />}
|
||||
href='https://pixinvent.com'
|
||||
target='_blank'
|
||||
suffix={<i className='tabler-external-link text-xl' />}
|
||||
>
|
||||
{dictionary['navigation'].externalLink}
|
||||
</MenuItem>
|
||||
<SubMenu label={dictionary['navigation'].menuLevels} icon={<i className='tabler-menu-2' />}>
|
||||
<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>
|
||||
</Menu>
|
||||
{/* <Menu
|
||||
rootStyles={menuRootStyles(theme)}
|
||||
renderExpandIcon={({ level }) => <RenderExpandIcon level={level} />}
|
||||
menuItemStyles={menuItemStyles(theme, 'tabler-circle')}
|
||||
renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
|
||||
popoutMenuOffset={{
|
||||
mainAxis: ({ level }) => (level && level > 0 ? 14 : 12),
|
||||
alignmentAxis: 0
|
||||
}}
|
||||
verticalMenuProps={{
|
||||
menuItemStyles: verticalMenuItemStyles(verticalNavOptions, theme),
|
||||
renderExpandIcon: ({ open }) => (
|
||||
<RenderVerticalExpandIcon open={open} transitionDuration={transitionDuration} />
|
||||
),
|
||||
renderExpandedMenuItemIcon: { icon: <i className='tabler-circle text-xs' /> },
|
||||
menuSectionStyles: verticalMenuSectionStyles(verticalNavOptions, theme)
|
||||
}}
|
||||
>
|
||||
<GenerateHorizontalMenu menuData={menuData(dictionary)} />
|
||||
</Menu> */}
|
||||
</HorizontalNav>
|
||||
)
|
||||
}
|
||||
|
||||
export default HorizontalMenu
|
||||
@@ -0,0 +1,24 @@
|
||||
// Hook Imports
|
||||
import useVerticalNav from '@menu/hooks/useVerticalNav'
|
||||
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
||||
|
||||
const NavToggle = () => {
|
||||
// Hooks
|
||||
const { toggleVerticalNav } = useVerticalNav()
|
||||
const { isBreakpointReached } = useHorizontalNav()
|
||||
|
||||
// Toggle Vertical Nav
|
||||
const handleClick = () => {
|
||||
toggleVerticalNav()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <i className='tabler-menu-2 cursor-pointer' onClick={handleClick} /> */}
|
||||
{/* Comment following code and uncomment this code in order to toggle menu on desktop screens as well */}
|
||||
{isBreakpointReached && <i className='tabler-menu-2 cursor-pointer' onClick={handleClick} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavToggle
|
||||
@@ -0,0 +1,150 @@
|
||||
// Next Imports
|
||||
import Link from 'next/link'
|
||||
import { useParams } from 'next/navigation'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { Locale } from '@configs/i18n'
|
||||
import type { ShortcutsType } from '@components/layout/shared/ShortcutsDropdown'
|
||||
import type { NotificationsType } from '@components/layout/shared/NotificationsDropdown'
|
||||
|
||||
// Component Imports
|
||||
import NavToggle from './NavToggle'
|
||||
import Logo from '@components/layout/shared/Logo'
|
||||
import NavSearch from '@components/layout/shared/search'
|
||||
import LanguageDropdown from '@components/layout/shared/LanguageDropdown'
|
||||
import ModeDropdown from '@components/layout/shared/ModeDropdown'
|
||||
import ShortcutsDropdown from '@components/layout/shared/ShortcutsDropdown'
|
||||
import NotificationsDropdown from '@components/layout/shared/NotificationsDropdown'
|
||||
import UserDropdown from '@components/layout/shared/UserDropdown'
|
||||
|
||||
// Hook Imports
|
||||
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
||||
|
||||
// Util Imports
|
||||
import { horizontalLayoutClasses } from '@layouts/utils/layoutClasses'
|
||||
import { getLocalizedUrl } from '@/utils/i18n'
|
||||
|
||||
// Vars
|
||||
const shortcuts: ShortcutsType[] = [
|
||||
{
|
||||
url: '/apps/calendar',
|
||||
icon: 'tabler-calendar',
|
||||
title: 'Calendar',
|
||||
subtitle: 'Appointments'
|
||||
},
|
||||
{
|
||||
url: '/apps/invoice/list',
|
||||
icon: 'tabler-file-dollar',
|
||||
title: 'Invoice App',
|
||||
subtitle: 'Manage Accounts'
|
||||
},
|
||||
{
|
||||
url: '/apps/user/list',
|
||||
icon: 'tabler-user',
|
||||
title: 'Users',
|
||||
subtitle: 'Manage Users'
|
||||
},
|
||||
{
|
||||
url: '/apps/roles',
|
||||
icon: 'tabler-users-group',
|
||||
title: 'Role Management',
|
||||
subtitle: 'Permissions'
|
||||
},
|
||||
{
|
||||
url: '/',
|
||||
icon: 'tabler-device-desktop-analytics',
|
||||
title: 'Dashboard',
|
||||
subtitle: 'User Dashboard'
|
||||
},
|
||||
{
|
||||
url: '/pages/account-settings',
|
||||
icon: 'tabler-settings',
|
||||
title: 'Settings',
|
||||
subtitle: 'Account Settings'
|
||||
}
|
||||
]
|
||||
|
||||
const notifications: NotificationsType[] = [
|
||||
{
|
||||
avatarImage: '/images/avatars/8.png',
|
||||
title: 'Congratulations Flora 🎉',
|
||||
subtitle: 'Won the monthly bestseller gold badge',
|
||||
time: '1h ago',
|
||||
read: false
|
||||
},
|
||||
{
|
||||
title: 'Cecilia Becker',
|
||||
avatarColor: 'secondary',
|
||||
subtitle: 'Accepted your connection',
|
||||
time: '12h ago',
|
||||
read: false
|
||||
},
|
||||
{
|
||||
avatarImage: '/images/avatars/3.png',
|
||||
title: 'Bernard Woods',
|
||||
subtitle: 'You have new message from Bernard Woods',
|
||||
time: 'May 18, 8:26 AM',
|
||||
read: true
|
||||
},
|
||||
{
|
||||
avatarIcon: 'tabler-chart-bar',
|
||||
title: 'Monthly report generated',
|
||||
subtitle: 'July month financial report is generated',
|
||||
avatarColor: 'info',
|
||||
time: 'Apr 24, 10:30 AM',
|
||||
read: true
|
||||
},
|
||||
{
|
||||
avatarText: 'MG',
|
||||
title: 'Application has been approved 🚀',
|
||||
subtitle: 'Your Meta Gadgets project application has been approved.',
|
||||
avatarColor: 'success',
|
||||
time: 'Feb 17, 12:17 PM',
|
||||
read: true
|
||||
},
|
||||
{
|
||||
avatarIcon: 'tabler-mail',
|
||||
title: 'New message from Harry',
|
||||
subtitle: 'You have new message from Harry',
|
||||
avatarColor: 'error',
|
||||
time: 'Jan 6, 1:48 PM',
|
||||
read: true
|
||||
}
|
||||
]
|
||||
|
||||
const NavbarContent = () => {
|
||||
// Hooks
|
||||
const { isBreakpointReached } = useHorizontalNav()
|
||||
const { lang: locale } = useParams()
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(horizontalLayoutClasses.navbarContent, 'flex items-center justify-between gap-4 is-full')}
|
||||
>
|
||||
<div className='flex items-center gap-4'>
|
||||
<NavToggle />
|
||||
{/* Hide Logo on Smaller screens */}
|
||||
{!isBreakpointReached && (
|
||||
<Link href={getLocalizedUrl('/', locale as Locale)}>
|
||||
<Logo />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex items-center'>
|
||||
<NavSearch />
|
||||
<LanguageDropdown />
|
||||
<ModeDropdown />
|
||||
<ShortcutsDropdown shortcuts={shortcuts} />
|
||||
<NotificationsDropdown notifications={notifications} />
|
||||
<UserDropdown />
|
||||
{/* Language Dropdown, Notification Dropdown, quick access menu dropdown, user dropdown will be placed here */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavbarContent
|
||||
@@ -0,0 +1,69 @@
|
||||
// Third-party Imports
|
||||
import styled from '@emotion/styled'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { getDictionary } from '@/utils/getDictionary'
|
||||
|
||||
// Component Imports
|
||||
import HorizontalMenu from './HorizontalMenu'
|
||||
|
||||
// Config Imports
|
||||
import themeConfig from '@configs/themeConfig'
|
||||
|
||||
// Hook Imports
|
||||
import { useSettings } from '@core/hooks/useSettings'
|
||||
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
||||
|
||||
// Util Imports
|
||||
import { horizontalLayoutClasses } from '@layouts/utils/layoutClasses'
|
||||
|
||||
type StyledDivProps = {
|
||||
isContentCompact: boolean
|
||||
isBreakpointReached?: boolean
|
||||
}
|
||||
|
||||
const StyledDiv = styled.div<StyledDivProps>`
|
||||
${({ isContentCompact, isBreakpointReached }) =>
|
||||
!isBreakpointReached &&
|
||||
`
|
||||
padding: ${themeConfig.layoutPadding}px;
|
||||
|
||||
${
|
||||
isContentCompact &&
|
||||
`
|
||||
margin-inline: auto;
|
||||
max-inline-size: ${themeConfig.compactContentWidth}px;
|
||||
`
|
||||
}
|
||||
`}
|
||||
`
|
||||
|
||||
const Navigation = ({ dictionary }: { dictionary: Awaited<ReturnType<typeof getDictionary>> }) => {
|
||||
// Hooks
|
||||
const { settings } = useSettings()
|
||||
const { isBreakpointReached } = useHorizontalNav()
|
||||
|
||||
// Vars
|
||||
const headerContentCompact = settings.navbarContentWidth === 'compact'
|
||||
|
||||
return (
|
||||
<div
|
||||
{...(!isBreakpointReached && {
|
||||
className: classnames(horizontalLayoutClasses.navigation, 'relative flex border-bs')
|
||||
})}
|
||||
>
|
||||
<StyledDiv
|
||||
isContentCompact={headerContentCompact}
|
||||
isBreakpointReached={isBreakpointReached}
|
||||
{...(!isBreakpointReached && {
|
||||
className: classnames(horizontalLayoutClasses.navigationContentWrapper, 'flex items-center is-full plb-2')
|
||||
})}
|
||||
>
|
||||
<HorizontalMenu dictionary={dictionary} />
|
||||
</StyledDiv>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navigation
|
||||
@@ -0,0 +1,104 @@
|
||||
// React Imports
|
||||
import { useRef } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import Link from 'next/link'
|
||||
import { useParams } from 'next/navigation'
|
||||
|
||||
// MUI Imports
|
||||
import { styled } from '@mui/material/styles'
|
||||
|
||||
// Third-party Imports
|
||||
import PerfectScrollbar from 'react-perfect-scrollbar'
|
||||
|
||||
// Type Imports
|
||||
import type { ChildrenType } from '@core/types'
|
||||
import type { Locale } from '@configs/i18n'
|
||||
|
||||
// Component Imports
|
||||
import NavHeader from '@menu/components/vertical-menu/NavHeader'
|
||||
import Logo from '@components/layout/shared/Logo'
|
||||
import NavCollapseIcons from '@menu/components/vertical-menu/NavCollapseIcons'
|
||||
|
||||
// Hook Imports
|
||||
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
||||
|
||||
// Util Imports
|
||||
import { mapHorizontalToVerticalMenu } from '@menu/utils/menuUtils'
|
||||
import { getLocalizedUrl } from '@/utils/i18n'
|
||||
|
||||
const StyledBoxForShadow = styled('div')(({ theme }) => ({
|
||||
top: 60,
|
||||
left: -8,
|
||||
zIndex: 2,
|
||||
opacity: 0,
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
width: 'calc(100% + 15px)',
|
||||
height: theme.mixins.toolbar.minHeight,
|
||||
transition: 'opacity .15s ease-in-out',
|
||||
background: `linear-gradient(var(--mui-palette-background-paper) ${
|
||||
theme.direction === 'rtl' ? '95%' : '5%'
|
||||
}, rgb(var(--mui-palette-background-paperChannel) / 0.85) 30%, rgb(var(--mui-palette-background-paperChannel) / 0.5) 65%, rgb(var(--mui-palette-background-paperChannel) / 0.3) 75%, transparent)`,
|
||||
'&.scrolled': {
|
||||
opacity: 1
|
||||
}
|
||||
}))
|
||||
|
||||
const VerticalNavContent = ({ children }: ChildrenType) => {
|
||||
// Hooks
|
||||
const { isBreakpointReached } = useHorizontalNav()
|
||||
const { lang: locale } = useParams()
|
||||
|
||||
// Refs
|
||||
const shadowRef = useRef(null)
|
||||
|
||||
// Vars
|
||||
const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar
|
||||
|
||||
const scrollMenu = (container: any, isPerfectScrollbar: boolean) => {
|
||||
container = isBreakpointReached || !isPerfectScrollbar ? container.target : container
|
||||
|
||||
if (shadowRef && container.scrollTop > 0) {
|
||||
// @ts-ignore
|
||||
if (!shadowRef.current.classList.contains('scrolled')) {
|
||||
// @ts-ignore
|
||||
shadowRef.current.classList.add('scrolled')
|
||||
}
|
||||
} else {
|
||||
// @ts-ignore
|
||||
shadowRef.current.classList.remove('scrolled')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavHeader>
|
||||
<Link href={getLocalizedUrl('/', locale as Locale)}>
|
||||
<Logo />
|
||||
</Link>
|
||||
<NavCollapseIcons
|
||||
lockedIcon={<i className='tabler-circle-dot text-xl' />}
|
||||
unlockedIcon={<i className='tabler-circle text-xl' />}
|
||||
closeIcon={<i className='tabler-x text-xl' />}
|
||||
/>
|
||||
</NavHeader>
|
||||
<StyledBoxForShadow ref={shadowRef} />
|
||||
<ScrollWrapper
|
||||
{...(isBreakpointReached
|
||||
? {
|
||||
className: 'bs-full overflow-y-auto overflow-x-hidden',
|
||||
onScroll: container => scrollMenu(container, false)
|
||||
}
|
||||
: {
|
||||
options: { wheelPropagation: false, suppressScrollX: true },
|
||||
onScrollY: container => scrollMenu(container, true)
|
||||
})}
|
||||
>
|
||||
{mapHorizontalToVerticalMenu(children)}
|
||||
</ScrollWrapper>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default VerticalNavContent
|
||||
Reference in New Issue
Block a user