Improved mobile sidebar experience.

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-organization-switcher.svelte

@@ -24,6 +24,10 @@
     let activeOrganization = $derived(organizations?.find((organization) => organization.id === selected));
 
     function onOrganizationSelected(organization: ViewOrganization): void {
+        if (sidebar.isMobile) {
+            sidebar.toggle();
+        }
+
         if (organization.id === selected) {
             return;
         }

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-user.svelte

@@ -26,6 +26,12 @@
 
     let { gravatar, isLoading, user, ...props }: Props = $props();
     const sidebar = useSidebar();
+
+    function onMenuClick() {
+        if (sidebar.isMobile) {
+            sidebar.toggle();
+        }
+    }
 </script>
 
 {#if isLoading}
@@ -90,7 +96,7 @@
                     <DropdownMenu.Group>
                         <DropdownMenu.Item>
                             <BadgeCheck />
-                            <A variant="ghost" href="/next/account/manage" class="w-full">Account</A>
+                            <A variant="ghost" href="/next/account/manage" class="w-full" onclick={onMenuClick}>Account</A>
                             <DropdownMenu.Shortcut>⇧⌘ga</DropdownMenu.Shortcut>
                         </DropdownMenu.Item>
                         <!-- <DropdownMenu.Item>

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar.svelte

@@ -17,6 +17,12 @@
     const dashboardRoutes = routes.filter((route) => route.group === 'Dashboards');
 
     const sidebar = useSidebar();
+
+    function onMenuClick() {
+        if (sidebar.isMobile) {
+            sidebar.toggle();
+        }
+    }
 </script>
 
 <Sidebar.Root collapsible="icon" {...props}>
@@ -33,7 +39,7 @@
                     <Sidebar.MenuItem>
                         <Sidebar.MenuButton isActive={route.href === page.url.pathname}>
                             {#snippet child({ props })}
-                                <a href={route.href} title={route.title} {...props}>
+                                <a href={route.href} title={route.title} onclick={onMenuClick} {...props}>
                                     <Icon />
                                     <span>{route.title}</span>
                                 </a>