add new section to the side bar

Author: Mbeaulne

src/routes/Dashboard/DashboardLayout.tsx

@@ -1,9 +1,12 @@
 import { Link, Outlet } from "@tanstack/react-router";
 
+import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
+import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
 import { Icon, type IconName } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading, Text } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
+import { DOCUMENTATION_URL } from "@/utils/constants";
 
 interface SidebarItem {
   to: string;
@@ -19,7 +22,15 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
   { to: "/dashboard/recently-viewed", label: "Recently Viewed", icon: "Clock" },
 ];
 
+const navItemClass = (isActive: boolean) =>
+  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",
+  );
+
 export function DashboardLayout() {
+  const requiresAuthorization = isAuthorizationRequired();
+
   return (
     <div className="w-full px-8 py-6">
       <BlockStack gap="6">
@@ -36,31 +47,53 @@ export function DashboardLayout() {
         </InlineStack>
 
         <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"
-          >
-            {SIDEBAR_ITEMS.map((item) => (
-              <Link
-                key={item.to}
-                to={item.to}
-                className="w-full"
-                activeProps={{ className: "is-active" }}
+          {/* Sidebar */}
+          <div className="w-48 shrink-0 border-r border-border pr-4 flex flex-col justify-between self-stretch">
+            {/* Top nav */}
+            <BlockStack gap="1">
+              {SIDEBAR_ITEMS.map((item) => (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  className="w-full"
+                  activeProps={{ className: "is-active" }}
+                >
+                  {({ isActive }) => (
+                    <div className={navItemClass(isActive)}>
+                      <Icon name={item.icon} size="sm" />
+                      <Text size="sm">{item.label}</Text>
+                    </div>
+                  )}
+                </Link>
+              ))}
+            </BlockStack>
+
+            {/* Bottom utilities */}
+            <BlockStack gap="1" className="border-t border-border pt-3">
+              <a
+                href={DOCUMENTATION_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={navItemClass(false)}
               >
+                <Icon name="BookOpen" size="sm" />
+                <Text size="sm">Docs</Text>
+              </a>
+              <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",
-                    )}
-                  >
-                    <Icon name={item.icon} size="sm" />
-                    <Text size="sm">{item.label}</Text>
+                  <div className={navItemClass(isActive)}>
+                    <Icon name="Settings" size="sm" />
+                    <Text size="sm">Settings</Text>
                   </div>
                 )}
               </Link>
-            ))}
-          </BlockStack>
+              {requiresAuthorization && (
+                <div className="px-3 py-2">
+                  <TopBarAuthentication />
+                </div>
+              )}
+            </BlockStack>
+          </div>
 
           <BlockStack className="flex-1 min-w-0">
             <Outlet />