CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Serenity
Serenity

Reputation: 4054

could not show items in navbar as per the need

I am using reactjs and material-ui for development of my application. I am developing a dashboard. Before i used react-mdl for component and using it the navbar component is working as expected. I want to use material-ui, though as it has lots of component and support. It is mature than react-mdl. Everything is working perfectly except navbar component where i have used AppBar.

Below is the screenshot of navbar i have designed using both material-ui and react-mdl. I want the 2nd navbar(it is designed using react-mdl) using material-ui which i could not. I tried using tab inside AppBar but no luck. The concept is there will be 2 tab at first and when the add icon is clicked that is on the right side, user gets to add a new tab over there. How can i design it the same way?

enter image description here

Here is my code

render() {
    const navigation = (
      <BottomNavigation style={{ background:'transparent'}}>
        <i className="material-icons md-23">delete</i>
        <i className="material-icons md-23">add_circle</i>
      </BottomNavigation>
    )

    return (
      <div>
        <div className="mdlContent" style={{height: '900px', position: 'relative'}}>
        <AppBar  iconElementRight={navigation} >
        </AppBar>
)

Upvotes: 0

Views: 174

Answers (2)

genestd
genestd

Reputation: 404

Here's one method - put your navigation items into an array in your state. You can add new items to this array. Use Tabs in the nav bar to display the items:

getInitialState(){
  const navigation = [
   { id: 0, description: "Dashboard"},
   { id: 1, description: "My Device"},
   { id: 2, description: "Follow"}
  ]; 
}

render(){
<div>
  <Tabs onChange={this.handleChange}>
    {this.state.navigation.map( function(result, index){
      return <Tab key={result.id} label={result.description} value={index}/>
    })}        
  </Tabs>
</div>

Check out the library swipeableviews: https://github.com/oliviertassinari/react-swipeable-views. You can place the views in the same render function so that each tab has a corresponding view to display the menu content.

<div>
  <SwipeableViews>
  ...
  </SwipeableViews
</div>

Upvotes: 1

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

You can do this via passing a component as the title to the <AppBar/> component.

Check the following pen:

https://codepen.io/pranesh-r/pen/LROLbo

Instead of using tabs inside the navBar which is a bit tricky, you can use <a> and handle the route to render the specific page.

Upvotes: 1

Related Questions