upgade package
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import {SidebarMenuMain} from './SidebarMenuMain'
|
||||
|
||||
const SidebarMenu = () => {
|
||||
return (
|
||||
<div className='app-sidebar-menu overflow-hidden flex-column-fluid'>
|
||||
<div
|
||||
id='kt_app_sidebar_menu_wrapper'
|
||||
className='app-sidebar-wrapper hover-scroll-overlay-y my-5'
|
||||
data-kt-scroll='true'
|
||||
data-kt-scroll-activate='true'
|
||||
data-kt-scroll-height='auto'
|
||||
data-kt-scroll-dependencies='#kt_app_sidebar_logo, #kt_app_sidebar_footer'
|
||||
data-kt-scroll-wrappers='#kt_app_sidebar_menu'
|
||||
data-kt-scroll-offset='5px'
|
||||
data-kt-scroll-save-state='true'
|
||||
>
|
||||
<div
|
||||
className='menu menu-column menu-rounded menu-sub-indention px-3'
|
||||
id='#kt_app_sidebar_menu'
|
||||
data-kt-menu='true'
|
||||
data-kt-menu-expand='false'
|
||||
>
|
||||
<SidebarMenuMain />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {SidebarMenu}
|
||||
@@ -0,0 +1,53 @@
|
||||
import {FC} from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {Link} from 'react-router-dom'
|
||||
import {useLocation} from 'react-router'
|
||||
import {checkIsActive, KTIcon, WithChildren} from '../../../../helpers'
|
||||
import {useLayout} from '../../../core'
|
||||
|
||||
type Props = {
|
||||
to: string
|
||||
title: string
|
||||
icon?: string
|
||||
fontIcon?: string
|
||||
hasBullet?: boolean
|
||||
}
|
||||
|
||||
const SidebarMenuItem: FC<Props & WithChildren> = ({
|
||||
children,
|
||||
to,
|
||||
title,
|
||||
icon,
|
||||
fontIcon,
|
||||
hasBullet = false,
|
||||
}) => {
|
||||
const {pathname} = useLocation()
|
||||
const isActive = checkIsActive(pathname, to)
|
||||
const {config} = useLayout()
|
||||
const {app} = config
|
||||
|
||||
return (
|
||||
<div className='menu-item'>
|
||||
<Link className={clsx('menu-link without-sub', {active: isActive})} to={to}>
|
||||
{hasBullet && (
|
||||
<span className='menu-bullet'>
|
||||
<span className='bullet bullet-dot'></span>
|
||||
</span>
|
||||
)}
|
||||
{icon && app?.sidebar?.default?.menu?.iconType === 'svg' && (
|
||||
<span className='menu-icon'>
|
||||
{' '}
|
||||
<KTIcon iconName={icon} className='fs-2' />
|
||||
</span>
|
||||
)}
|
||||
{fontIcon && app?.sidebar?.default?.menu?.iconType === 'font' && (
|
||||
<i className={clsx('bi fs-3', fontIcon)}></i>
|
||||
)}
|
||||
<span className='menu-title'>{title}</span>
|
||||
</Link>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {SidebarMenuItem}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
import {useLocation} from 'react-router'
|
||||
import {checkIsActive, KTIcon, WithChildren} from '../../../../helpers'
|
||||
import {useLayout} from '../../../core'
|
||||
|
||||
type Props = {
|
||||
to: string
|
||||
title: string
|
||||
icon?: string
|
||||
fontIcon?: string
|
||||
hasBullet?: boolean
|
||||
}
|
||||
|
||||
const SidebarMenuItemWithSub: React.FC<Props & WithChildren> = ({
|
||||
children,
|
||||
to,
|
||||
title,
|
||||
icon,
|
||||
fontIcon,
|
||||
hasBullet,
|
||||
}) => {
|
||||
const {pathname} = useLocation()
|
||||
const isActive = checkIsActive(pathname, to)
|
||||
const {config} = useLayout()
|
||||
const {app} = config
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx('menu-item', {'here show': isActive}, 'menu-accordion')}
|
||||
data-kt-menu-trigger='click'
|
||||
>
|
||||
<span className='menu-link'>
|
||||
{hasBullet && (
|
||||
<span className='menu-bullet'>
|
||||
<span className='bullet bullet-dot'></span>
|
||||
</span>
|
||||
)}
|
||||
{icon && app?.sidebar?.default?.menu?.iconType === 'svg' && (
|
||||
<span className='menu-icon'>
|
||||
<KTIcon iconName={icon} className='fs-2' />
|
||||
</span>
|
||||
)}
|
||||
{fontIcon && app?.sidebar?.default?.menu?.iconType === 'font' && (
|
||||
<i className={clsx('bi fs-3', fontIcon)}></i>
|
||||
)}
|
||||
<span className='menu-title'>{title}</span>
|
||||
<span className='menu-arrow'></span>
|
||||
</span>
|
||||
<div className={clsx('menu-sub menu-sub-accordion', {'menu-active-bg': isActive})}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {SidebarMenuItemWithSub}
|
||||
@@ -0,0 +1,121 @@
|
||||
import {useIntl} from 'react-intl'
|
||||
import {KTIcon} from '../../../../helpers'
|
||||
import {SidebarMenuItemWithSub} from './SidebarMenuItemWithSub'
|
||||
import {SidebarMenuItem} from './SidebarMenuItem'
|
||||
|
||||
const SidebarMenuMain = () => {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<>
|
||||
<SidebarMenuItem
|
||||
to='/dashboard'
|
||||
icon='element-11'
|
||||
title={intl.formatMessage({id: 'MENU.DASHBOARD'})}
|
||||
fontIcon='bi-app-indicator'
|
||||
/>
|
||||
{/*<SidebarMenuItem to='/builder' icon='switch' title='Layout Builder' fontIcon='bi-layers' />*/}
|
||||
<div className='menu-item'>
|
||||
<div className='menu-content pt-8 pb-2'>
|
||||
<span className='menu-section text-muted text-uppercase fs-8 ls-1'>Crafted</span>
|
||||
</div>
|
||||
</div>
|
||||
<SidebarMenuItemWithSub
|
||||
to='/crafted/pages'
|
||||
title='Pages'
|
||||
fontIcon='bi-archive'
|
||||
icon='element-plus'
|
||||
>
|
||||
<SidebarMenuItemWithSub to='/crafted/pages/profile' title='Profile' hasBullet={true}>
|
||||
<SidebarMenuItem to='/crafted/pages/profile/overview' title='Overview' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/pages/profile/projects' title='Projects' hasBullet={true} />
|
||||
<SidebarMenuItem
|
||||
to='/crafted/pages/profile/campaigns'
|
||||
title='Campaigns'
|
||||
hasBullet={true}
|
||||
/>
|
||||
<SidebarMenuItem
|
||||
to='/crafted/pages/profile/documents'
|
||||
title='Documents'
|
||||
hasBullet={true}
|
||||
/>
|
||||
<SidebarMenuItem
|
||||
to='/crafted/pages/profile/connections'
|
||||
title='Connections'
|
||||
hasBullet={true}
|
||||
/>
|
||||
</SidebarMenuItemWithSub>
|
||||
|
||||
<SidebarMenuItemWithSub to='/crafted/pages/wizards' title='Wizards' hasBullet={true}>
|
||||
<SidebarMenuItem
|
||||
to='/crafted/pages/wizards/horizontal'
|
||||
title='Horizontal'
|
||||
hasBullet={true}
|
||||
/>
|
||||
<SidebarMenuItem to='/crafted/pages/wizards/vertical' title='Vertical' hasBullet={true} />
|
||||
</SidebarMenuItemWithSub>
|
||||
</SidebarMenuItemWithSub>
|
||||
<SidebarMenuItemWithSub
|
||||
to='/crafted/accounts'
|
||||
title='Accounts'
|
||||
icon='profile-circle'
|
||||
fontIcon='bi-person'
|
||||
>
|
||||
<SidebarMenuItem to='/crafted/account/overview' title='Overview' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/account/settings' title='Settings' hasBullet={true} />
|
||||
</SidebarMenuItemWithSub>
|
||||
<SidebarMenuItemWithSub to='/error' title='Errors' fontIcon='bi-sticky' icon='cross-circle'>
|
||||
<SidebarMenuItem to='/error/404' title='Error 404' hasBullet={true} />
|
||||
<SidebarMenuItem to='/error/500' title='Error 500' hasBullet={true} />
|
||||
</SidebarMenuItemWithSub>
|
||||
<SidebarMenuItemWithSub
|
||||
to='/crafted/widgets'
|
||||
title='Widgets'
|
||||
icon='element-7'
|
||||
fontIcon='bi-layers'
|
||||
>
|
||||
<SidebarMenuItem to='/crafted/widgets/lists' title='Lists' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/widgets/statistics' title='Statistics' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/widgets/charts' title='Charts' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/widgets/mixed' title='Mixed' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/widgets/tables' title='Tables' hasBullet={true} />
|
||||
<SidebarMenuItem to='/crafted/widgets/feeds' title='Feeds' hasBullet={true} />
|
||||
</SidebarMenuItemWithSub>
|
||||
<div className='menu-item'>
|
||||
<div className='menu-content pt-8 pb-2'>
|
||||
<span className='menu-section text-muted text-uppercase fs-8 ls-1'>Apps</span>
|
||||
</div>
|
||||
</div>
|
||||
<SidebarMenuItemWithSub
|
||||
to='/apps/chat'
|
||||
title='Chat'
|
||||
fontIcon='bi-chat-left'
|
||||
icon='message-text-2'
|
||||
>
|
||||
<SidebarMenuItem to='/apps/chat/private-chat' title='Private Chat' hasBullet={true} />
|
||||
<SidebarMenuItem to='/apps/chat/group-chat' title='Group Chart' hasBullet={true} />
|
||||
<SidebarMenuItem to='/apps/chat/drawer-chat' title='Drawer Chart' hasBullet={true} />
|
||||
</SidebarMenuItemWithSub>
|
||||
<SidebarMenuItem
|
||||
to='/apps/user-management/users'
|
||||
icon='abstract-28'
|
||||
title='User management'
|
||||
fontIcon='bi-layers'
|
||||
/>
|
||||
{/*<div className='menu-item'>*/}
|
||||
{/* <a*/}
|
||||
{/* target='_blank'*/}
|
||||
{/* className='menu-link'*/}
|
||||
{/* href={import.meta.env.VITE_APP_PREVIEW_DOCS_URL + '/changelog'}*/}
|
||||
{/* >*/}
|
||||
{/* <span className='menu-icon'>*/}
|
||||
{/* <KTIcon iconName='code' className='fs-2' />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span className='menu-title'>Changelog {import.meta.env.VITE_APP_VERSION}</span>*/}
|
||||
{/* </a>*/}
|
||||
{/*</div>*/}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {SidebarMenuMain}
|
||||
Reference in New Issue
Block a user