From 20f904cc2bab5341d2f1a4c73a753a7919f6b6e5 Mon Sep 17 00:00:00 2001
From: mbeaulne <matt.beaulne@gmail.com>
Date: Tue, 24 Mar 2026 16:57:46 -0400
Subject: [PATCH] add new section to the side bar

---
 .../PipelineRunFiltersBar.tsx                 |  1 -
 src/routes/Dashboard/DashboardLayout.tsx      | 80 +++++++++++++++----
 2 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx b/src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx
index 44cd84dc6..6e929c685 100644
--- a/src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx
+++ b/src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx
@@ -221,7 +221,6 @@ export function PipelineRunFiltersBar({
           />
         </div>
 
-        {/* Annotation Filter button */}
         {!isAnnotationExpanded && (
           <Button
             variant="outline"
diff --git a/src/routes/Dashboard/DashboardLayout.tsx b/src/routes/Dashboard/DashboardLayout.tsx
index c2f979730..615027a8f 100644
--- a/src/routes/Dashboard/DashboardLayout.tsx
+++ b/src/routes/Dashboard/DashboardLayout.tsx
@@ -1,10 +1,14 @@
 import { Link, Outlet } from "@tanstack/react-router";
 
+import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
+import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
 import { Badge } from "@/components/ui/badge";
 import { Icon, type IconName } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Link as UILink } from "@/components/ui/link";
 import { Heading, Text } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
+import { DOCUMENTATION_URL } from "@/utils/constants";
 
 interface SidebarItem {
   to: string;
@@ -20,7 +24,15 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   { to: "/dashboard/recently-viewed", label: "Recently Viewed", icon: "Clock" },
 ];
 
+const navItemClass = (isActive: boolean) =>
+  cn(
+    "w-full px-3 py-2 rounded-md text-sm cursor-pointer hover:bg-accent",
+    isActive && "bg-accent font-medium",
+  );
+
 export function DashboardLayout() {
+  const requiresAuthorization = isAuthorizationRequired();
+
   return (
     <div className="w-full px-8 py-6">
       <BlockStack gap="6">
@@ -33,29 +45,63 @@ export function DashboardLayout() {
 
         <InlineStack gap="8" blockAlign="start" className="w-full min-h-100">
           <BlockStack
-            gap="1"
-            className="w-48 shrink-0 border-r border-border pr-4"
+            inlineAlign="space-between"
+            className="w-48 shrink-0 border-r border-border pr-4 self-stretch"
           >
-            {SIDEBAR_ITEMS.map((item) => (
-              <Link
-                key={item.to}
-                to={item.to}
-                className="w-full"
-                activeProps={{ className: "is-active" }}
+            {/* Top nav */}
+            <BlockStack gap="1">
+              {SIDEBAR_ITEMS.map((item) => (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  className="w-full"
+                  activeProps={{ className: "is-active" }}
+                >
+                  {({ isActive }) => (
+                    <InlineStack
+                      gap="2"
+                      blockAlign="center"
+                      className={navItemClass(isActive)}
+                    >
+                      <Icon name={item.icon} size="sm" />
+                      <Text size="sm">{item.label}</Text>
+                    </InlineStack>
+                  )}
+                </Link>
+              ))}
+            </BlockStack>
+
+            {/* Bottom utilities */}
+            <BlockStack gap="1" className="border-t border-border pt-3">
+              <UILink
+                href={DOCUMENTATION_URL}
+                external
+                variant="block"
+                className={navItemClass(false)}
               >
+                <InlineStack gap="2" blockAlign="center">
+                  <Icon name="CircleQuestionMark" size="sm" />
+                  <Text size="sm">Docs</Text>
+                </InlineStack>
+              </UILink>
+              <Link to="/settings/backend" className="w-full">
                 {({ isActive }) => (
-                  <div
-                    className={cn(
-                      "flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm cursor-pointer hover:bg-accent",
-                      isActive && "bg-accent font-medium",
-                    )}
+                  <InlineStack
+                    gap="2"
+                    blockAlign="center"
+                    className={navItemClass(isActive)}
                   >
-                    <Icon name={item.icon} size="sm" />
-                    <Text size="sm">{item.label}</Text>
-                  </div>
+                    <Icon name="Settings" size="sm" />
+                    <Text size="sm">Settings</Text>
+                  </InlineStack>
                 )}
               </Link>
-            ))}
+              {requiresAuthorization && (
+                <div className="px-3 py-2">
+                  <TopBarAuthentication />
+                </div>
+              )}
+            </BlockStack>
           </BlockStack>
 
           <BlockStack className="flex-1 min-w-0">