Contents

import React, { useState, useEffect } from "react"
import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"

const DrawerMenu = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false)

  useEffect(() => {
    const mediaQuery = window.matchMedia("(max-width: 600px)")
    setIsSmallScreen(mediaQuery.matches)
    const handler = (e) => setIsSmallScreen(e.matches)
    mediaQuery.addEventListener('change', handler)
    return () => mediaQuery.removeEventListener('change', handler)
  }, [])

  return (
    <div>
      <Button id='menuButton'
          padding='xs'
      >
        <Icon icon='bars'
            size='2x'
        />
      </Button>
      <Drawer
          breakpoint="md"
          placement='bottom'
          size='full'
          triggerId='menuButton'
          withinElement
      >
        <Nav 
            highlight={false}
            link='#'
            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
            padding={isSmallScreen ? 'none' : 'sm'}
        >
          <NavItem link='#'
              text='About'
          />
          <NavItem active
              link='#'
              text='Case Studies'
          />
          <NavItem link='#'
              text='Service'
          />
          <NavItem link='#'
              text='Contacts'
          />
        </Nav>
      </Drawer>
    </div>
  )
}

export default DrawerMenu

Version data entries

2 entries across 2 versions & 2 rubygems

Version	Path
playbook_ui_docs-14.11.1.pre.alpha.PLAY17445539	app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx
playbook_ui-14.11.1.pre.alpha.PLAY17445539	app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx