Added Doc Example for Drawer

Author: jasperfurniss

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,42 +1,77 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
+const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+  const navItems = ["Overview", "Albums", "Similar Artists"]
 
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 992px)")
+    const updateScreen = (e) => setIsSmallScreen(e.matches)
+    updateScreen(mediaQuery)
+    mediaQuery.addEventListener('change', updateScreen)
+    return () => mediaQuery.removeEventListener('change', updateScreen)
+  }, [])
 
   return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
+    <div>
+      <Button id='sidebar'
+          padding='xs'
+      >
+        <Icon icon='bars'
+            size='2x'
+        />
+      </Button>
+      <Drawer
+          behavior={"push"}
+          breakpoint='md'
+          overlay={isSmallScreen ? true : false}
+          placement='left'
+          size='md'
+          triggerId='sidebar'
+      >
+        <Nav
+            link='#'
+            orientation='vertical'
+            padding={isSmallScreen ? "none" : "sm"}
+            variant='bold'
         >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
+          {navItems.map((text, index) => {
+            return (
+              <NavItem
+                  collapsible
+                  collapsibleTrail
+                  fontWeight='bolder'
+                  iconLeft='city'
+                  iconRight={["plus", "minus"]}
+                  key={index}
+                  link='#'
+                  text={text}
+              >
+                <NavItem fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='City'
+                />
+                <NavItem
+                    fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='People'
+                />
+                <NavItem
+                    fontSize='small'
+                    link='#'
+                    marginY='none'
+                    text='Business'
+                />
+              </NavItem>
+            )
+          })}
+        </Nav>
+      </Drawer>
+    </div>
+  )
+}
 
-export default DrawerBreakpoints;
+export default DrawerMenu

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     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)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav 
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

playbook/app/pb_kits/playbook/pb_drawer/docs/example.yml

@@ -10,4 +10,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

yarn.lock

@@ -1989,6 +1989,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.23.8":
+  version "7.26.7"
+  resolved "https://npm.powerapp.cloud/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.6":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
@@ -8704,6 +8711,14 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+match-sorter@^8.0.0:
+  version "8.0.0"
+  resolved "https://npm.powerapp.cloud/match-sorter/-/match-sorter-8.0.0.tgz#9120e35ed8aabf45cd40e127b0231f762fb2eec0"
+  integrity sha512-bGJ6Zb+OhzXe+ptP5d80OLVx7AkqfRbtGEh30vNSfjNwllu+hHI+tcbMIT/fbkx/FKN1PmKuDb65+Oofg+XUxw==
+  dependencies:
+    "@babel/runtime" "^7.23.8"
+    remove-accents "0.5.0"
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://npm.powerapp.cloud/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -10386,6 +10401,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+[email protected]:
+  version "0.5.0"
+  resolved "https://npm.powerapp.cloud/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
+  integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://npm.powerapp.cloud/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"