Аватар как материал-UI-React компонент с государством

Question

Я хочу разместить аватар в качестве элемента внутри панели приложения Material-UI-App.Этот аватар будет получать информацию о пользователях LoggedIn, в частности, это первая буква.и отобразить это.До сих пор, что я сделал, хотя внутри другого компонента.

Вот код для этого:

<CardHeader
avatar={<Avatar>{this.props.data.user.first_name.charAt(0)}</Avatar>}
/>

Теперь я хочу повторить эту логику в компоненте Navbar.Два небольших улова.

1. Я хочу отображать аватар только при входе пользователя в систему.Сделали это с помощью троичного оператора и с редуксными действиями isAuthenticated.

           <AppBar
             title="Lenses - Secure Area"
             showMenuIconButton={false}
             iconElementRight={
                 this.props.isAuthenticated ? <FlatButton label="Logout" onClick={(e) => this.logout(e)} /> : ''}/>
   

2. Я хочу, чтобы Аватар был выпадающим.Что бы я ни делал, похоже, не работает.

Не могли бы вы помочь мне с кодом для раскрывающегося списка Аватара.Aft4er, который, я думаю, можно собрать воедино.

Я использую React 15.1 вместе с Material-UI-React 0.20.Спасибо за ваше время.