Creating a navbar with material-ui

Question

I\'m trying to create a simple navbar with material-ui that looks like the one they use on their site. This is the code I wrote to try to replicate it:

import Re         


        

Answer 1

A little late to the party, but a solution that has worked for me. FYI, this is a React/Redux app with a Rails backend.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router'
import AppBar from 'material-ui/AppBar'
import Drawer from 'material-ui/Drawer'
import MenuItem from 'material-ui/MenuItem'
import { getBasename } from '../config/environment'

export default class Navbar extends Component {
  constructor(props) {
    super(props)
    this.state = {open: false}
    this.displayNavbar = this.displayNavbar.bind(this)
  }

  toggleDrawer = () => this.setState({ open: !this.state.open })

  authenticatedNavbar = () => {
    return (
      

        }
              onTouchTap={() => {this.props.onLogoutClick()}}
              primaryText="Logout"
            />
          }
          onLeftIconButtonTouchTap={() => this.toggleDrawer()}
          title="Your_app"
        />
         this.setState({open})}
          open={this.state.open}
        >
          }
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Home"
          />
          }
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Some Component"
          />
        
      
    )
  }

  unauthenticatedNavbar = () => {
    return (
      

        }
              primaryText="Login"
            />
          }
          showMenuIconButton={false}
          title="Your_app"
        />
      
    )
  }

Then some other logic to show the appropriate AppBar according to the users state of authentication.

I don't really think that tabs are meant to be part of the App Bar. The Material spec shows them as a secondary toolbar.