@rocketsofawesome/mirage/src/modules/header/mobileNavigation/mobileNavigation.md

[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)

_Note: The drawerPosition and position props are only used to constrain the mobile navigation for the pattern library_

#### Logged out user:
```js
  <div style={{position: 'relative'}}>
    <MobileNavigation
      drawerPosition='absolute'
      position='absolute'
      boysLinks={require('./defaultProps').boysLinks}
      girlsLinks={require('./defaultProps').girlsLinks}
      renderLink={require('./defaultProps').renderLink}
      clickBag={() => console.log('Bag clicked')}
    />
    <img style={{maxWidth: '100%'}} src='https://www.fillmurray.com/g/500/700' />
  </div>
```

#### Logged in non-subscriber user:
```js
  <div style={{position: 'relative'}}>
    <MobileNavigation
      drawerPosition='absolute'
      position='absolute'
      boysLinks={require('./defaultProps').boysLinks}
      girlsLinks={require('./defaultProps').girlsLinks}
      renderLink={require('./defaultProps').renderLink}
      loggedIn />
    <img style={{maxWidth: '100%'}} src='https://www.fillmurray.com/g/500/700' />
  </div>
```

#### Logged in subscriber user:
```js
  <div style={{position: 'relative'}}>
    <MobileNavigation
    drawerPosition='absolute'
    position='absolute'
      boysLinks={require('./defaultProps').boysLinks}
      girlsLinks={require('./defaultProps').girlsLinks}
      renderLink={require('./defaultProps').renderLink}
      showSubscriptionLinks
      loggedIn />
    <img style={{maxWidth: '100%'}} src='https://www.fillmurray.com/g/500/700' />
  </div>
```