sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
+74 -274
View File
@@ -1,10 +1,9 @@
export default [ export default [
'CSidebarNav',
[
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNav',
_children: [
{
_name: 'CSidebarNavItem',
name: 'Dashboard', name: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: 'speedometer', icon: 'speedometer',
@@ -12,285 +11,156 @@ export default [
color: 'primary', color: 'primary',
text: 'NEW' text: 'NEW'
} }
} },
}
],
[
'CSidebarNavTitle',
['Theme']
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavTitle',
_children: ['Theme']
},
{
_name: 'CSidebarNavItem',
name: 'Colors', name: 'Colors',
to: '/theme/colors', to: '/theme/colors',
icon: 'drop' icon: 'drop'
} },
}
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Typography', name: 'Typography',
to: '/theme/typography', to: '/theme/typography',
icon: 'pencil' icon: 'pencil'
} },
}
],
[
'CSidebarNavTitle',
['Components']
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavTitle',
_children: ['Components']
},
{
_name: 'CSidebarNavDropdown',
name: 'Base', name: 'Base',
route: '/base', route: '/base',
icon: 'puzzle', icon: 'puzzle',
} items: [
},
[
[
'CSidebarNavLink',
{ {
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: [
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Buttons', name: 'Buttons',
to: '/buttons/standard-buttons', to: '/buttons/standard-buttons',
icon: 'cursor' icon: 'cursor'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Button Dropdowns', name: 'Button Dropdowns',
to: '/buttons/dropdowns', to: '/buttons/dropdowns',
icon: 'cursor' icon: 'cursor'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Button Groups', name: 'Button Groups',
to: '/buttons/button-groups', to: '/buttons/button-groups',
icon: 'cursor' icon: 'cursor'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Brand Buttons', name: 'Brand Buttons',
to: '/buttons/brand-buttons', to: '/buttons/brand-buttons',
icon: 'cursor' icon: 'cursor'
} }
}
] ]
] },
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Charts', name: 'Charts',
to: '/charts', to: '/charts',
icon: 'chart-pie' icon: 'chart-pie'
} },
}
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavDropdown',
name: 'Icons', name: 'Icons',
route: '/icons', route: '/icons',
icon: 'star', icon: 'star',
} items: [
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'CoreUI Icons', name: 'CoreUI Icons',
to: '/icons/coreui-icons', to: '/icons/coreui-icons',
icon: 'star', icon: 'star',
@@ -298,77 +168,44 @@ export default [
color: 'info', color: 'info',
text: 'NEW' text: 'NEW'
} }
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Brands', name: 'Brands',
to: '/icons/brands', to: '/icons/brands',
icon: 'star' icon: 'star'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Flags', name: 'Flags',
to: '/icons/flags', to: '/icons/flags',
icon: 'star' icon: 'star'
} }
}
] ]
] },
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavDropdown',
name: 'Notifications', name: 'Notifications',
route: '/notifications', route: '/notifications',
icon: 'bell', icon: 'bell',
} items: [
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Alerts', name: 'Alerts',
to: '/notifications/alerts', to: '/notifications/alerts',
icon: 'bell' icon: 'bell'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Badges', name: 'Badges',
to: '/notifications/badges', to: '/notifications/badges',
icon: 'bell' icon: 'bell'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Modals', name: 'Modals',
to: '/notifications/modals', to: '/notifications/modals',
icon: 'bell' icon: 'bell'
} }
}
] ]
] },
],
[
'CSidebarNavLink',
{ {
props: { _name: 'CSidebarNavItem',
name: 'Widgets', name: 'Widgets',
to: '/widgets', to: '/widgets',
icon: 'calculator', icon: 'calculator',
@@ -377,95 +214,58 @@ export default [
text: 'NEW', text: 'NEW',
shape: 'pill' shape: 'pill'
} }
} },
}
],
[
'CSidebarNavDivider',
],
[
'CSidebarNavTitle',
['Extras']
],
[
'CSidebarNavDropdown',
{ {
props: { _name: 'CSidebarNavDivider'
},
{
_name: 'CSidebarNavTitle',
_children: ['Extras']
},
{
_name: 'CSidebarNavDropdown',
name: 'Pages', name: 'Pages',
route: '/pages', route: '/pages',
icon: 'star', icon: 'star',
} items: [
},
[
[
'CSidebarNavLink',
{ {
props: {
name: 'Login', name: 'Login',
to: '/pages/login', to: '/pages/login',
icon: 'star' icon: 'star'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Register', name: 'Register',
to: '/pages/register', to: '/pages/register',
icon: 'star' icon: 'star'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Error 404', name: 'Error 404',
to: '/pages/404', to: '/pages/404',
icon: 'star' icon: 'star'
} },
}
],
[
'CSidebarNavLink',
{ {
props: {
name: 'Error 500', name: 'Error 500',
to: '/pages/500', to: '/pages/500',
icon: 'star' 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'
} }
]
} }
] ]
]
]