feat(side-nav): dispatch open, close, click:overlay events

COMPONENT_INDEX.md

@@ -3216,7 +3216,11 @@ None.
 
 ### Events
 
-None.
+| Event name    | Type       | Detail           |
+| :------------ | :--------- | :--------------- |
+| open          | dispatched | <code>any</code> |
+| close         | dispatched | <code>any</code> |
+| click:overlay | dispatched | <code>any</code> |
 
 ## `SideNavDivider`
 

docs/src/COMPONENT_API.json

@@ -8401,7 +8401,11 @@
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [],
+      "events": [
+        { "type": "dispatched", "name": "open", "detail": "any" },
+        { "type": "dispatched", "name": "close", "detail": "any" },
+        { "type": "dispatched", "name": "click:overlay", "detail": "any" }
+      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "nav" }
     },

src/UIShell/SideNav/SideNav.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {any} open
+   * @event {any} close
+   * @event {any} click:overlay
+   */
+
   /** Set to `true` to use the fixed variant */
   export let fixed = false;
 
@@ -11,9 +17,13 @@
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
 
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
 
+  const dispatch = createEventDispatcher();
+
+  $: dispatch(isOpen ? "open" : "close");
+
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
     return () => shouldRenderHamburgerMenu.set(false);
@@ -23,6 +33,7 @@
 {#if !fixed}
   <div
     on:click="{() => {
+      dispatch('click:overlay');
       isOpen = false;
     }}"
     class:bx--side-nav__overlay="{true}"

types/UIShell/SideNav/SideNav.d.ts

@@ -23,6 +23,10 @@ export interface SideNavProps
 
 export default class SideNav extends SvelteComponentTyped<
   SideNavProps,
-  {},
+  {
+    open: CustomEvent<any>;
+    close: CustomEvent<any>;
+    ["click:overlay"]: CustomEvent<any>;
+  },
   { default: {} }
 > {}