From 19b73ab4eabbaac85bc53dbad39424108448181e Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sun, 17 Nov 2024 21:19:55 -0600
Subject: [PATCH] Feature/shadcn sidebar (#1744)

* Added sidebar component

* Added sidebar css styling (default colors / needs tweaking)

* WIP - Sidebar progress

* more cleanup

* updated sidebar style

* Fixed sidebar styling

https://github.com/huntabyte/shadcn-svelte/issues/1496

* Fixed main content area

* Workaround open mobile issue.

* Removed dead code

* Fixed whitespace
---
 .../ClientApp/.vscode/settings.json           |  1 +
 .../ClientApp/package-lock.json               | 11 +++
 src/Exceptionless.Web/ClientApp/package.json  |  3 +-
 src/Exceptionless.Web/ClientApp/src/app.css   | 18 ++++
 .../events/components/ExtendedDataItem.svelte |  8 +-
 .../shared/components/DarkModeButton.svelte   |  4 +-
 .../shared/components/ui/sidebar/constants.ts |  6 ++
 .../components/ui/sidebar/context.svelte.ts   | 81 +++++++++++++++
 .../shared/components/ui/sidebar/index.ts     | 75 ++++++++++++++
 .../ui/sidebar/sidebar-content.svelte         | 24 +++++
 .../ui/sidebar/sidebar-footer.svelte          | 21 ++++
 .../ui/sidebar/sidebar-group-action.svelte    | 36 +++++++
 .../ui/sidebar/sidebar-group-content.svelte   | 21 ++++
 .../ui/sidebar/sidebar-group-label.svelte     | 34 +++++++
 .../ui/sidebar/sidebar-group.svelte           | 21 ++++
 .../ui/sidebar/sidebar-header.svelte          | 21 ++++
 .../ui/sidebar/sidebar-input.svelte           | 23 +++++
 .../ui/sidebar/sidebar-inset.svelte           | 24 +++++
 .../ui/sidebar/sidebar-menu-action.svelte     | 43 ++++++++
 .../ui/sidebar/sidebar-menu-badge.svelte      | 29 ++++++
 .../ui/sidebar/sidebar-menu-button.svelte     | 97 ++++++++++++++++++
 .../ui/sidebar/sidebar-menu-item.svelte       | 21 ++++
 .../ui/sidebar/sidebar-menu-skeleton.svelte   | 36 +++++++
 .../ui/sidebar/sidebar-menu-sub-button.svelte | 43 ++++++++
 .../ui/sidebar/sidebar-menu-sub-item.svelte   | 14 +++
 .../ui/sidebar/sidebar-menu-sub.svelte        | 25 +++++
 .../components/ui/sidebar/sidebar-menu.svelte | 21 ++++
 .../ui/sidebar/sidebar-provider.svelte        | 59 +++++++++++
 .../components/ui/sidebar/sidebar-rail.svelte | 36 +++++++
 .../ui/sidebar/sidebar-separator.svelte       | 18 ++++
 .../ui/sidebar/sidebar-trigger.svelte         | 34 +++++++
 .../components/ui/sidebar/sidebar.svelte      | 98 +++++++++++++++++++
 .../shared/components/ui/tooltip/index.ts     | 18 ++++
 .../ui/tooltip/tooltip-content.svelte         | 21 ++++
 .../src/lib/hooks/is-mobile.svelte.ts         | 27 +++++
 .../(app)/(components)/layouts/Footer.svelte  |  8 +-
 .../(app)/(components)/layouts/Navbar.svelte  | 33 ++-----
 .../(app)/(components)/layouts/Sidebar.svelte | 64 ++++++------
 .../layouts/SidebarMenuItem.svelte            | 30 ------
 .../ClientApp/src/routes/(app)/+layout.svelte | 30 +++---
 .../(app)/account/sessions/+page.svelte       |  4 +-
 .../ClientApp/src/routes/+layout.svelte       |  5 +-
 .../ClientApp/tailwind.config.js              | 10 ++
 43 files changed, 1136 insertions(+), 120 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/constants.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/context.svelte.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-content.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-footer.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-action.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-content.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-label.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-header.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-input.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-inset.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-action.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-badge.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-button.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-item.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-skeleton.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-button.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-item.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-provider.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-rail.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-separator.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-trigger.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/hooks/is-mobile.svelte.ts
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/SidebarMenuItem.svelte

diff --git a/src/Exceptionless.Web/ClientApp/.vscode/settings.json b/src/Exceptionless.Web/ClientApp/.vscode/settings.json
index 08fb7d3113..c6ed346fd4 100644
--- a/src/Exceptionless.Web/ClientApp/.vscode/settings.json
+++ b/src/Exceptionless.Web/ClientApp/.vscode/settings.json
@@ -13,6 +13,7 @@
         "keyof",
         "legos",
         "lucene",
+        "lucide",
         "nameof",
         "navigatetofirstpage",
         "oidc",
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 4f2a8deb17..e297ffded9 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -34,6 +34,7 @@
                 "unplugin-icons": "^0.20.1"
             },
             "devDependencies": {
+                "@iconify-json/lucide": "^1.2.14",
                 "@playwright/test": "^1.48.2",
                 "@sveltejs/adapter-static": "^3.0.6",
                 "@sveltejs/kit": "^2.8.1",
@@ -935,6 +936,16 @@
                 "url": "https://github.com/sponsors/nzakas"
             }
         },
