Merge pull request #190 from ag-ui-protocol/chore/add-disabling-of-sidebar

chore: add disabling of dojo sidebar and integration picker

Author: ranst91

typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx

@@ -4,11 +4,15 @@ import React, { useState } from "react";
 import { ViewerLayout } from "@/components/layout/viewer-layout";
 import { Sidebar } from "@/components/sidebar/sidebar";
 
-import { usePathname } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import featureConfig from "@/config";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const sidebarDisabled = searchParams.get("sidebar") === "disabled";
+  const integrationPickerDisabled = searchParams.get("picker") === "false";
 
   // Extract the current demo ID from the pathname
   const pathParts = pathname.split("/");
@@ -19,7 +23,7 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
     <ViewerLayout showFileTree={false} showCodeEditor={false}>
       <div className="flex h-full w-full overflow-hidden">
         {/* Sidebar */}
-        <Sidebar activeTab={"preview"} readmeContent={""} />
+        {!sidebarDisabled && <Sidebar activeTab={"preview"} readmeContent={""} pickerDisabled={integrationPickerDisabled} />}
 
         {/* Content */}
         <div className="flex-1 overflow-auto">

typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx

@@ -23,9 +23,10 @@ interface SidebarProps {
   activeTab?: string;
   onTabChange?: (tab: string) => void;
   readmeContent?: string | null;
+  pickerDisabled?: boolean;
 }
 
-export function Sidebar({ activeTab = "preview", onTabChange, readmeContent }: SidebarProps) {
+export function Sidebar({ activeTab = "preview", onTabChange, readmeContent, pickerDisabled }: SidebarProps) {
   const router = useRouter();
   const pathname = usePathname();
   const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false);
@@ -105,30 +106,32 @@ export function Sidebar({ activeTab = "preview", onTabChange, readmeContent }: S
       {/* Controls Section */}
       <div className="p-4 border-b bg-background">
         {/* Preview/Code Tabs */}
-        <div className="mb-1">
-          <label className="block text-sm font-medium text-muted-foreground mb-2">View</label>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="w-full justify-between">
-                {currentIntegration ? currentIntegration.name : "Select Integration"}
-                <ChevronDown className="h-4 w-4 opacity-50" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56">
-              {menuIntegrations.map((integration) => (
-                <DropdownMenuItem
-                  key={integration.id}
-                  onClick={() => {
-                    router.push(`/${integration.id}`);
-                  }}
-                  className="cursor-pointer"
-                >
-                  <span>{integration.name}</span>
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+        {!pickerDisabled && (
+          <div className="mb-1">
+            <label className="block text-sm font-medium text-muted-foreground mb-2">View</label>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="w-full justify-between">
+                  {currentIntegration ? currentIntegration.name : "Select Integration"}
+                  <ChevronDown className="h-4 w-4 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56">
+                {menuIntegrations.map((integration) => (
+                  <DropdownMenuItem
+                    key={integration.id}
+                    onClick={() => {
+                      router.push(`/${integration.id}`);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <span>{integration.name}</span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
       </div>
 
       {/* Demo List */}