feature - left nav match (#217)

## Summary

This PR updates the left navigation to align with the new structure in
the Figma design. The updated order places **Home** at the top, followed
by **your dataset entities**, and then **resources** at the bottom.

In a future PR, I will add templates for the **Models**, **Groupbys**,
and **Staging Queries** pages, including tabs for **Observability** and
**Job Tracking**. Currently, these routes will result in a 404 error.

## Checklist
- [ ] Added Unit Tests
- [ ] Covered by existing CI
- [ ] Integration tested
- [ ] Documentation update

Author: ken-zlai

frontend/src/lib/components/NavigationBar/NavigationBar.svelte

@@ -32,6 +32,8 @@
 	import IconExclamationTriangle from '~icons/heroicons/exclamation-triangle-16-solid';
 	import IconMagnifyingGlass from '~icons/heroicons/magnifying-glass-16-solid';
 	import IconUser from '~icons/heroicons/user';
+	import IconSquaresSolid from '~icons/heroicons/squares-2x2-16-solid';
+	import { Separator } from '$lib/components/ui/separator';
 
 	type Props = {
 		navItems: Entity[];
@@ -113,19 +115,12 @@
 			</span>
 		{/if}
 	</Button>
-	<Button
-		variant="ghost"
-		class="mb-9 text-regular-medium"
-		size="nav"
-		href="https://docs.chronon.ai"
-		target="_blank"
-		rel="noopener noreferrer"
-		icon="leading"
-	>
-		<IconDocumentText class="text-muted-icon-neutral" />
-		<span class="text-muted-foreground">Chronon docs</span>
+	<Button variant="ghost" class="text-regular-medium" size="nav" href="/" icon="leading">
+		<IconSquaresSolid class="text-muted-icon-neutral" />
+		<span class="text-muted-foreground">Home</span>
 	</Button>
-	<span class="mb-[10px] px-2 text-xs-medium text-muted-foreground">Observability</span>
+	<Separator class="my-6" />
+	<span class="mb-[10px] px-2 text-xs-medium text-muted-foreground">Datasets</span>
 	<ul class="space-y-1 flex-grow">
 		{#each navItems as item}
 			<li>
@@ -143,7 +138,32 @@
 			</li>
 		{/each}
 	</ul>
-	<div class="flex items-center mt-auto">
+	<Separator class="my-6" />
+	<span class="mb-[10px] px-2 text-xs-medium text-muted-foreground">Resources</span>
+	<Button
+		variant="ghost"
+		class="w-full text-regular-medium my-1"
+		size="nav"
+		href="https://docs.chronon.ai"
+		target="_blank"
+		rel="noopener noreferrer"
+		icon="leading"
+	>
+		<IconDocumentText class="text-muted-icon-neutral" />
+		<span class="text-muted-foreground">Chronon docs</span>
+	</Button>
+	<Button
+		variant="ghost"
+		class="w-full text-regular-medium my-1"
+		size="nav"
+		href="mailto:[email protected]"
+		icon="leading"
+	>
+		<IconDocumentText class="text-muted-icon-neutral" />
+		<span class="text-muted-foreground">Support</span>
+	</Button>
+	<Separator class="mt-6 mb-4" />
+	<div class="flex items-center">
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild let:builder>
 				<Button variant="ghost" class="flex items-center cursor-pointer" builders={[builder]}>

frontend/src/lib/types/Entity/Entity.ts

@@ -1,6 +1,7 @@
 import IconCube from '~icons/heroicons/cube-16-solid';
-import IconPuzzlePiece from '~icons/heroicons/puzzle-piece-16-solid';
 import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
+import IconCubeTransparent from '~icons/heroicons/cube-transparent';
+import IconRectangleStack from '~icons/heroicons/rectangle-stack-16-solid';
 
 export const entityConfig = [
 	{
@@ -9,17 +10,24 @@ export const entityConfig = [
 		icon: IconCube,
 		id: 'models'
 	},
-	{
-		label: 'GroupBys',
-		path: '/groupbys',
-		icon: IconPuzzlePiece,
-		id: 'groupbys'
-	},
 	{
 		label: 'Joins',
 		path: '/joins',
 		icon: IconSquare3Stack3d,
 		id: 'joins'
+	},
+	{
+		label: 'GroupBys',
+		path: '/GroupBys',
+		icon: IconRectangleStack,
+		id: 'groupbys'
+	},
+
+	{
+		label: 'Staging Queries',
+		path: '/StagingQueries',
+		icon: IconCubeTransparent,
+		id: 'stagingqueries'
 	}
 ] as const;
 

frontend/src/routes/+layout.svelte

@@ -23,8 +23,7 @@
 	<NavigationSlider />
 
 	<!-- Left navigation -->
-	<NavigationBar navItems={entityConfig.filter((entity) => entity.id === 'joins')} {user} />
-
+	<NavigationBar navItems={[...entityConfig]} {user} />
 	<!-- Main content -->
 	<main
 		class="flex-1 flex flex-col overflow-hidden bg-neutral-100 relative rounded-tl-xl"