Private GIT

Skip to content
Snippets Groups Projects
Commit f0fa3530 authored by Ridene's avatar Ridene
Browse files

feat(menu): map first level with api

parent 81e39eb0
No related branches found
No related tags found
No related merge requests found
......@@ -72,49 +72,75 @@ const Nav = (
onChange={handleChange}
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
>
<Tab disableRipple
icon={<HomeIcon viewBox="6 156 600 600" className={classes.navIcons}/>}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
icon={<MonitoringIcon viewBox="0 0 600 600"/>}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
icon={<ReportingIcon viewBox="0 0 600 600"/>}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
icon={<ConfigurationIcon viewBox="0 0 600 600"/>}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
icon={<AdministrationIcon viewBox="6 156 600 600"/>}
{
Object.keys(items).map((item) => {
const Components = {
'Home': {
component: HomeIcon,
viewBox: '6 156 600 600',
className: classes.navIcons
},
'Monitoring': {
component: MonitoringIcon,
viewBox: '0 0 600 600',
className: null
},
'Reporting': {
component: ReportingIcon,
viewBox: '0 0 600 600',
className: null
},
'Configuration': {
component: ConfigurationIcon,
viewBox: '0 0 600 600',
className: null
},
'Administration': {
component: AdministrationIcon,
viewBox: '6 156 600 600',
className: null
},
}
const i = items[item]
const Icon = Components[i.label].component || HomeIcon
return (
<Tab disableRipple key={item}
icon={<Icon viewBox={Components[i.label].viewBox} className={Components[i.label].className} />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
)
}
)
}
</Tabs>
{
items.map((item, index) => {
if(value === index) {
Object.keys(items).map((item, index) => {
console.log(items[item].children)
/*if(value === index) {
item.children.map((secondItem, i) => {
console.log('1',secondItem)
return (
<div className={classes.wrapper} key={index}>
<div className={classes.wrapper}>
<div className={classes.secondLevel} key={index} style={{ backgroundColor: item.color }}>
{
item.children.map((secondItem, i) => {
return <SecondLevel
<SecondLevel
key={i}
id={i}
item={secondItem}
open={open}
/>
})
}
</div>
</div>
)
}
})
}*/
})
}
<div className={classes.secondLevel} key={1} style={{ backgroundColor: '#009FDF' }}>
hello
</div>
</div>
)
......
......@@ -31,11 +31,14 @@ class NavContainer extends Component {
const { data, dataFetched } = this.props.nav
if (dataFetched) {
const key = data.reduce((acc, item) => {
if (item.active) acc = item.key
//console.log(this.props.nav)
const key = Object.keys(data).reduce((acc, item) => {
if (data[item].active) acc = item.key
return acc
},0)
const activeItemKey = value !== key ? key : value
return <Nav
value={value}
items={data}
......
......@@ -20,7 +20,7 @@ export default function navReducer (
isFetching: true,
}
case REQUEST_NAV_ITEMS_SUCCESS:
const color = ['#00A499', '#84BD00', '#E98F2C', '#009FDF', '#10069F']
/*const color = ['#00A499', '#84BD00', '#E98F2C', '#009FDF', '#10069F']
const data = action.data
const result = data.reduce((acc, item, i) => {
acc = [
......@@ -32,11 +32,11 @@ export default function navReducer (
}
]
return acc
}, [])
}, [])*/
return {
...state,
data: result,
data: action.data,
dataFetched: true,
isFetching: false,
error: false,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment