@dhasdk/simple-ui 1.0.20 → 1.0.22

package/README.md

@@ -1669,10 +1669,13 @@ Full list of props below
 | appName | string   | No  | undefined | The application name to dispilay |
 | children | ReactNode | Yes | undefined | This prop takes in any children and displays them between the horizontal rule and the list of menu items. It is intended for to allow developers to add a Search component.  See usage example above. |
 | className   | string   | Yes      | (1) below | a group of alternate css classes that can be specified by the developer and applied to the outer **`div`** element. |
+| classNameBackButton | string | Yes | **`-mt-8 w-full relative hover:cursor-pointer`** | alternative CSS classes that are 
+applied to the **`button`** (container) that contains the back arrow image and 'Back' text.|
 | clickOutsideCloses   | boolean   | Yes  | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
 | 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 +1742,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_**