From 4123db21c57b6c5f4327f8b4726843c5c9257e96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <nemile.re@gmail.com>
Date: Fri, 14 Mar 2025 16:54:30 +0400
Subject: [PATCH] Fix put back sidebar trigger

---
 apps/console/src/components/AppSidebarShell.tsx | 14 ++++++++------
 apps/console/src/components/ui/sidebar.tsx      | 10 +++++++---
 apps/console/src/layouts/ConsoleLayout.tsx      | 13 +++++++++----
 apps/console/src/pages/FrameworkListPage.tsx    |  4 ++--
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/apps/console/src/components/AppSidebarShell.tsx b/apps/console/src/components/AppSidebarShell.tsx
index a2297b549..a6036363d 100644
--- a/apps/console/src/components/AppSidebarShell.tsx
+++ b/apps/console/src/components/AppSidebarShell.tsx
@@ -21,12 +21,14 @@ export function AppSidebarShell({
 }: AppSidebarShellProps) {
   return (
     <Sidebar variant="sidebar" {...props}>
-      <SidebarHeader>{organizationSwitcher}</SidebarHeader>
-      <SidebarContent>
-        {navMain}
-        <NavSecondary className="mt-auto" />
-      </SidebarContent>
-      <SidebarFooter>{navUser}</SidebarFooter>
+      <div className="p-4">
+        <SidebarHeader>{organizationSwitcher}</SidebarHeader>
+        <SidebarContent>
+          {navMain}
+          <NavSecondary className="mt-auto" />
+        </SidebarContent>
+        <SidebarFooter>{navUser}</SidebarFooter>
+      </div>
     </Sidebar>
   );
 }
diff --git a/apps/console/src/components/ui/sidebar.tsx b/apps/console/src/components/ui/sidebar.tsx
index 74b229a89..8158e728e 100644
--- a/apps/console/src/components/ui/sidebar.tsx
+++ b/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>
   );
diff --git a/apps/console/src/layouts/ConsoleLayout.tsx b/apps/console/src/layouts/ConsoleLayout.tsx
index 6accb98bf..412113242 100644
--- a/apps/console/src/layouts/ConsoleLayout.tsx
+++ b/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>
-        <div className="mx-auto w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
+      <SidebarInset className="relative">
+        <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
diff --git a/apps/console/src/pages/FrameworkListPage.tsx b/apps/console/src/pages/FrameworkListPage.tsx
index be696eea8..707a87c5d 100644
--- a/apps/console/src/pages/FrameworkListPage.tsx
+++ b/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>