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,43 @@
                 {/each}
             </Sidebar.Menu>
         </Sidebar.Group>
+
+        {#if settingsRoutes.length > 0}
+            <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>
+        {/if}
     </Sidebar.Content>
     <Sidebar.Rail />
     <Sidebar.Footer>