appbar responsive with options with react router v4, material-ui and apollo client

Question

I'm working with apollo client, react, reac routerv4 and material-ui, my app is working , before insert material-ui i had

<Link to="/" className="navbar">React + GraphQL Tutorial</Link>

then i've inserted material-ui

  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />

but it's not clear for me how to add links for the title and options, in responsive mode with small screen the options i think must be invisible, in small screen not. The official material-ui site is not well explained by example like bootstrap, so i need a litlle of help.

the full code is:

import React, { Component } from 'react';
import {
  BrowserRouter,
  Link,
  Route,
  Switch,
} from 'react-router-dom';

import './App.css';
import ChannelsListWithData from './components/ChannelsListWithData';
import NotFound from './components/NotFound';
import ChannelDetails from './components/ChannelDetails';
import AppBar from 'material-ui/AppBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import {
  ApolloClient,
  ApolloProvider,
  createNetworkInterface,
  toIdValue,
} from 'react-apollo';


const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000/graphql' });
networkInterface.use([{
  applyMiddleware(req, next) {
    setTimeout(next, 500);
  },
}]);

function dataIdFromObject (result) {
  if (result.__typename) {
    if (result.id !== undefined) {
      return `${result.__typename}:${result.id}`;
    }
  }
  return null;
}

// customResolvers:
// This custom resolver tells Apollo Client to check its cache for a Channel object with ID $channelId
// whenever we make a channel query. If it finds a channel with that ID in the cache,
// it will not make a request to the server.

const client = new ApolloClient({
  networkInterface,
    customResolvers: {
        Query: {
            channel: (_, args) => {
                return toIdValue(dataIdFromObject({ __typename: 'Channel', id: args['id'] }))
            },
        },
    },
  dataIdFromObject,
});


class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <BrowserRouter>
          <MuiThemeProvider muiTheme={getMuiTheme()}>
            <div className="App">
              <Link to="/" className="navbar">React + GraphQL Tutorial</Link>
              <AppBar
                title="Title"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
              />
              <Switch>
                <Route exact path="/" component={ChannelsListWithData}/>
                <Route path="/channel/:channelId" component={ChannelDetails}/>
                <Route component={ NotFound }/>
              </Switch>
            </div>
          </MuiThemeProvider>
        </BrowserRouter>
      </ApolloProvider>
    );
  }
}

export default App;

Answer 1

the right is add a code like this:

          <AppBar position="static">
            <Toolbar>
              <IconButton color="contrast" aria-label="Menu">

              </IconButton>
              <Typography type="title" color="inherit" >
                {"Admin"}
              </Typography>
              <AuthLink to="/customers" label="Customers"/>
              <AuthLink to="/tours" label="Tours"/>
              <AuthLink to="/signout" label="Sign Out"/>
              <AuthLink to="/signin" label=" Sign In" whenLogged="false"/>
            </Toolbar>
          </AppBar>

Authlink is just a component that I wrote to show the options and where simple I add the Title to display options.

const AuthLink = (props) => {
  let auth = checkAuth();
  return (
    ( (auth && !props.whenLogged ) || (!auth && props.whenLogged == "false")  ) ? (
      <Link to={props.to} className="navbar"><Button>{props.label}</Button></Link>
    ) : (
      null
    )
  );
}

"Button" is a component from material, "Link" from react-router, here the imports:

import {
  BrowserRouter,
  Link,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';