From 3fb10c4172686c456c8e9aa21ef8adfdafdf951d Mon Sep 17 00:00:00 2001
From: rathi <rathiharivansh@gmail.com>
Date: Wed, 11 Dec 2024 17:45:56 -0500
Subject: [PATCH] hide sidebar component

---
 .../layout/DashboardLayout/index.tsx          | 72 +++++++++++++------
 src/components/layout/Sidebar/index.tsx       | 41 +++++++++--
 src/hooks/useSidebar.ts                       | 10 +++
 3 files changed, 96 insertions(+), 27 deletions(-)
 create mode 100644 src/hooks/useSidebar.ts

diff --git a/src/components/layout/DashboardLayout/index.tsx b/src/components/layout/DashboardLayout/index.tsx
index 3cf3294..c391afe 100644
--- a/src/components/layout/DashboardLayout/index.tsx
+++ b/src/components/layout/DashboardLayout/index.tsx
@@ -1,33 +1,65 @@
-import React from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { Outlet } from 'react-router-dom';
+import { PanelLeft } from 'lucide-react';
 import { Header } from '../Header/index';
 import { Sidebar } from '../Sidebar/index';
+import { cn } from '../../../lib/utils';
+
+type SidebarContextType = {
+  isHidden: boolean;
+  setIsHidden: (hidden: boolean) => void;
+};
+
+export const SidebarContext = createContext<SidebarContextType>({
+  isHidden: false,
+  setIsHidden: () => {},
+});
+
+export const useSidebar = () => useContext(SidebarContext);
 
 const DashboardLayout = () => {
+  const [isHidden, setIsHidden] = useState(false);
+
   return (
-    <div className="flex h-screen bg-secondary/20">
-      {/* Fixed header */}
-      <div className="fixed top-0 left-0 right-0 z-50">
-        <Header />
-      </div>
-
-      {/* Sidebar and main content */}
-      <div className="flex w-full pt-16">
-        {/* Fixed sidebar */}
-        <div className="fixed left-0 top-16 bottom-0 w-[280px] p-4 overflow-y-auto">
-          <Sidebar />
+    <SidebarContext.Provider value={{ isHidden, setIsHidden }}>
+      <div className="flex h-screen bg-secondary/20">
+        {/* Fixed header */}
+        <div className="fixed top-0 left-0 right-0 z-50">
+          <Header />
         </div>
 
-        {/* Main content area */}
-        <div className="flex-1 ml-[280px]">
-          <main className="h-[calc(100vh-4rem)] relative">
-            <div className="h-full">
-              <Outlet />
-            </div>
-          </main>
+        {/* Sidebar and main content */}
+        <div className="flex w-full pt-16">
+          {/* Fixed sidebar */}
+          <div className="fixed left-0 top-16 bottom-0 w-[280px] p-4 overflow-y-auto">
+            <Sidebar />
+          </div>
+
+          {/* Main content area */}
+          <div className={cn(
+            "flex-1 transition-all duration-300",
+            isHidden ? "ml-0" : "ml-[280px]"
+          )}>
+            <main className="h-[calc(100vh-4rem)] relative">
+              <div className="h-full">
+                <Outlet />
+              </div>
+            </main>
+          </div>
         </div>
+
+        {/* Fixed Show Sidebar Button - Only visible when sidebar is hidden */}
+        {isHidden && (
+          <button
+            onClick={() => setIsHidden(false)}
+            className="fixed left-4 bottom-4 z-50 flex items-center gap-2 px-4 py-2 bg-background border rounded-xl shadow-lg transition-all duration-200 text-sm font-medium text-muted-foreground hover:bg-accent"
+          >
+            <PanelLeft className="h-5 w-5" />
+            <span>Show Sidebar</span>
+          </button>
+        )}
       </div>
-    </div>
+    </SidebarContext.Provider>
   );
 };
 
diff --git a/src/components/layout/Sidebar/index.tsx b/src/components/layout/Sidebar/index.tsx
index 3dfe29d..bb698bc 100644
--- a/src/components/layout/Sidebar/index.tsx
+++ b/src/components/layout/Sidebar/index.tsx
@@ -4,10 +4,13 @@ import {
   Settings,
   MessageSquare,
   Upload,
-  History
+  History,
+  PanelLeftClose,
+  PanelLeft
 } from 'lucide-react';
 import { cn } from '../../../lib/utils';
 import { useLatestChat } from '../../../hooks/useLatestChat';
+import { useSidebar } from '../../../hooks/useSidebar';
 
 const sidebarItems = [
   {
@@ -35,6 +38,7 @@ const sidebarItems = [
 const Sidebar = () => {
   const location = useLocation();
   const { navigateToChat } = useLatestChat();
+  const { isHidden, setIsHidden } = useSidebar();
 
   const isActive = (path: string) => {
     if (path.startsWith('/dashboard/ask')) {
@@ -44,8 +48,13 @@ const Sidebar = () => {
   };
 
   return (
-    <div className="h-full">
-      <div className="flex flex-col h-full space-y-4">
+    <div 
+      className={cn(
+        "fixed left-0 top-16 bottom-0 w-[280px] bg-background border-r transition-all duration-300 z-50",
+        isHidden ? "-translate-x-[280px]" : "translate-x-0"
+      )}
+    >
+      <div className="flex flex-col h-full p-4">
         {/* Navigation Links */}
         <nav className="flex-1 space-y-1">
           {sidebarItems.map((item, index) => {
@@ -62,14 +71,14 @@ const Sidebar = () => {
                     'w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200',
                     active
                       ? 'bg-purple-50/50 text-purple-500'
-                      : 'text-muted-foreground hover:bg-purple-50/30 hover:text-purple-500'
+                      : 'text-muted-foreground'
                   )}
                 >
                   <Icon className={cn(
                     'h-5 w-5',
                     active
                       ? 'text-purple-500'
-                      : 'text-muted-foreground group-hover:text-purple-500'
+                      : 'text-muted-foreground'
                   )} />
                   {item.label}
                 </button>
@@ -84,20 +93,38 @@ const Sidebar = () => {
                   'flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200',
                   active
                     ? 'bg-purple-50/50 text-purple-500'
-                    : 'text-muted-foreground hover:bg-purple-50/30 hover:text-purple-500'
+                    : 'text-muted-foreground'
                 )}
               >
                 <Icon className={cn(
                   'h-5 w-5',
                   active
                     ? 'text-purple-500'
-                    : 'text-muted-foreground group-hover:text-purple-500'
+                    : 'text-muted-foreground'
                 )} />
                 {item.label}
               </Link>
             );
           })}
         </nav>
+
+        {/* Toggle Button */}
+        <button
+          onClick={() => setIsHidden(!isHidden)}
+          className="flex items-center gap-2 px-4 py-2 mt-4 text-sm font-medium rounded-xl transition-all duration-200 text-muted-foreground"
+        >
+          {isHidden ? (
+            <>
+              <PanelLeft className="h-5 w-5" />
+              Show Sidebar
+            </>
+          ) : (
+            <>
+              <PanelLeftClose className="h-5 w-5" />
+              Hide Sidebar
+            </>
+          )}
+        </button>
       </div>
     </div>
   );
diff --git a/src/hooks/useSidebar.ts b/src/hooks/useSidebar.ts
new file mode 100644
index 0000000..6cf102d
--- /dev/null
+++ b/src/hooks/useSidebar.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { SidebarContext } from '../components/layout/DashboardLayout';
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider');
+  }
+  return context;
+};