Implementation of everything that is given on the official gormmet website.

Grommet Starter

Remove these files:

src/App.css
src/App.test.js
src/index.css
src/logo.svg
Inside src/index.js, remove the import of index.css.

INSTALL ALL THE GORMMET DEPENDENCY
------------------------------------
npm install grommet grommet-icons styled-components --save

------------------------------------------------------------------------------------------------------------------------------------------------
import React from 'react';
import { 
  Box, 
  Button,
  Collapsible, 
  Heading, 
  Grommet,
  Layer,
  ResponsiveContext
} from 'grommet'
import {FormClose,Notification} from 'grommet-icons'

const AppBar = (props) => (
  <Box
    tag='header'
    direction='row'
    align='center'
    justify='between'
    background='brand'
    pad={{left:'medium',right:'small', vertical:'small'}}
    elevation="medium"
    style={{zIndex:'1'}}
    {...props}
  />
)

 class App extends React.Component {

 state ={
    showSidebar : false
 } 
  render(){
    const {showSidebar} = this.state;

    const theme = {
      global: {
        colors:{
          brand: '#eeeeee'
        },
        font: {
          family: 'Roboto',
          size: '14px',
          height: '20px',
        },
      },
    };
  return (
    <Grommet theme={theme} full>
      <ResponsiveContext.Consumer>
        {size => (
      <Box fill>  
      <AppBar>
        
        <Heading level='3' margin='none'>Hello I am Sanket</Heading>
        
        <Button 
          icon={<Notification/>}  
          onClick={()=>this.setState((prevState) =>({showSidebar: !prevState.showSidebar}))} 
        />
      </AppBar>
      <Box 
        direction='row' 
        align='center' 
        justify='center' 
        
        flex overflow={{horizontal:'hidden'}}>
          {/* app body */}
          <Box flex
          width='medium' 
          align='center' justify='center'>
            App Body
          </Box>
          {/* sidebar */}
          { (!showSidebar || size !== 'small') ? (
            <Collapsible direction="horizontal" open={showSidebar}>
              <Box
              width="medium"
              background='light-2'
              elevation='small'
              align='center'
              justify='center'
            >
              Sidebar
            </Box>
            </Collapsible>
          ):(
            <Layer>
              <Box 
                background='light-2'
                tag='header'
                justify='end'
                align='center'
                direction='row' 
              >
                <button
                  icon={<FormClose/>}
                  onClick={() => this.setState({showSidebar:false})}
                />
              </Box>
              <Box
                fill
                background='light-2'
                align='center'
                justify='center'
              >
                sidebar
              </Box>
            </Layer>
          )
          
          }
      </Box>
      </Box>
      )}
      </ResponsiveContext.Consumer>
    </Grommet>
  );
  }
}

export default App;