+        "node_modules/@iconify-json/lucide": {
+            "version": "1.2.14",
+            "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.14.tgz",
+            "integrity": "sha512-NDJKk1NQRNymlr5B5uiWBRc3RAZ8r+8A1F4SU+60udy05V0GwILAnoJvlg6oY0WZBhqb/ChaU1LWm1XHmJ4DEg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "@iconify/types": "*"
+            }
+        },
         "node_modules/@iconify-json/mdi": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.1.tgz",
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index fdb818ea6c..4e5c1d80e9 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -23,6 +23,7 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
+        "@iconify-json/lucide": "^1.2.14",
         "@playwright/test": "^1.48.2",
         "@sveltejs/adapter-static": "^3.0.6",
         "@sveltejs/kit": "^2.8.1",
@@ -77,4 +78,4 @@
         "unplugin-icons": "^0.20.1"
     },
     "type": "module"
-}
\ No newline at end of file
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/app.css b/src/Exceptionless.Web/ClientApp/src/app.css
index 517ad0e4e3..4770b5c12b 100644
--- a/src/Exceptionless.Web/ClientApp/src/app.css
+++ b/src/Exceptionless.Web/ClientApp/src/app.css
@@ -35,6 +35,15 @@
         --ring: 221 39% 11%;
 
         --radius: 0.375rem;
