sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: generate CSidebarNav throught CRenderFunction component

Browse Source
This commit is contained in:
woothu
2019-09-02 12:18:47 +02:00
parent 125b74ef24
commit 3b4d9d0786
2 changed files with 498 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheSidebar.vue
+17 -6
View File
@@ -2,13 +2,15 @@
<CSidebar
fixed
:minimize="minimize"
dropdownBehaviors="closeOnInactiveRoute"
>
<CSidebarHeader/>
<CSidebarForm/>
<CSidebarNav :nav-items="computedNav"/>
<CRenderFunction :contentToRender="navItems"/>
<CSidebarFooter/>
<CSidebarMinimizer @click.native="minimize = !minimize"/>
<CSidebarMinimizer
class="c-d-md-down-none"
@click.native="minimize = !minimize"
/>
</CSidebar>
</template>
@@ -18,12 +20,21 @@ export default {
name: 'TheSidebar',
data () {
return {
minimize: false
minimize: false,
icon: 'cui-speedometer',
counter: 0
}
},
computed: {
computedNav () {
return nav.items.filter(item => item.name !== 'Dashboard')
navItems () {
return nav.map(parentElement => {
if (Array.isArray(parentElement)) {
return parentElement.filter(item => {
return !JSON.stringify(item).includes('Dashboard')
})
}
return parentElement
})
}
}
}
src/containers/_nav.js
+390 -166
View File
@@ -1,264 +1,488 @@
export default {
items: [
export default [
'CSidebarNav',
[
[
'CSidebarNavLink',
{
props: {
name: 'Dashboard',
url: '/dashboard',
to: '/dashboard',
icon: 'cui-speedometer',
badge: {
variant: 'primary',
text: 'NEW'
textHtml: 'NEW'
}
},
}
}
],
[
'CSidebarNavTitle',
{
title: true,
props: {
name: 'Theme',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Colors',
url: '/theme/colors',
to: '/theme/colors',
icon: 'cui-drop'
},
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Typography',
url: '/theme/typography',
to: '/theme/typography',
icon: 'cui-pencil'
},
}
}
],
[
'CSidebarNavTitle',
{
title: true,
props: {
name: 'Components',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Base',
route: '/base',
icon: 'cui-puzzle',
children: [
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Breadcrumbs',
url: '/base/breadcrumbs',
icon: 'cui-puzzle'
},
{
name: 'Cards',
url: '/base/cards',
icon: 'cui-puzzle'
},
{
name: 'Carousels',
url: '/base/carousels',
icon: 'cui-puzzle'
},
{
name: 'Collapses',
url: '/base/collapses',
icon: 'cui-puzzle'
},
{
name: 'Forms',
url: '/base/forms',
icon: 'cui-puzzle'
},
{
name: 'Jumbotrons',
url: '/base/jumbotrons',
icon: 'cui-puzzle'
},
{
name: 'List Groups',
url: '/base/list-groups',
icon: 'cui-puzzle'
},
{
name: 'Navs',
url: '/base/navs',
icon: 'cui-puzzle'
},
{
name: 'Navbars',
url: '/base/navbars',
icon: 'cui-puzzle'
},
{
name: 'Paginations',
url: '/base/paginations',
icon: 'cui-puzzle'
},
{
name: 'Popovers',
url: '/base/popovers',
icon: 'cui-puzzle'
},
{
name: 'Progress Bars',
url: '/base/progress-bars',
icon: 'cui-puzzle'
},
{
name: 'Switches',
url: '/base/switches',
icon: 'cui-puzzle'
},
{
name: 'Tables',
url: '/base/tables',
icon: 'cui-puzzle'
},
{
name: 'Tabs',
url: '/base/tabs',
icon: 'cui-puzzle'
},
{
name: 'Tooltips',
url: '/base/tooltips',
to: '/base/breadcrumbs',
icon: 'cui-puzzle'
}
]
},
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Cards',
to: '/base/cards',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Carousels',
to: '/base/carousels',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Collapses',
to: '/base/collapses',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Forms',
to: '/base/forms',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Jumbotrons',
to: '/base/jumbotrons',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'List Groups',
to: '/base/list-groups',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Navs',
to: '/base/navs',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Navbars',
to: '/base/navbars',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Paginations',
to: '/base/paginations',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Popovers',
to: '/base/popovers',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Progress Bars',
to: '/base/progress-bars',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Switches',
to: '/base/switches',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Tables',
to: '/base/tables',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Tabs',
to: '/base/tabs',
icon: 'cui-puzzle'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Tooltips',
to: '/base/tooltips',
icon: 'cui-puzzle'
}
}
]
]
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Buttons',
route: '/buttons',
icon: 'cui-cursor',
children: [
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Buttons',
url: '/buttons/standard-buttons',
icon: 'cui-cursor'
},
{
name: 'Button Dropdowns',
url: '/buttons/dropdowns',
icon: 'cui-cursor'
},
{
name: 'Button Groups',
url: '/buttons/button-groups',
icon: 'cui-cursor'
},
{
name: 'Brand Buttons',
url: '/buttons/brand-buttons',
to: '/buttons/standard-buttons',
icon: 'cui-cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cui-cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cui-cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cui-cursor'
}
}
]
},
]
],
[
'CSidebarNavLink',
{
props: {
name: 'Charts',
url: '/charts',
to: '/charts',
icon: 'cui-pie-chart'
},
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Icons',
route: '/icons',
icon: 'cui-star',
children: [
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'CoreUI Icons',
url: '/icons/coreui-icons',
to: '/icons/coreui-icons',
icon: 'cui-star',
badge: {
variant: 'info',
text: 'NEW'
textHtml: 'NEW'
}
},
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brands',
url: '/icons/brands',
to: '/icons/brands',
icon: 'cui-star'
},
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Flags',
url: '/icons/flags',
to: '/icons/flags',
icon: 'cui-star'
}
}
]
},
]
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Notifications',
route: '/notifications',
icon: 'cui-bell',
children: [
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Alerts',
url: '/notifications/alerts',
icon: 'cui-bell'
},
{
name: 'Badges',
url: '/notifications/badges',
icon: 'cui-bell'
},
{
name: 'Modals',
url: '/notifications/modals',
to: '/notifications/alerts',
icon: 'cui-bell'
}
]
},
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Badges',
to: '/notifications/badges',
icon: 'cui-bell'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Modals',
to: '/notifications/modals',
icon: 'cui-bell'
}
}
]
]
],
[
'CSidebarNavLink',
{
props: {
name: 'Widgets',
url: '/widgets',
to: '/widgets',
icon: 'cui-calculator',
badge: {
variant: 'primary',
text: 'NEW'
textHtml: 'NEW',
pill: true
}
},
}
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
{
divider: true
},
{
title: true,
props: {
name: 'Extras'
},
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Pages',
route: '/pages',
icon: 'cui-star',
children: [
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Login',
url: '/pages/login',
icon: 'cui-star'
},
{
name: 'Register',
url: '/pages/register',
icon: 'cui-star'
},
{
name: 'Error 404',
url: '/pages/404',
icon: 'cui-star'
},
{
name: 'Error 500',
url: '/pages/500',
to: '/pages/login',
icon: 'cui-star'
}
]
},
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Register',
to: '/pages/register',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 404',
to: '/pages/404',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 500',
to: '/pages/500',
icon: 'cui-star'
}
}
]
]
],
[
'CSidebarNavLink',
{
props: {
name: 'Download CoreUI',
url: 'http://coreui.io/vue/',
href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download',
class: 'mt-auto',
variant: 'success'
},
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/vue/',
href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
variant: 'danger'
}
]
}
]
]
]