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

refactor: change sidebar nav generation to flat structure

Browse Source
This commit is contained in:
woothu
2019-11-14 13:55:00 +01:00
parent 70058e8c29
commit 760dc7ba79
2 changed files with 236 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheSidebar.vue
+2 -4
View File
@@ -9,10 +9,7 @@
:imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}" :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
:wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}" :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
/> />
<!-- <CSidebarHeader/> --> <CRenderFunction flat :content-to-render="nav"/>
<!-- <CSidebarForm/> -->
<CRenderFunction :contentToRender="nav"/>
<!-- <CSidebarFooter/> -->
<CSidebarMinimizer <CSidebarMinimizer
class="d-md-down-none" class="d-md-down-none"
@click.native="minimize = !minimize" @click.native="minimize = !minimize"
@@ -22,6 +19,7 @@
<script> <script>
import nav from './_nav' import nav from './_nav'
export default { export default {
name: 'TheSidebar', name: 'TheSidebar',
data () { data () {
src/containers/_nav.js
+231 -431
View File
@@ -1,471 +1,271 @@
export default [ export default [
'CSidebarNav', {
[ _name: 'CSidebarNav',
[ _children: [
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Dashboard', name: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: 'speedometer', icon: 'speedometer',
badge: { badge: {
color: 'primary', color: 'primary',
text: 'NEW' text: 'NEW'
}
}
}
],
[
'CSidebarNavTitle',
['Theme']
],
[
'CSidebarNavLink',
{
props: {
name: 'Colors',
to: '/theme/colors',
icon: 'drop'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Typography',
to: '/theme/typography',
icon: 'pencil'
}
}
],
[
'CSidebarNavTitle',
['Components']
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Base',
route: '/base',
icon: 'puzzle',
} }
}, },
[ {
[ _name: 'CSidebarNavTitle',
'CSidebarNavLink', _children: ['Theme']
},
{
_name: 'CSidebarNavItem',
name: 'Colors',
to: '/theme/colors',
icon: 'drop'
},
{
_name: 'CSidebarNavItem',
name: 'Typography',
to: '/theme/typography',
icon: 'pencil'
},
{
_name: 'CSidebarNavTitle',
_children: ['Components']
},
{
_name: 'CSidebarNavDropdown',
name: 'Base',
route: '/base',
icon: 'puzzle',
items: [
{ {
props: { name: 'Breadcrumbs',
name: 'Breadcrumbs', to: '/base/breadcrumbs',
to: '/base/breadcrumbs', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Cards',
name: 'Cards', to: '/base/cards',
to: '/base/cards', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Carousels',
name: 'Carousels', to: '/base/carousels',
to: '/base/carousels', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Collapses',
name: 'Collapses', to: '/base/collapses',
to: '/base/collapses', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Forms',
name: 'Forms', to: '/base/forms',
to: '/base/forms', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Jumbotrons',
name: 'Jumbotrons', to: '/base/jumbotrons',
to: '/base/jumbotrons', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'List Groups',
name: 'List Groups', to: '/base/list-groups',
to: '/base/list-groups', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Navs',
name: 'Navs', to: '/base/navs',
to: '/base/navs', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Navbars',
name: 'Navbars', to: '/base/navbars',
to: '/base/navbars', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Paginations',
name: 'Paginations', to: '/base/paginations',
to: '/base/paginations', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Popovers',
name: 'Popovers', to: '/base/popovers',
to: '/base/popovers', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Progress Bars',
name: 'Progress Bars', to: '/base/progress-bars',
to: '/base/progress-bars', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Switches',
name: 'Switches', to: '/base/switches',
to: '/base/switches', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Tables',
name: 'Tables', to: '/base/tables',
to: '/base/tables', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Tabs',
name: 'Tabs', to: '/base/tabs',
to: '/base/tabs', icon: 'puzzle'
icon: 'puzzle' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Tooltips',
name: 'Tooltips', to: '/base/tooltips',
to: '/base/tooltips', icon: 'puzzle'
icon: 'puzzle'
}
} }
] ]
] },
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavDropdown',
name: 'Buttons', name: 'Buttons',
route: '/buttons', route: '/buttons',
icon: 'cursor', icon: 'cursor',
items: [
{
name: 'Buttons',
to: '/buttons/standard-buttons',
icon: 'cursor'
},
{
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cursor'
},
{
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cursor'
},
{
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cursor'
}
]
},
{
_name: 'CSidebarNavItem',
name: 'Charts',
to: '/charts',
icon: 'chart-pie'
},
{
_name: 'CSidebarNavDropdown',
name: 'Icons',
route: '/icons',
icon: 'star',
items: [
{
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'star',
badge: {
color: 'info',
text: 'NEW'
}
},
{
name: 'Brands',
to: '/icons/brands',
icon: 'star'
},
{
name: 'Flags',
to: '/icons/flags',
icon: 'star'
}
]
},
{
_name: 'CSidebarNavDropdown',
name: 'Notifications',
route: '/notifications',
icon: 'bell',
items: [
{
name: 'Alerts',
to: '/notifications/alerts',
icon: 'bell'
},
{
name: 'Badges',
to: '/notifications/badges',
icon: 'bell'
},
{
name: 'Modals',
to: '/notifications/modals',
icon: 'bell'
}
]
},
{
_name: 'CSidebarNavItem',
name: 'Widgets',
to: '/widgets',
icon: 'calculator',
badge: {
color: 'primary',
text: 'NEW',
shape: 'pill'
} }
}, },
[
[
'CSidebarNavLink',
{
props: {
name: 'Buttons',
to: '/buttons/standard-buttons',
icon: 'cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cursor'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cursor'
}
}
]
]
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavDivider'
name: 'Charts',
to: '/charts',
icon: 'chart-pie'
}
}
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Icons',
route: '/icons',
icon: 'star',
}
}, },
[
[
'CSidebarNavLink',
{
props: {
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'star',
badge: {
color: 'info',
text: 'NEW'
}
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Brands',
to: '/icons/brands',
icon: 'star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Flags',
to: '/icons/flags',
icon: 'star'
}
}
]
]
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavTitle',
name: 'Notifications', _children: ['Extras']
route: '/notifications',
icon: 'bell',
}
}, },
[ {
[ _name: 'CSidebarNavDropdown',
'CSidebarNavLink', name: 'Pages',
route: '/pages',
icon: 'star',
items: [
{ {
props: { name: 'Login',
name: 'Alerts', to: '/pages/login',
to: '/notifications/alerts', icon: 'star'
icon: 'bell' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Register',
name: 'Badges', to: '/pages/register',
to: '/notifications/badges', icon: 'star'
icon: 'bell' },
}
}
],
[
'CSidebarNavLink',
{ {
props: { name: 'Error 404',
name: 'Modals', to: '/pages/404',
to: '/notifications/modals', icon: 'star'
icon: 'bell' },
} {
name: 'Error 500',
to: '/pages/500',
icon: 'star'
} }
] ]
]
],
[
'CSidebarNavLink',
{
props: {
name: 'Widgets',
to: '/widgets',
icon: 'calculator',
badge: {
color: 'primary',
text: 'NEW',
shape: 'pill'
}
}
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
['Extras']
],
[
'CSidebarNavDropdown',
{
props: {
name: 'Pages',
route: '/pages',
icon: 'star',
}
}, },
[
[
'CSidebarNavLink',
{
props: {
name: 'Login',
to: '/pages/login',
icon: 'star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Register',
to: '/pages/register',
icon: 'star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 404',
to: '/pages/404',
icon: 'star'
}
}
],
[
'CSidebarNavLink',
{
props: {
name: 'Error 500',
to: '/pages/500',
icon: 'star'
}
}
]
]
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Download CoreUI', name: 'Download CoreUI',
href: 'http://coreui.io/vue/', href: 'http://coreui.io/vue/',
icon: 'cloud-download', icon: { name: 'cloud-download', class: 'text-warning' },
addLinkClasses: 'c-nav-link-success', _class: 'bg-success text-white',
target: '_blank' target: '_blank'
}, },
attrs: {
class: 'mt-auto',
}
}
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Try CoreUI PRO', name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/', href: 'http://coreui.io/pro/vue/',
icon: 'layers', icon: 'layers',
addLinkClasses: 'c-nav-link-danger', _class: 'bg-danger text-white',
target: '_blank' target: '_blank'
}
} }
] ]
] }
] ]