Fix put back sidebar trigger

apps/console/src/components/AppSidebarShell.tsx

@@ -21,12 +21,14 @@ export function AppSidebarShell({
 }: AppSidebarShellProps) {
   return (
     <Sidebar variant="sidebar" {...props}>
-      <SidebarHeader>{organizationSwitcher}</SidebarHeader>
+      <div className="p-4">
-      <SidebarContent>
+        <SidebarHeader>{organizationSwitcher}</SidebarHeader>
-        {navMain}
+        <SidebarContent>
-        <NavSecondary className="mt-auto" />
+          {navMain}
-      </SidebarContent>
+          <NavSecondary className="mt-auto" />
-      <SidebarFooter>{navUser}</SidebarFooter>
+        </SidebarContent>
+        <SidebarFooter>{navUser}</SidebarFooter>
+      </div>
     </Sidebar>
   );
 }

apps/console/src/components/ui/sidebar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import { PanelLeft, PanelLeftClose } from "lucide-react";
 
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
@@ -261,7 +261,7 @@ const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, open } = useSidebar();
 
   return (
     <Button
@@ -276,7 +276,11 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft />
+      {open ? (
+        <PanelLeftClose fontWeight={400} className="text-gray-500" />
+      ) : (
+        <PanelLeft fontWeight={400} className="text-gray-500" />
+      )}
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

apps/console/src/layouts/ConsoleLayout.tsx

@@ -9,7 +9,11 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/toaster";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import { ConsoleLayoutBreadcrumbFrameworkOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql";
@@ -379,10 +383,11 @@ export default function ConsoleLayout() {
   return (
     <SidebarProvider>
       <Suspense>
-        <AppSidebar className="p-4" />
+        <AppSidebar />
       </Suspense>
-      <SidebarInset>
+      <SidebarInset className="relative">
-        <div className="mx-auto w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
+        <SidebarTrigger className="absolute top-7 left-1" />
+        <div className="mx-auto w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl py-8 px-10">
           <header className="flex shrink-0 items-center gap-2">
             <Routes>
               <Route

apps/console/src/pages/FrameworkListPage.tsx

@@ -201,7 +201,7 @@ function FrameworkListPageContent({
                 <DialogTrigger asChild>
                   <Button variant="outline">
                     <Upload className="mr-2 h-4 w-4" />
-                    Import Framework
+                    Import
                   </Button>
                 </DialogTrigger>
                 <DialogContent>
@@ -231,7 +231,7 @@ function FrameworkListPageContent({
               <Button asChild>
                 <Link to={`/organizations/${organizationId}/frameworks/create`}>
                   <Plus className="mr-2 h-4 w-4" />
-                  Create Framework
+                  Create
                 </Link>
               </Button>
             </div>