Bottom Nav fixes for external control (#2469)

* Expose additional controls for the api for the bottom nav as well as allow the escape button to close the nav.

* Use svelte:window to deal with the eventhandling instead

Author: GiantRobots

Diff for: src/lib/components/bottom-nav.svelte

@@ -27,15 +27,28 @@
   let viewNamespaces = writable(false);
   let viewSettings = false;
 
+  function escapeHandler(e: KeyboardEvent) {
+    if (
+      e.key === 'Escape' &&
+      [viewLinks, viewNamespaces, viewSettings].some((isOpen) => isOpen)
+    ) {
+      closeMenu();
+    }
+  }
+
+  beforeNavigate(() => {
+    closeMenu();
+  });
+
   $: namespace = $page.params.namespace || $lastUsedNamespace;
   $: namespaceExists = namespaceList.some(
     (namespaceListItem) => namespaceListItem.namespace === namespace,
   );
 
   const onLinksClick = () => {
-    viewSettings = false;
-    $viewNamespaces = false;
     viewLinks = !viewLinks;
+    $viewNamespaces = false;
+    viewSettings = false;
   };
 
   const onNamespaceClick = () => {
@@ -50,11 +63,11 @@
     viewSettings = !viewSettings;
   };
 
-  beforeNavigate(() => {
+  function closeMenu() {
     viewLinks = false;
-    viewSettings = false;
     $viewNamespaces = false;
-  });
+    viewSettings = false;
+  }
 
   $: menuIsOpen = viewLinks || $viewNamespaces || viewSettings;
 
@@ -66,6 +79,8 @@
   };
 </script>
 
+<svelte:window on:keypress={escapeHandler} />
+
 {#if menuIsOpen}
   <div
     class="group surface-primary fixed top-0 z-50 h-[calc(100%-64px)] w-full overflow-auto md:hidden"
@@ -74,7 +89,7 @@
     out:slide={{ duration: 200, delay: 0 }}
   >
     <BottomNavLinks open={viewLinks} {linkList} />
-    <slot name="nsPicker" open={$viewNamespaces}>
+    <slot name="nsPicker" open={$viewNamespaces} {closeMenu}>
       <BottomNavNamespaces open={$viewNamespaces} {namespaceList} />
     </slot>
     <BottomNavSettings open={viewSettings}>