refactor: improve syntax
This commit is contained in:
Łukasz Holeczek
parent
7108efcc88
commit
0823068f3c
132
src/_nav.js
132
src/_nav.js
@ -12,10 +12,11 @@ import {
|
||||
cilSpeedometer,
|
||||
cilStar,
|
||||
} from '@coreui/icons'
|
||||
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
|
||||
|
||||
const _nav = [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Dashboard',
|
||||
to: '/dashboard',
|
||||
icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
|
||||
@ -25,204 +26,181 @@ const _nav = [
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'CNavTitle',
|
||||
component: CNavTitle,
|
||||
name: 'Theme',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Colors',
|
||||
to: '/theme/colors',
|
||||
icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Typography',
|
||||
to: '/theme/typography',
|
||||
icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
component: 'CNavTitle',
|
||||
component: CNavTitle,
|
||||
name: 'Components',
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
component: CNavGroup,
|
||||
name: 'Base',
|
||||
to: '/base',
|
||||
icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Accordion',
|
||||
to: '/base/accordion',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Breadcrumb',
|
||||
to: '/base/breadcrumbs',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Cards',
|
||||
to: '/base/cards',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Carousel',
|
||||
to: '/base/carousels',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Collapse',
|
||||
to: '/base/collapses',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'List group',
|
||||
to: '/base/list-groups',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Navs & Tabs',
|
||||
to: '/base/navs',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Pagination',
|
||||
to: '/base/paginations',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Popovers',
|
||||
to: '/base/popovers',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Progress',
|
||||
to: '/base/progress',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Spinners',
|
||||
to: '/base/spinners',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Tables',
|
||||
to: '/base/tables',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Tooltips',
|
||||
to: '/base/tooltips',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
component: CNavGroup,
|
||||
name: 'Buttons',
|
||||
to: '/buttons',
|
||||
icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Buttons',
|
||||
to: '/buttons/buttons',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Buttons groups',
|
||||
to: '/buttons/button-groups',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Dropdowns',
|
||||
to: '/buttons/dropdowns',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
component: CNavGroup,
|
||||
name: 'Forms',
|
||||
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Form Control',
|
||||
to: '/forms/form-control',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Select',
|
||||
to: '/forms/select',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Checks & Radios',
|
||||
to: '/forms/checks-radios',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Range',
|
||||
to: '/forms/range',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Input Group',
|
||||
to: '/forms/input-group',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Floating Labels',
|
||||
to: '/forms/floating-labels',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Layout',
|
||||
to: '/forms/layout',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Validation',
|
||||
to: '/forms/validation',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Charts',
|
||||
to: '/charts',
|
||||
icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
component: CNavGroup,
|
||||
name: 'Icons',
|
||||
icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'CoreUI Free',
|
||||
to: '/icons/coreui-icons',
|
||||
badge: {
|
||||
@ -231,52 +209,46 @@ const _nav = [
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'CoreUI Flags',
|
||||
to: '/icons/flags',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'CoreUI Brands',
|
||||
to: '/icons/brands',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
component: CNavGroup,
|
||||
name: 'Notifications',
|
||||
icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Alerts',
|
||||
to: '/notifications/alerts',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Badges',
|
||||
to: '/notifications/badges',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Modal',
|
||||
to: '/notifications/modals',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Toasts',
|
||||
to: '/notifications/toasts',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
component: CNavItem,
|
||||
name: 'Widgets',
|
||||
to: '/widgets',
|
||||
icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
|
||||
@ -286,35 +258,31 @@ const _nav = [
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'CNavTitle',
|
||||
component: CNavTitle,
|
||||
name: 'Extras',
|
||||
},
|
||||
{
|
||||
component: 'CNavGroup',
|
||||
component: CNavGroup,
|
||||
name: 'Pages',
|
||||
icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Login',
|
||||
to: '/login',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Register',
|
||||
to: '/register',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Error 404',
|
||||
to: '/404',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
|
||||
component: CNavItem,
|
||||
name: 'Error 500',
|
||||
to: '/500',
|
||||
},
|
||||
|
||||
@ -2,12 +2,10 @@ import React from 'react'
|
||||
import { NavLink, useLocation } from 'react-router-dom'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import { CBadge, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle } from '@coreui/react'
|
||||
import { CBadge } from '@coreui/react'
|
||||
|
||||
export const AppSidebarNav = ({ items }) => {
|
||||
const components = { CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }
|
||||
const location = useLocation()
|
||||
|
||||
const navLink = (name, icon, badge) => {
|
||||
return (
|
||||
<>
|
||||
@ -24,13 +22,14 @@ export const AppSidebarNav = ({ items }) => {
|
||||
|
||||
const navItem = (item, index) => {
|
||||
const { component, name, badge, icon, ...rest } = item
|
||||
const Component = components[component] || component
|
||||
const Component = component
|
||||
return (
|
||||
<Component
|
||||
{...(component === 'CNavItem' && {
|
||||
component: NavLink,
|
||||
activeClassName: 'active',
|
||||
})}
|
||||
{...(rest.to &&
|
||||
!rest.items && {
|
||||
component: NavLink,
|
||||
activeClassName: 'active',
|
||||
})}
|
||||
key={index}
|
||||
{...rest}
|
||||
>
|
||||
@ -39,17 +38,17 @@ export const AppSidebarNav = ({ items }) => {
|
||||
)
|
||||
}
|
||||
const navGroup = (item, index) => {
|
||||
const { component, name, icon, items, to, ...rest } = item
|
||||
const Component = components[component] || component
|
||||
const { component, name, icon, to, ...rest } = item
|
||||
const Component = component
|
||||
return (
|
||||
<Component
|
||||
toggler={navLink(name, icon)}
|
||||
visible={location.pathname.startsWith(to)}
|
||||
idx={String(index)}
|
||||
key={index}
|
||||
toggler={navLink(name, icon)}
|
||||
visible={location.pathname.startsWith(to)}
|
||||
{...rest}
|
||||
>
|
||||
{item.items.map((item, index) =>
|
||||
{item.items?.map((item, index) =>
|
||||
item.items ? navGroup(item, index) : navItem(item, index),
|
||||
)}
|
||||
</Component>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react'
|
||||
|
||||
// examples
|
||||
|
||||
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
|
||||
const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
|
||||
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
|
||||
|
||||
// Base
|
||||
const Accordion = React.lazy(() => import('./views/components/base/accordion/Accordion'))
|
||||
const Breadcrumbs = React.lazy(() => import('./views/components/base/breadcrumbs/Breadcrumbs'))
|
||||
const Cards = React.lazy(() => import('./views/components/base/cards/Cards'))
|
||||
@ -19,12 +19,14 @@ const Spinners = React.lazy(() => import('./views/components/base/spinners/Spinn
|
||||
const Tables = React.lazy(() => import('./views/components/base/tables/Tables'))
|
||||
const Tooltips = React.lazy(() => import('./views/components/base/tooltips/Tooltips'))
|
||||
|
||||
// Buttons
|
||||
const Buttons = React.lazy(() => import('./views/components/buttons/buttons/Buttons'))
|
||||
const ButtonGroups = React.lazy(() =>
|
||||
import('./views/components/buttons/button-groups/ButtonGroups'),
|
||||
)
|
||||
const Dropdowns = React.lazy(() => import('./views/components/buttons/dropdowns/Dropdowns'))
|
||||
|
||||
//Forms
|
||||
const ChecksRadios = React.lazy(() => import('./views/components/forms/checks-radios/ChecksRadios'))
|
||||
const FloatingLabels = React.lazy(() =>
|
||||
import('./views/components/forms/floating-labels/FloatingLabels'),
|
||||
@ -36,25 +38,21 @@ const Range = React.lazy(() => import('./views/components/forms/range/Range'))
|
||||
const Select = React.lazy(() => import('./views/components/forms/select/Select'))
|
||||
const Validation = React.lazy(() => import('./views/components/forms/validation/Validation'))
|
||||
|
||||
const Charts = React.lazy(() => import('./views/components/charts/Charts'))
|
||||
|
||||
// Icons
|
||||
const CoreUIIcons = React.lazy(() => import('./views/components/icons/coreui-icons/CoreUIIcons'))
|
||||
const Flags = React.lazy(() => import('./views/components/icons/flags/Flags'))
|
||||
const Brands = React.lazy(() => import('./views/components/icons/brands/Brands'))
|
||||
|
||||
// Notifications
|
||||
const Alerts = React.lazy(() => import('./views/components/notifications/alerts/Alerts'))
|
||||
const Badges = React.lazy(() => import('./views/components/notifications/badges/Badges'))
|
||||
const Modals = React.lazy(() => import('./views/components/notifications/modals/Modals'))
|
||||
const Toasts = React.lazy(() => import('./views/components/notifications/toasts/Toasts'))
|
||||
|
||||
// const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
|
||||
// const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
|
||||
// const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
|
||||
// const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
|
||||
|
||||
const Widgets = React.lazy(() => import('./views/components/widgets/Widgets'))
|
||||
|
||||
const Charts = React.lazy(() => import('./views/components/charts/Charts'))
|
||||
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
|
||||
|
||||
const routes = [
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
|
||||
@ -98,10 +96,6 @@ const routes = [
|
||||
{ path: '/notifications/badges', name: 'Badges', component: Badges },
|
||||
{ path: '/notifications/modals', name: 'Modals', component: Modals },
|
||||
{ path: '/notifications/toasts', name: 'Toasts', component: Toasts },
|
||||
// { path: '/login', name: 'Login', component: Login },
|
||||
// { path: '/register', name: 'Register', component: Register },
|
||||
// { path: '/404', name: '404', component: Page404 },
|
||||
// { path: '/500', name: '500', component: Page500 },
|
||||
{ path: '/widgets', name: 'Widgets', component: Widgets },
|
||||
]
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user