gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate to CoreUI v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-02-16 02:15:27 +01:00
parent e484c60e6f
commit 76da5c50a7
2 changed files with 255 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/containers/TheSidebar.js
View File

@ -1,18 +1,19 @@
import React from 'react' import React from 'react'
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { import {
CCreateElement, // CCreateElement,
CSidebarNavDivider, // CSidebarNavDivider,
CSidebarNavTitle, // CSidebarNavTitle,
CSidebarMinimizer, CSidebarMinimizer,
CSidebarNavDropdown, // CSidebarNavDropdown,
CSidebarNavItem, // CSidebarNavItem,
} from '@coreui/react' } from '@coreui/react'
import { import {
CSidebar, CSidebar,
CSidebarBrand, CSidebarBrand,
CSidebarNav, CSidebarNav,
CSidebarNavGenerator,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
@ -43,14 +44,14 @@ const TheSidebar = () => {
</CSidebarBrand> </CSidebarBrand>
<CSidebarNav> <CSidebarNav>
<CCreateElement <CSidebarNavGenerator
items={navigation} items={navigation}
components={{ // components={{
CSidebarNavDivider, // CSidebarNavDivider,
CSidebarNavDropdown, // CSidebarNavDropdown,
CSidebarNavItem, // CSidebarNavItem,
CSidebarNavTitle // CSidebarNavTitle
}} // }}
/> />
</CSidebarNav> </CSidebarNav>
<CSidebarMinimizer className="c-d-md-down-none"/> <CSidebarMinimizer className="c-d-md-down-none"/>

478
src/containers/_nav.js
View File

@ -1,10 +1,12 @@
import React from 'react' import React from 'react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { NavLink } from "react-router-dom";
const _nav = [ const _nav = [
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Dashboard', as: NavLink,
anchorText: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>, icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: { badge: {
@ -12,301 +14,305 @@ const _nav = [
text: 'NEW', text: 'NEW',
} }
}, },
// {
// _component: 'CSidebarNavTitle',
// items: ['Theme']
// },
{ {
_tag: 'CSidebarNavTitle', _component: 'CNavItem',
_children: ['Theme'] as: NavLink,
}, anchorText: 'Colors',
{
_tag: 'CSidebarNavItem',
name: 'Colors',
to: '/theme/colors', to: '/theme/colors',
icon: 'cil-drop', icon: 'cil-drop',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Typography', as: NavLink,
anchorText: 'Typography',
to: '/theme/typography', to: '/theme/typography',
icon: 'cil-pencil', icon: 'cil-pencil',
}, },
// {
// _component: 'CSidebarNavTitle',
// items: ['Components']
// },
{ {
_tag: 'CSidebarNavTitle', _component: 'CNavGroup',
_children: ['Components'] anchorText: 'Base',
},
{
_tag: 'CSidebarNavDropdown',
name: 'Base',
route: '/base', route: '/base',
icon: 'cil-puzzle', icon: 'cil-puzzle',
_children: [ items: [
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Breadcrumb', as: NavLink,
anchorText: 'Breadcrumb',
to: '/base/breadcrumbs', to: '/base/breadcrumbs',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Cards', as: NavLink,
anchorText: 'Cards',
to: '/base/cards', to: '/base/cards',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Carousel', anchorText: 'Carousel',
to: '/base/carousels', to: '/base/carousels',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Collapse', anchorText: 'Collapse',
to: '/base/collapses', to: '/base/collapses',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Forms', anchorText: 'Forms',
to: '/base/forms', to: '/base/forms',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Jumbotron', anchorText: 'Jumbotron',
to: '/base/jumbotrons', to: '/base/jumbotrons',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'List group', anchorText: 'List group',
to: '/base/list-groups', to: '/base/list-groups',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Navs', anchorText: 'Navs',
to: '/base/navs', to: '/base/navs',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Navbars', anchorText: 'Navbars',
to: '/base/navbars', to: '/base/navbars',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Pagination', anchorText: 'Pagination',
to: '/base/paginations', to: '/base/paginations',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Popovers', anchorText: 'Popovers',
to: '/base/popovers', to: '/base/popovers',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Progress', anchorText: 'Progress',
to: '/base/progress-bar', to: '/base/progress-bar',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Switches', anchorText: 'Switches',
to: '/base/switches', to: '/base/switches',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Tables', anchorText: 'Tables',
to: '/base/tables', to: '/base/tables',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Tabs', anchorText: 'Tabs',
to: '/base/tabs', to: '/base/tabs',
}, },
{ {
_tag: 'CSidebarNavItem', _component: 'CNavItem',
name: 'Tooltips', anchorText: 'Tooltips',
to: '/base/tooltips', to: '/base/tooltips',
}, },
], ],
}, },
{ // {
_tag: 'CSidebarNavDropdown', // _component: 'CNavGroup',
name: 'Buttons', // anchorText: 'Buttons',
route: '/buttons', // route: '/buttons',
icon: 'cil-cursor', // icon: 'cil-cursor',
_children: [ // items: [
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Buttons', // anchorText: 'Buttons',
to: '/buttons/buttons', // to: '/buttons/buttons',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Brand buttons', // anchorText: 'Brand buttons',
to: '/buttons/brand-buttons', // to: '/buttons/brand-buttons',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Buttons groups', // anchorText: 'Buttons groups',
to: '/buttons/button-groups', // to: '/buttons/button-groups',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Dropdowns', // anchorText: 'Dropdowns',
to: '/buttons/button-dropdowns', // to: '/buttons/button-dropdowns',
} // }
], // ],
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Charts', // anchorText: 'Charts',
to: '/charts', // to: '/charts',
icon: 'cil-chart-pie' // icon: 'cil-chart-pie'
}, // },
{ // {
_tag: 'CSidebarNavDropdown', // _component: 'CNavGroup',
name: 'Icons', // anchorText: 'Icons',
route: '/icons', // route: '/icons',
icon: 'cil-star', // icon: 'cil-star',
_children: [ // items: [
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'CoreUI Free', // anchorText: 'CoreUI Free',
to: '/icons/coreui-icons', // to: '/icons/coreui-icons',
badge: { // badge: {
color: 'success', // color: 'success',
text: 'NEW', // text: 'NEW',
}, // },
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'CoreUI Flags', // anchorText: 'CoreUI Flags',
to: '/icons/flags', // to: '/icons/flags',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'CoreUI Brands', // anchorText: 'CoreUI Brands',
to: '/icons/brands', // to: '/icons/brands',
}, // },
], // ],
}, // },
{ // {
_tag: 'CSidebarNavDropdown', // _component: 'CNavGroup',
name: 'Notifications', // anchorText: 'Notifications',
route: '/notifications', // route: '/notifications',
icon: 'cil-bell', // icon: 'cil-bell',
_children: [ // items: [
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Alerts', // anchorText: 'Alerts',
to: '/notifications/alerts', // to: '/notifications/alerts',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Badges', // anchorText: 'Badges',
to: '/notifications/badges', // to: '/notifications/badges',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Modal', // anchorText: 'Modal',
to: '/notifications/modals', // to: '/notifications/modals',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Toaster', // anchorText: 'Toaster',
to: '/notifications/toaster' // to: '/notifications/toaster'
} // }
] // ]
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Widgets', // anchorText: 'Widgets',
to: '/widgets', // to: '/widgets',
icon: 'cil-calculator', // icon: 'cil-calculator',
badge: { // badge: {
color: 'info', // color: 'info',
text: 'NEW', // text: 'NEW',
}, // },
}, // },
{ // {
_tag: 'CSidebarNavDivider' // _component: 'CSidebarNavDivider'
}, // },
{ // {
_tag: 'CSidebarNavTitle', // _component: 'CSidebarNavTitle',
_children: ['Extras'], // items: ['Extras'],
}, // },
{ // {
_tag: 'CSidebarNavDropdown', // _component: 'CNavGroup',
name: 'Pages', // anchorText: 'Pages',
route: '/pages', // route: '/pages',
icon: 'cil-star', // icon: 'cil-star',
_children: [ // items: [
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Login', // anchorText: 'Login',
to: '/login', // to: '/login',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Register', // anchorText: 'Register',
to: '/register', // to: '/register',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Error 404', // anchorText: 'Error 404',
to: '/404', // to: '/404',
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Error 500', // anchorText: 'Error 500',
to: '/500', // to: '/500',
}, // },
], // ],
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Disabled', // anchorText: 'Disabled',
icon: 'cil-ban', // icon: 'cil-ban',
badge: { // badge: {
color: 'secondary', // color: 'secondary',
text: 'NEW', // text: 'NEW',
}, // },
addLinkClass: 'c-disabled', // addLinkClass: 'c-disabled',
'disabled': true // 'disabled': true
}, // },
{ // {
_tag: 'CSidebarNavDivider', // _component: 'CSidebarNavDivider',
className: 'm-2' // classanchorText: 'm-2'
}, // },
{ // {
_tag: 'CSidebarNavTitle', // _component: 'CSidebarNavTitle',
_children: ['Labels'] // items: ['Labels']
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Label danger', // anchorText: 'Label danger',
to: '', // to: '',
icon: { // icon: {
name: 'cil-star', // anchorText: 'cil-star',
className: 'text-danger' // classanchorText: 'text-danger'
}, // },
label: true // label: true
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Label info', // anchorText: 'Label info',
to: '', // to: '',
icon: { // icon: {
name: 'cil-star', // anchorText: 'cil-star',
className: 'text-info' // classanchorText: 'text-info'
}, // },
label: true // label: true
}, // },
{ // {
_tag: 'CSidebarNavItem', // _component: 'CNavItem',
name: 'Label warning', // anchorText: 'Label warning',
to: '', // to: '',
icon: { // icon: {
name: 'cil-star', // anchorText: 'cil-star',
className: 'text-warning' // classanchorText: 'text-warning'
}, // },
label: true // label: true
}, // },
{ // {
_tag: 'CSidebarNavDivider', // _component: 'CSidebarNavDivider',
className: 'm-2' // classanchorText: 'm-2'
} // }
] ]
export default _nav export default _nav