@dhasdk/simple-ui 1.0.19 → 1.0.21

package/README.md

@@ -1673,6 +1673,7 @@ Full list of props below
 | image | string   | No      | undefined | string path to the application logo to display |
 | classNameImage | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image, and applied to the **`img`** element |
 | classNameImageContainer | string   | Yes      | (2) below | a group of alternate classes that can be specified for the logo image's container, and applied to the **`img`** element |
+| customButton | boolean | Yes | false | When present (or true) this sets the SideBarNav to respond to the custom event handler **`toggleSideBarNav`**. This allows the developer to utilize their own button that simply executes the above custom event handler to toggle the SideBarNav open & closed state. |
 | menu | boolean   | Yes      | false | when **`true`**, the default in-component hamburger menu is displayed and used to display or hide the SideBarNav |
 | classNameMenu | string   | Yes      | empty string | alternate css classes to apply to the element that makes up the hamburger menu |
 | classNameMenuContainer | string   | Yes      | (3) below | alternate css classes to apply to the **`button`** element that wraps up the hamburger menu |
@@ -1739,6 +1740,27 @@ const menuItems = [
 </SideBarNav>
 ```
 
+If using the **`customButton`** prop, you're JSX might be:
+
+```jsx
+    // in the return JSX
+    <Button
+      className="my-4 mx-4"
+      onClick={() => window.dispatchEvent(new Event('toggleSideBarNav'))}
+      
+      >Toggle SideBar</Button>
+    <SideBarNav
+      appName='A.C.M.E. Tools'
+      version="0.0.0"
+      menuItems={menuItems}
+      classNameMenuItem='pe-4'
+      clickOutsideCloses
+      customButton
+      image={doctor}
+      className='bg-slate-200 border border-slate-400 rounded-l-md h-full'
+    />
+```
+
 ### Dependencies
 
 **_none_**