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 <CSidebar
fixed fixed
:minimize="minimize" :minimize="minimize"
dropdownBehaviors="closeOnInactiveRoute"
> >
<CSidebarHeader/> <CSidebarHeader/>
<CSidebarForm/> <CSidebarForm/>
<CSidebarNav :nav-items="computedNav"/> <CRenderFunction :contentToRender="navItems"/>
<CSidebarFooter/> <CSidebarFooter/>
<CSidebarMinimizer @click.native="minimize = !minimize"/> <CSidebarMinimizer
class="c-d-md-down-none"
@click.native="minimize = !minimize"
/>
</CSidebar> </CSidebar>
</template> </template>
@@ -18,12 +20,21 @@ export default {
name: 'TheSidebar', name: 'TheSidebar',
data () { data () {
return { return {
minimize: false minimize: false,
icon: 'cui-speedometer',
counter: 0
} }
}, },
computed: { computed: {
computedNav () { navItems () {
return nav.items.filter(item => item.name !== 'Dashboard') return nav.map(parentElement => {
if (Array.isArray(parentElement)) {
return parentElement.filter(item => {
return !JSON.stringify(item).includes('Dashboard')
})
}
return parentElement
})
} }
} }
} }
src/containers/_nav.js
+481 -257
View File
@@ -1,264 +1,488 @@
export default { export default [
items: [ 'CSidebarNav',
{ [
name: 'Dashboard', [
url: '/dashboard', 'CSidebarNavLink',
icon: 'cui-speedometer', {
badge: { props: {
variant: 'primary', name: 'Dashboard',
text: 'NEW' to: '/dashboard',
} icon: 'cui-speedometer',
},
{
title: true,
name: 'Theme',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
{
name: 'Colors',
url: '/theme/colors',
icon: 'cui-drop'
},
{
name: 'Typography',
url: '/theme/typography',
icon: 'cui-pencil'
},
{
title: true,
name: 'Components',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
{
name: 'Base',
route: '/base',
icon: 'cui-puzzle',
children: [
{
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',
icon: 'cui-puzzle'
}
]
},
{
name: 'Buttons',
route: '/buttons',
icon: 'cui-cursor',
children: [
{
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',
icon: 'cui-cursor'
}
]
},
{
name: 'Charts',
url: '/charts',
icon: 'cui-pie-chart'
},
{
name: 'Icons',
route: '/icons',
icon: 'cui-star',
children: [
{
name: 'CoreUI Icons',
url: '/icons/coreui-icons',
icon: 'cui-star',
badge: { badge: {
variant: 'info', variant: 'primary',
text: 'NEW' textHtml: 'NEW'
} }
},
{
name: 'Brands',
url: '/icons/brands',
icon: 'cui-star'
},
{
name: 'Flags',
url: '/icons/flags',
icon: 'cui-star'
} }
]
},
{
name: 'Notifications',
route: '/notifications',
icon: 'cui-bell',
children: [
{
name: 'Alerts',
url: '/notifications/alerts',
icon: 'cui-bell'
},
{
name: 'Badges',
url: '/notifications/badges',
icon: 'cui-bell'
},
{
name: 'Modals',
url: '/notifications/modals',
icon: 'cui-bell'
}
]
},
{
name: 'Widgets',
url: '/widgets',
icon: 'cui-calculator',
badge: {
variant: 'primary',
text: 'NEW'
} }
}, ],
{ [
divider: true 'CSidebarNavTitle',
}, {
{ props: {
title: true, name: 'Theme',
name: 'Extras' class: '',
}, wrapper: {
{ element: '',
name: 'Pages', attributes: {}
route: '/pages', }
icon: 'cui-star',
children: [
{
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',
icon: 'cui-star'
} }
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Colors',
to: '/theme/colors',
icon: 'cui-drop'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Typography',
to: '/theme/typography',
icon: 'cui-pencil'
}
}
],
[
'CSidebarNavTitle',
{
props: {
name: 'Components',
wrapper: {
element: '',
attributes: {}
}
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Base',
route: '/base',
icon: 'cui-puzzle',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Breadcrumbs',
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'
}
}
]
] ]
}, ],
{ [
name: 'Download CoreUI', 'CSidebarNavDropdown',
url: 'http://coreui.io/vue/', {
icon: 'cui-cloud-download', props: {
class: 'mt-auto', name: 'Buttons',
variant: 'success' route: '/buttons',
}, icon: 'cui-cursor',
{ }
name: 'Try CoreUI PRO', },
url: 'http://coreui.io/pro/vue/', [
icon: 'cui-layers', [
variant: 'danger' 'CSidebarNavLink',
} {
props: {
name: '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',
to: '/charts',
icon: 'cui-pie-chart'
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Icons',
route: '/icons',
icon: 'cui-star',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'cui-star',
badge: {
variant: 'info',
textHtml: 'NEW'
}
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brands',
to: '/icons/brands',
icon: 'cui-star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Flags',
to: '/icons/flags',
icon: 'cui-star'
}
}
]
]
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Notifications',
route: '/notifications',
icon: 'cui-bell',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Alerts',
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',
to: '/widgets',
icon: 'cui-calculator',
badge: {
variant: 'primary',
textHtml: 'NEW',
pill: true
}
}
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
{
props: {
name: 'Extras'
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Pages',
route: '/pages',
icon: 'cui-star',
}
},
[
[
'CSidebarNavLink',
{
props: {
name: 'Login',
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',
href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download',
class: 'mt-auto',
variant: 'success'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
variant: 'danger'
}
}
]
] ]
} ]