@dhasdk/simple-ui 1.0.22 → 1.0.23

package/README.md

@@ -1669,17 +1669,18 @@ 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 |
+| classNameBackgroundShadow   | string   | Yes      | **`absolute inset-0 bg-black/70 z-10`** | 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.|
 | 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 |
+| classNameImageContainer | string   | Yes      | **`w-16 h-16 mx-auto`** | a group of alternate classes that can be specified for the logo image's container, and applied to the **`img`** element |
 | 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 |
 | classNameMenuItem | string | Yes | 'pb-4' | allows the user to add alternate classes via **`twMerge`** to individual menu items |
+| backgroundShadow | boolean | Yes | false | When true (or present) this sets a background shadow that covers the page with the SideBarNav on top when activated. See also **`classNameBackgroundShadow`** to apply custom styling. |
+| clickOutsideCloses   | boolean   | Yes  | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
+| 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. |
+| image | string   | No      | undefined | string path to the application logo to display |
+| menu | boolean   | Yes      | false | when **`true`**, the default in-component hamburger menu is displayed and used to display or hide the SideBarNav |
 | menuItems | ListItemProps[]  | No  | undefined, see (4) below | The menu items to display |
 | right | boolean | Yes | false | when true right-aligns the text inside the sidebarNav |
 | version | string   | No  | undefined | The version number to display |
@@ -1690,9 +1691,9 @@ applied to the **`button`** (container) that contains the back arrow image and '
 - w/o menu **`relative w-56 h-screen flex flex-col px-4 pb-4 pt-10 bg-white overflow-y-auto`**
 - w/ menu, include also **`fixed z-20 right-0 top-0 translate-x-full transition-transform duration-300`**
 
-2. Default classes applied to **`img`** - **`border border-[#bbbabc] w-16 h-16 bg-[#eeeeef] ring-1`**
+1. Default classes applied to **`img`** - **`border border-[#bbbabc] w-16 h-16 bg-[#eeeeef] ring-1`**
 
-3. Default classes applied to **`button`** - **`size-8 mb-4`**
+2. Default classes applied to **`button`** - **`size-8 mb-4`**
 
 
 ### Example Usage