Added settings and project list to the sidebar.

Author: niemyjski

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

@@ -2,8 +2,11 @@
     import type { ComponentProps, Snippet } from 'svelte';
 
     import { page } from '$app/state';
+    import * as Collapsible from '$comp/ui/collapsible';
     import * as Sidebar from '$comp/ui/sidebar';
     import { useSidebar } from '$comp/ui/sidebar';
+    import ChevronRight from '@lucide/svelte/icons/chevron-right';
+    import Settings from '@lucide/svelte/icons/settings-2';
 
     import type { NavigationItem } from '../../../routes.svelte';
 
@@ -14,7 +17,9 @@
     };
 
     let { footer, header, routes, ...props }: Props = $props();
-    const dashboardRoutes = routes.filter((route) => route.group === 'Dashboards');
+    const dashboardRoutes = $derived(routes.filter((route) => route.group === 'Dashboards'));
+    const settingsRoutes = $derived(routes.filter((route) => route.group === 'Settings'));
+    const settingsIsActive = $derived(settingsRoutes.some((route) => route.href === page.url.pathname));
 
     const sidebar = useSidebar();
 
@@ -49,6 +54,41 @@
                 {/each}
             </Sidebar.Menu>
         </Sidebar.Group>
+
+        <Sidebar.Group>
+            <Sidebar.Menu>
+                <Collapsible.Root open={settingsIsActive} class="group/collapsible">
+                    {#snippet child({ props })}
+                        <Sidebar.MenuItem {...props}>
+                            <Collapsible.Trigger>
+                                {#snippet child({ props })}
+                                    <Sidebar.MenuButton {...props}>
+                                        <Settings />
+                                        <span>Settings</span>
+                                        <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                    </Sidebar.MenuButton>
+                                {/snippet}
+                            </Collapsible.Trigger>
+                            <Collapsible.Content>
+                                <Sidebar.MenuSub>
+                                    {#each settingsRoutes as subItem (subItem.href)}
+                                        <Sidebar.MenuSubItem>
+                                            <Sidebar.MenuSubButton isActive={subItem.href === page.url.pathname}>
+                                                {#snippet child({ props })}
+                                                    <a href={subItem.href} title={subItem.title} onclick={onMenuClick} {...props}>
+                                                        <span>{subItem.title}</span>
+                                                    </a>
+                                                {/snippet}
+                                            </Sidebar.MenuSubButton>
+                                        </Sidebar.MenuSubItem>
+                                    {/each}
+                                </Sidebar.MenuSub>
+                            </Collapsible.Content>
+                        </Sidebar.MenuItem>
+                    {/snippet}
+                </Collapsible.Root>
+            </Sidebar.Menu>
+        </Sidebar.Group>
     </Sidebar.Content>
     <Sidebar.Rail />
     <Sidebar.Footer>