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
+390 -166
View File
@@ -1,264 +1,488 @@
export default { export default [
items: [ 'CSidebarNav',
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Dashboard', name: 'Dashboard',
url: '/dashboard', to: '/dashboard',
icon: 'cui-speedometer', icon: 'cui-speedometer',
badge: { badge: {
variant: 'primary', variant: 'primary',
text: 'NEW' textHtml: 'NEW'
} }
}, }
}
],
[
'CSidebarNavTitle',
{ {
title: true, props: {
name: 'Theme', name: 'Theme',
class: '', class: '',
wrapper: { wrapper: {
element: '', element: '',
attributes: {} attributes: {}
} }
}, }
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Colors', name: 'Colors',
url: '/theme/colors', to: '/theme/colors',
icon: 'cui-drop' icon: 'cui-drop'
}, }
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Typography', name: 'Typography',
url: '/theme/typography', to: '/theme/typography',
icon: 'cui-pencil' icon: 'cui-pencil'
}, }
}
],
[
'CSidebarNavTitle',
{ {
title: true, props: {
name: 'Components', name: 'Components',
class: '',
wrapper: { wrapper: {
element: '', element: '',
attributes: {} attributes: {}
} }
}, }
}
],
[
'CSidebarNavDropdown',
{ {
props: {
name: 'Base', name: 'Base',
route: '/base', route: '/base',
icon: 'cui-puzzle', icon: 'cui-puzzle',
children: [ }
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Breadcrumbs', name: 'Breadcrumbs',
url: '/base/breadcrumbs', to: '/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' 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', name: 'Buttons',
route: '/buttons', route: '/buttons',
icon: 'cui-cursor', icon: 'cui-cursor',
children: [ }
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Buttons', name: 'Buttons',
url: '/buttons/standard-buttons', to: '/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' 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', name: 'Charts',
url: '/charts', to: '/charts',
icon: 'cui-pie-chart' icon: 'cui-pie-chart'
}, }
}
],
[
'CSidebarNavDropdown',
{ {
props: {
name: 'Icons', name: 'Icons',
route: '/icons', route: '/icons',
icon: 'cui-star', icon: 'cui-star',
children: [ }
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'CoreUI Icons', name: 'CoreUI Icons',
url: '/icons/coreui-icons', to: '/icons/coreui-icons',
icon: 'cui-star', icon: 'cui-star',
badge: { badge: {
variant: 'info', variant: 'info',
text: 'NEW' textHtml: 'NEW'
} }
}, }
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Brands', name: 'Brands',
url: '/icons/brands', to: '/icons/brands',
icon: 'cui-star' icon: 'cui-star'
}, }
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Flags', name: 'Flags',
url: '/icons/flags', to: '/icons/flags',
icon: 'cui-star' icon: 'cui-star'
} }
}
] ]
}, ]
],
[
'CSidebarNavDropdown',
{ {
props: {
name: 'Notifications', name: 'Notifications',
route: '/notifications', route: '/notifications',
icon: 'cui-bell', icon: 'cui-bell',
children: [ }
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Alerts', name: 'Alerts',
url: '/notifications/alerts', to: '/notifications/alerts',
icon: 'cui-bell'
},
{
name: 'Badges',
url: '/notifications/badges',
icon: 'cui-bell'
},
{
name: 'Modals',
url: '/notifications/modals',
icon: 'cui-bell' 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', name: 'Widgets',
url: '/widgets', to: '/widgets',
icon: 'cui-calculator', icon: 'cui-calculator',
badge: { badge: {
variant: 'primary', variant: 'primary',
text: 'NEW' textHtml: 'NEW',
pill: true
} }
}, }
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
{ {
divider: true props: {
},
{
title: true,
name: 'Extras' name: 'Extras'
}, }
}
],
[
'CSidebarNavDropdown',
{ {
props: {
name: 'Pages', name: 'Pages',
route: '/pages', route: '/pages',
icon: 'cui-star', icon: 'cui-star',
children: [ }
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Login', name: 'Login',
url: '/pages/login', to: '/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' 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', name: 'Download CoreUI',
url: 'http://coreui.io/vue/', href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download', icon: 'cui-cloud-download',
class: 'mt-auto', class: 'mt-auto',
variant: 'success' variant: 'success'
}, }
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Try CoreUI PRO', name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/vue/', href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers', icon: 'cui-layers',
variant: 'danger' variant: 'danger'
} }
}
] ]
} ]
]