+
+        --sidebar-background: var(--background);
+        --sidebar-foreground: var(--foreground);
+        --sidebar-primary: var(--primary);
+        --sidebar-primary-foreground: var(--primary-foreground);
+        --sidebar-accent: var(--accent);
+        --sidebar-accent-foreground: var(--accent-foreground);
+        --sidebar-border: var(--border);
+        --sidebar-ring: var(--ring);
     }
 
     .dark {
@@ -66,6 +75,15 @@
         --destructive-foreground: 0 0% 100%;
 
         --ring: 96 64.1% 45.88%;
+
+        --sidebar-background: var(--background);
+        --sidebar-foreground: var(--foreground);
+        --sidebar-primary: var(--primary);
+        --sidebar-primary-foreground: var(--primary-foreground);
+        --sidebar-accent: var(--accent);
+        --sidebar-accent-foreground: var(--accent-foreground);
+        --sidebar-border: var(--border);
+        --sidebar-ring: var(--ring);
     }
 }
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte
index 3478cbc76b..04ee27573d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/ExtendedDataItem.svelte
@@ -69,9 +69,13 @@
 
             {#if canPromote}
                 {#if !isPromoted}
-                    <Button onclick={async () => await promote(title)} size="icon" title="Promote to Tab"><ArrowUpIcon /></Button>
+                    <Button onclick={async () => await promote(title)} size="icon" title="Promote to Tab"
+                        ><ArrowUpIcon /><span class="sr-only">Promote to Tab</span></Button
+                    >
                 {:else}
-                    <Button onclick={async () => await demote(title)} size="icon" title="Demote Tab"><ArrowDownIcon /></Button>
+                    <Button onclick={async () => await demote(title)} size="icon" title="Demote Tab"
+                        ><ArrowDownIcon /><span class="sr-only">Demote Tab</span></Button
+                    >
                 {/if}
             {/if}
         </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DarkModeButton.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DarkModeButton.svelte
index bd76f6f0e4..d52c98b717 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DarkModeButton.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/DarkModeButton.svelte
@@ -13,8 +13,8 @@
 <ContextMenu.Root>
     <ContextMenu.Trigger>
         <Button onclick={toggleMode} size="icon" title="Toggle dark mode" variant="outline">
-            <IconWhiteBalanceSunny class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <IconMoonWaningCrescent class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <IconWhiteBalanceSunny class="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <IconMoonWaningCrescent class="absolute ml-1 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>
         </Button>
     </ContextMenu.Trigger>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/constants.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000000..4de44351d4
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/context.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 0000000000..15248adace
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+	/**
+	 * A getter function that returns the current open state of the sidebar.
+	 * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+	 * component.
+	 */
+	open: Getter<boolean>;
+
+	/**
+	 * A function that sets the open state of the sidebar. To support `bind:open`, we need
+	 * a source of truth for changing the open state to ensure it will be synced throughout
+	 * the sub-components and any `bind:` references.
+	 */
+	setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+	readonly props: SidebarStateProps;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen: SidebarStateProps["setOpen"];
+	#isMobile: IsMobile;
+	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+
+	constructor(props: SidebarStateProps) {
+		this.setOpen = props.setOpen;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e: KeyboardEvent) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+
+	setOpenMobile = (value: boolean) => {
+		this.openMobile = value;
+	};
+
+	toggle = () => {
+		return this.#isMobile.current
+			? (this.openMobile = !this.openMobile)
+			: this.setOpen(!this.open);
+	};
+}
+
+const SYMBOL_KEY = "scn-sidebar";
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/index.ts
new file mode 100644
index 0000000000..318a341785
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+	Content,
+	Footer,
+	Group,
+	GroupAction,
+	GroupContent,
+	GroupLabel,
+	Header,
+	Input,
+	Inset,
+	Menu,
+	MenuAction,
+	MenuBadge,
+	MenuButton,
+	MenuItem,
+	MenuSkeleton,
+	MenuSub,
+	MenuSubButton,
+	MenuSubItem,
+	Provider,
+	Rail,
+	Root,
+	Separator,
+	//
+	Root as Sidebar,
+	Content as SidebarContent,
+	Footer as SidebarFooter,
+	Group as SidebarGroup,
+	GroupAction as SidebarGroupAction,
+	GroupContent as SidebarGroupContent,
+	GroupLabel as SidebarGroupLabel,
+	Header as SidebarHeader,
+	Input as SidebarInput,
+	Inset as SidebarInset,
+	Menu as SidebarMenu,
+	MenuAction as SidebarMenuAction,
+	MenuBadge as SidebarMenuBadge,
+	MenuButton as SidebarMenuButton,
+	MenuItem as SidebarMenuItem,
+	MenuSkeleton as SidebarMenuSkeleton,
+	MenuSub as SidebarMenuSub,
+	MenuSubButton as SidebarMenuSubButton,
+	MenuSubItem as SidebarMenuSubItem,
+	Provider as SidebarProvider,
+	Rail as SidebarRail,
+	Separator as SidebarSeparator,
+	Trigger as SidebarTrigger,
+	Trigger,
+	useSidebar,
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 0000000000..c6db009f9b
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="content"
+	class={cn(
+		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-footer.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 0000000000..c62cb410c8
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="footer"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-action.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-action.svelte
new file mode 100644
index 0000000000..6961e4c0b7
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const propObj = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			// Increases the hit area of the button on mobile.
+			"after:absolute after:-inset-2 after:md:hidden",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		),
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: propObj })}
+{:else}
+	<button bind:this={ref} {...propObj}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 0000000000..f5e623b9a8
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="group-content"
+	class={cn("w-full text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-label.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 0000000000..77c180fdec
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+			className
+		),
+		"data-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 0000000000..aa8bf31ad3
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="group"
+	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 0000000000..5656c0bcd9
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="header"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-input.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-input.svelte
new file mode 100644
index 0000000000..0ae2db39cf
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Input } from "$lib/features/shared/components/ui/input/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-sidebar="input"
+	class={cn(
+		"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-inset.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-inset.svelte
new file mode 100644
index 0000000000..b9cd447beb
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+	bind:this={ref}
+	class={cn(
+		"bg-background relative flex min-h-svh flex-1 flex-col",
+		"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</main>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-action.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-action.svelte
new file mode 100644
index 0000000000..5a94f39add
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			// Increases the hit area of the button on mobile.
+			"after:absolute after:-inset-2 after:md:hidden",
+			"peer-data-[size=sm]/menu-button:top-1",
+			"peer-data-[size=default]/menu-button:top-1.5",
+			"peer-data-[size=lg]/menu-button:top-2.5",
+			"group-data-[collapsible=icon]:hidden",
+			showOnHover &&
+				"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+			className
+		),
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-badge.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-badge.svelte
new file mode 100644
index 0000000000..0fd4c5159d
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="menu-badge"
+	class={cn(
+		"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+		"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+		"peer-data-[size=sm]/menu-button:top-1",
+		"peer-data-[size=default]/menu-button:top-1.5",
+		"peer-data-[size=lg]/menu-button:top-2.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 0000000000..1b4674f8f2
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,97 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sidebarMenuButtonVariants = tv({
+		base: "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type SidebarMenuButtonVariant = VariantProps<
+		typeof sidebarMenuButtonVariants
+	>["variant"];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import * as Tooltip from "$lib/features/shared/components/ui/tooltip/index.js";
+	import { cn } from "$lib/utils.js";
+	import { mergeProps, type WithElementRef, type WithoutChildrenOrChild } from "bits-ui";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		variant = "default",
+		size = "default",
+		isActive = false,
+		tooltipContent,
+		tooltipContentProps,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		isActive?: boolean;
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+		tooltipContent?: Snippet;
+		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const sidebar = useSidebar();
+
+	const buttonProps = $derived({
+		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+	{@const mergedProps = mergeProps(buttonProps, props)}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button bind:this={ref} {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+{/snippet}
+
+{#if !tooltipContent}
+	{@render Button({})}
+{:else}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@render Button({ props })}
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content
+			side="right"
+			align="center"
+			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			children={tooltipContent}
+			{...tooltipContentProps}
+		/>
+	</Tooltip.Root>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 0000000000..ee82144bf6
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-sidebar="menu-item"
+	class={cn("group/menu-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-skeleton.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-skeleton.svelte
new file mode 100644
index 0000000000..28d56333ec
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Skeleton } from "$lib/features/shared/components/ui/skeleton/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="menu-skeleton"
+	class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="h-4 max-w-[--skeleton-width] flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-button.svelte
new file mode 100644
index 0000000000..26b2a90b5c
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = "md",
+		isActive,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+			"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+			size === "sm" && "text-xs",
+			size === "md" && "text-sm",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		),
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-item.svelte
new file mode 100644
index 0000000000..6e7346d3a2
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li bind:this={ref} data-sidebar="menu-sub-item" {...restProps}>
+	{@render children?.()}
+</li>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub.svelte
new file mode 100644
index 0000000000..2a23990568
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-sidebar="menu-sub"
+	class={cn(
+		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 0000000000..72534db3e1
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-sidebar="menu"
+	class={cn("flex w-full min-w-0 flex-col gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-provider.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 0000000000..3fec9c2c69
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import * as Tooltip from "$lib/features/shared/components/ui/tooltip/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(true),
+		onOpenChange = () => {},
+		controlledOpen = false,
+		class: className,
+		style,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		controlledOpen?: boolean;
+	} = $props();
+
+	const sidebar = setSidebar({
+		open: () => open,
+		setOpen: (value: boolean) => {
+			if (controlledOpen) {
+				onOpenChange(value);
+			} else {
+				open = value;
+				onOpenChange(value);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+	});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+	<div
+		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+		class={cn(
+			"group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-rail.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 0000000000..ee16fce1ad
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	aria-label="Toggle Sidebar"
+	tabIndex={-1}
+	onclick={() => sidebar.toggle()}
+	title="Toggle Sidebar"
+	class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+		"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-separator.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-separator.svelte
new file mode 100644
index 0000000000..078a50d069
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Separator } from "$lib/features/shared/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-sidebar="separator"
+	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 0000000000..8cf93cf723
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Button } from "$lib/features/shared/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+    import PanelLeft from "~icons/lucide/panel-left";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	data-sidebar="trigger"
+	variant="ghost"
+	size="icon"
+	class={cn("h-7 w-7", className)}
+	{...restProps}
+>
+	<PanelLeft />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar.svelte
new file mode 100644
index 0000000000..a5237ac299
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import * as Sheet from "$lib/features/shared/components/ui/sheet/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn(
+			"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root
+		controlledOpen
+		open={sidebar.openMobile}
+		onOpenChange={sidebar.setOpenMobile}
+		{...restProps}
+	>
+		<Sheet.Content
+			data-sidebar="sidebar"
+			data-mobile="true"
+			class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-variant={variant}
+		data-side={side}
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			class={cn(
+				"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+			)}
+		></div>
+		<div
+			class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+				// Adjust the padding for floating and inset variants.
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+					: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/index.ts
new file mode 100644
index 0000000000..e9e1fd7399
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/index.ts
@@ -0,0 +1,18 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/tooltip-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000000..dc7251cee0
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Content
+	bind:ref
+	{sideOffset}
+	class={cn(
+		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/hooks/is-mobile.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/hooks/is-mobile.svelte.ts
new file mode 100644
index 0000000000..76d3b25d8b
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,27 @@
+import { untrack } from 'svelte';
+
+const MOBILE_BREAKPOINT = 768;
+
+export class IsMobile {
+    #current = $state<boolean>(false);
+
+    constructor() {
+        $effect(() => {
+            return untrack(() => {
+                const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+                const onChange = () => {
+                    this.#current = window.innerWidth < MOBILE_BREAKPOINT;
+                };
+                mql.addEventListener('change', onChange);
+                onChange();
+                return () => {
+                    mql.removeEventListener('change', onChange);
+                };
+            });
+        });
+    }
+
+    get current() {
+        return this.#current;
+    }
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte
index 701660d60b..ae5d3fe726 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte
@@ -32,16 +32,16 @@
     </ul>
     <div class="flex space-x-6 sm:justify-center">
         <A aria-label="Exceptionless Facebook Website" href="https://www.facebook.com/exceptionless/" target="_blank" variant="navigation">
-            <IconFacebook class="h-5 w-5" />
+            <IconFacebook class="size-5" />
         </A>
         <A aria-label="Exceptionless Twitter Website" href="https://x.com/Exceptionless" target="_blank" variant="navigation">
-            <IconTwitter class="h-5 w-5" />
+            <IconTwitter class="size-5" />
         </A>
         <A aria-label="Exceptionless GitHub Website" href="https://github.com/exceptionless" target="_blank" variant="navigation">
-            <IconGitHub class="h-5 w-5" />
+            <IconGitHub class="size-5" />
         </A>
         <A aria-label="Exceptionless Website" href="https://exceptionless.com/" target="_blank" variant="navigation">
-            <IconWeb class="h-5 w-5" />
+            <IconWeb class="size-5" />
         </A>
     </div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte
index 03284833b2..221c7a95fb 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte
@@ -5,49 +5,36 @@
     import * as Avatar from '$comp/ui/avatar';
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
+    import * as Sidebar from '$comp/ui/sidebar';
     import { getGravatarFromCurrentUser } from '$features/users/gravatar.svelte';
     import logoSmall from '$lib/assets/exceptionless-48.png';
     import logo from '$lib/assets/logo.svg';
     import logoDark from '$lib/assets/logo-dark.svg';
-    import IconClose from '~icons/mdi/close';
-    import IconMenu from '~icons/mdi/menu';
     import IconSearch from '~icons/mdi/search';
+    import { MediaQuery } from 'runed';
 
     interface Props {
         isCommandOpen: boolean;
-        isMediumScreen?: boolean;
-        isSidebarOpen: boolean;
     }
 
-    let { isCommandOpen = $bindable(), isMediumScreen, isSidebarOpen = $bindable() }: Props = $props();
-
-    function onHamburgerClick(): void {
-        isSidebarOpen = !isSidebarOpen;
-    }
+    let { isCommandOpen = $bindable() }: Props = $props();
 
     function onSearchClick(): void {
         isCommandOpen = true;
     }
 
     const gravatar = getGravatarFromCurrentUser();
+    const isMediumScreenQuery = new MediaQuery('(min-width: 768px)');
 </script>
 
 <nav class="fixed z-30 w-full border-b bg-background text-foreground">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
         <div class="flex items-center justify-between">
             <div class="flex items-center justify-start">
-                <Button aria-controls="sidebar" class="mr-3 hidden p-1 lg:block" onclick={onHamburgerClick} size="icon" variant="outline">
-                    <IconMenu class="h-6 w-6" />
-                </Button>
-                <Button aria-controls="sidebar" class="mr-2 lg:hidden" onclick={onHamburgerClick} size="icon" variant="outline">
-                    {#if isSidebarOpen}
-                        <IconClose class="h-6 w-6" />
-                    {:else}
-                        <IconMenu class="h-6 w-6" />
-                    {/if}
-                </Button>
-                <a class="mr-14 flex min-w-[250px] dark:text-white" href="./">
-                    {#if isMediumScreen}
+                <Sidebar.Trigger variant="outline" class="size-9" />
+
+                <a class="ml-2 mr-14 flex min-w-[250px] dark:text-white lg:ml-3" href="./">
+                    {#if isMediumScreenQuery.matches}
                         <img alt="Exceptionless Logo" class="absolute top-[0px] mr-3 h-[65px] dark:hidden" src={logo} />
                         <img alt="Exceptionless Logo" class="absolute top-[0px] mr-3 hidden h-[65px] dark:block" src={logoDark} />
                     {:else}
@@ -57,7 +44,7 @@
             </div>
             <div class="flex items-center gap-x-2 lg:gap-x-3">
                 <Button onclick={onSearchClick} size="default" variant="outline">
-                    <IconSearch class="h-6 w-6" />
+                    <IconSearch />
                     Search
                     <DropdownMenu.Shortcut class="ml-12">⌘K</DropdownMenu.Shortcut>
                 </Button>
@@ -68,7 +55,7 @@
                     <DropdownMenu.Trigger>
                         {#snippet children()}
                             <Button class="rounded-full" size="icon" variant="ghost">
-                                <Avatar.Root class="h-7 w-7" title="Profile Image">
+                                <Avatar.Root class="size-7" title="Profile Image">
                                     {#await gravatar.src}
                                         <Avatar.Fallback><Loading /></Avatar.Fallback>
                                     {:then src}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Sidebar.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Sidebar.svelte
index 8caccd26b2..21b82a825d 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Sidebar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Sidebar.svelte
@@ -1,47 +1,39 @@
 <script lang="ts">
-    import type { NavigationItem } from '../../../routes';
+    import { page } from '$app/stores';
+    import * as Sidebar from '$comp/ui/sidebar';
+    import { useSidebar } from '$comp/ui/sidebar';
 
-    import SidebarMenuItem from './SidebarMenuItem.svelte';
+    import type { NavigationItem } from '../../../routes';
 
     interface Props {
-        isLargeScreen?: boolean;
-        isSidebarOpen?: boolean;
         routes: NavigationItem[];
     }
 
-    let { isLargeScreen, isSidebarOpen = $bindable(), routes }: Props = $props();
+    let { routes }: Props = $props();
     const dashboardRoutes = routes.filter((route) => route.group === 'Dashboards');
 
-    function onBackdropClick() {
-        isSidebarOpen = false;
-    }
+    const sidebar = useSidebar();
 </script>
 
-<aside
-    aria-label="Sidebar"
-    class="transition-width fixed left-0 top-0 z-20 flex h-full w-64 flex-shrink-0 flex-col bg-background pt-16 text-foreground duration-75 lg:flex {isSidebarOpen
-        ? 'lg:w-64'
-        : 'hidden lg:w-16'}"
-    id="sidebar"
->
-    <div class="relative flex min-h-0 flex-1 flex-col border-r pt-0" role="none">
-        <div class="flex flex-1 flex-col overflow-y-auto pb-4 pt-5">
-            <div class="flex-1 space-y-1 divide-y px-3">
-                <ul class="space-y-2 pb-2">
-                    {#each dashboardRoutes as route (route.href)}
-                        <li>
-                            <SidebarMenuItem href={route.href} icon={route.icon} {isLargeScreen} {isSidebarOpen} title={route.title}></SidebarMenuItem>
-                        </li>
-                    {/each}
-                </ul>
-            </div>
-        </div>
-    </div>
-</aside>
-
-<button
-    aria-label="Close sidebar"
-    class="fixed inset-0 z-10 bg-gray-900/50 dark:bg-gray-900/90 {!isLargeScreen && !!isSidebarOpen ? '' : 'hidden'}"
-    onclick={onBackdropClick}
-    title="Close sidebar"
-></button>
+<Sidebar.Root collapsible="icon">
+    <Sidebar.Content class={!sidebar.isMobile ? 'mt-16' : ''}>
+        <Sidebar.Group>
+            <Sidebar.Menu>
+                {#each dashboardRoutes as route (route.href)}
+                    {@const Icon = route.icon}
+                    <Sidebar.MenuItem>
+                        <Sidebar.MenuButton isActive={route.href === $page.url.pathname}>
+                            {#snippet child({ props })}
+                                <a href={route.href} title={route.title} {...props}>
+                                    <Icon />
+                                    <span>{route.title}</span>
+                                </a>
+                            {/snippet}
+                        </Sidebar.MenuButton>
+                    </Sidebar.MenuItem>
+                {/each}
+            </Sidebar.Menu>
+        </Sidebar.Group>
+    </Sidebar.Content>
+    <Sidebar.Rail />
+</Sidebar.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/SidebarMenuItem.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/SidebarMenuItem.svelte
deleted file mode 100644
index 4abbe2fb7c..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/SidebarMenuItem.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import type { Component } from 'svelte';
-    import type { HTMLAnchorAttributes } from 'svelte/elements';
-
-    import { page } from '$app/stores';
-
-    type Props = {
-        icon: Component;
-        isLargeScreen?: boolean;
-        isSidebarOpen?: boolean;
-        title: string;
-    } & HTMLAnchorAttributes;
-
-    let { href, icon, isLargeScreen, isSidebarOpen = $bindable(), title, ...props }: Props = $props();
-
-    const Icon = $state(icon);
-    const active = $derived($page.url.pathname === href);
-</script>
-
-<a
-    {href}
-    {title}
-    {...props}
-    class="group flex items-center rounded-lg p-2 text-base font-normal hover:bg-accent hover:text-accent-foreground"
-    class:bg-accent={active}
-    class:text-accent-foreground={active}
->
-    <Icon class="h-6 w-6 text-muted-foreground transition duration-75 group-hover:text-foreground {active ? 'text-foreground' : ''}" />
-    <span class="ml-3 {!isSidebarOpen && isLargeScreen ? 'lg:absolute lg:hidden' : ''}">{title}</span>
-</a>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
index 2ff0134790..8383d9870b 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
@@ -2,15 +2,14 @@
     import type { Snippet } from 'svelte';
 
     import { page } from '$app/stores';
+    import { useSidebar } from '$comp/ui/sidebar';
     import { accessToken, gotoLogin } from '$features/auth/index.svelte';
     import { getMeQuery } from '$features/users/api.svelte';
     import { isEntityChangedType, type WebSocketMessageType } from '$features/websockets/models';
     import { WebSocketClient } from '$features/websockets/WebSocketClient.svelte';
-    import { persisted } from '$shared/persisted.svelte';
     import { validate } from '$shared/validation';
     import { setModelValidator, useMiddleware } from '@exceptionless/fetchclient';
     import { useQueryClient } from '@tanstack/svelte-query';
-    import { MediaQuery } from 'runed';
 
     import { type NavigationItemContext, routes } from '../routes';
     import FooterLayout from './(components)/layouts/Footer.svelte';
@@ -24,12 +23,8 @@
 
     let { children }: Props = $props();
     let isAuthenticated = $derived(accessToken.value !== null);
-
-    let isSidebarOpen = persisted('sidebar-open', false);
+    const sidebar = useSidebar();
     let isCommandOpen = $state(false);
-    const isSmallScreenQuery = new MediaQuery('(min-width: 640px)');
-    const isMediumScreenQuery = new MediaQuery('(min-width: 768px)');
-    const isLargeScreenQuery = new MediaQuery('(min-width: 1024px)');
 
     setModelValidator(validate);
     useMiddleware(async (ctx, next) => {
@@ -79,8 +74,8 @@
 
     // Close Sidebar on page change on mobile
     page.subscribe(() => {
-        if (isSmallScreenQuery.matches) {
-            isSidebarOpen.value = false;
+        if (sidebar.isMobile) {
+            sidebar.setOpen(false);
         }
     });
 
@@ -129,16 +124,13 @@
 </script>
 
 {#if isAuthenticated}
-    <NavbarLayout bind:isCommandOpen bind:isSidebarOpen={isSidebarOpen.value} isMediumScreen={isMediumScreenQuery.matches}></NavbarLayout>
-    <div class="flex overflow-hidden pt-16">
-        <SidebarLayout bind:isSidebarOpen={isSidebarOpen.value} isLargeScreen={isLargeScreenQuery.matches} routes={filteredRoutes} />
-
-        <div class="relative h-full w-full overflow-y-auto text-secondary-foreground {isSidebarOpen.value ? 'lg:ml-64' : 'lg:ml-16'}">
-            <main>
-                <div class="px-4 pt-4">
-                    <NavigationCommand bind:open={isCommandOpen} routes={filteredRoutes} />
-                    {@render children()}
-                </div>
+    <NavbarLayout bind:isCommandOpen></NavbarLayout>
+    <SidebarLayout routes={filteredRoutes} />
+    <div class="flex w-full overflow-hidden pt-16">
+        <div class="w-full text-secondary-foreground">
+            <main class="px-4 pt-4">
+                <NavigationCommand bind:open={isCommandOpen} routes={filteredRoutes} />
+                {@render children()}
             </main>
 
             <FooterLayout></FooterLayout>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte
index 3a673430d8..8fce556724 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte
@@ -17,7 +17,7 @@
     <ul class="divide-y divide-border">
         <li class="pb-4">
             <div class="flex items-center space-x-4">
-                <IconLaptop class="h-6 w-6" />
+                <IconLaptop />
                 <div class="min-w-0 flex-1">
                     <P class="font-semibold">Wisconsin</P>
                     <Muted>Signed in on <DateTime value={new Date()}></DateTime></Muted>
@@ -29,7 +29,7 @@
         </li>
         <li class="py-4">
             <div class="flex items-center space-x-4">
-                <IconCellphone class="h-6 w-6" />
+                <IconCellphone />
                 <div class="min-w-0 flex-1">
                     <P class="font-semibold">Texas</P>
                     <Muted>Signed in on <DateTime value={new Date()}></DateTime></Muted>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
index 0f4b6b78f4..b7a1b9b2bb 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
 
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
+    import * as Sidebar from '$comp/ui/sidebar';
     import { Toaster } from '$comp/ui/sonner';
     import { accessToken } from '$features/auth/index.svelte';
     import { type FetchClientContext, setAccessTokenFunc, setBaseUrl, setRequestOptions, useMiddleware } from '@exceptionless/fetchclient';
@@ -73,7 +74,9 @@
     <ModeWatcher defaultMode={'dark'} />
 
     <QueryClientProvider client={queryClient}>
-        {@render children()}
+        <Sidebar.Provider>
+            {@render children()}
+        </Sidebar.Provider>
 
         <SvelteQueryDevtools />
     </QueryClientProvider>
diff --git a/src/Exceptionless.Web/ClientApp/tailwind.config.js b/src/Exceptionless.Web/ClientApp/tailwind.config.js
index a1dded375b..256153925d 100644
--- a/src/Exceptionless.Web/ClientApp/tailwind.config.js
+++ b/src/Exceptionless.Web/ClientApp/tailwind.config.js
@@ -59,6 +59,16 @@ const config = {
                 secondary: {
                     DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
                     foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
+                },
+                sidebar: {
+                    accent: 'hsl(var(--sidebar-accent))',
+                    'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+                    border: 'hsl(var(--sidebar-border))',
+                    DEFAULT: 'hsl(var(--sidebar-background))',
+                    foreground: 'hsl(var(--sidebar-foreground))',
+                    primary: 'hsl(var(--sidebar-primary))',
+                    'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+                    ring: 'hsl(var(--sidebar-ring))'
                 }
             },
             fontFamily: {