O'Reilly logo

Cross-platform Desktop Application Development: Electron, Node, NW.js, and React by Dmitry Sheiko

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the Menu component

We are going to keep the feed menu in the Drawer component of React MDL that shows up automatically on wide screens and hides in the burger menu on smaller ones:

./ts/Components/Menu.tsx

import * as React from "react"; 
import { Drawer, Navigation, Icon, FABButton } from "react-mdl"; 
 
export default class Menu extends React.Component<{}, {}> { 
 
  render (){ 
 
    return ( 
     <Drawer  className="mdl-color--blue-grey-900 mdl- color-text--blue-grey-50"> <Navigation className="mdl-color--blue-grey-80"> <a> <Icon name="& #xE0E5;" /> Link title </a> </Navigation> <div className="mdl-layout-spacer"></div> <div className="tools"> <FABButton mini> <Icon name="add" /> </FABButton> <FABButton mini> <Icon name="delete" /> </FABButton> <FABButton ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required