From 496a2340c53efecf85f4a2b5b0f870056e846de4 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Thu, 22 Feb 2024 15:20:12 +0530
Subject: [PATCH] chore: sidebar responsiveness.

---
 god-mode/app/header.tsx                       |  4 +-
 god-mode/app/sidebar.tsx                      | 40 ++++++++++++++++---
 god-mode/components/sidebar/help-section.tsx  | 11 +----
 .../sidebar/sidebar-menu-hamburger-toogle.tsx | 21 ++++++++++
 god-mode/components/sidebar/sidebar-menu.tsx  | 10 ++++-
 god-mode/hooks/use-outside-click-detector.tsx | 19 +++++++++
 6 files changed, 87 insertions(+), 18 deletions(-)
 create mode 100644 god-mode/components/sidebar/sidebar-menu-hamburger-toogle.tsx
 create mode 100644 god-mode/hooks/use-outside-click-detector.tsx

diff --git a/god-mode/app/header.tsx b/god-mode/app/header.tsx
index f8a5b5386..353552439 100644
--- a/god-mode/app/header.tsx
+++ b/god-mode/app/header.tsx
@@ -8,6 +8,8 @@ import { observer } from "mobx-react-lite";
 import { Breadcrumbs } from "@plane/ui";
 // icons
 import { Settings } from "lucide-react";
+// components
+import { SidebarHamburgerToggle } from "components/sidebar/sidebar-menu-hamburger-toogle";
 
 export const InstanceHeader: FC = observer(() => {
   const pathName = usePathname();
@@ -35,6 +37,7 @@ export const InstanceHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <SidebarHamburgerToggle />
         {title && (
           <div>
             <Breadcrumbs>
@@ -42,7 +45,6 @@ export const InstanceHeader: FC = observer(() => {
                 type="text"
                 icon={<Settings className="h-4 w-4 text-custom-text-300" />}
                 label="Settings"
-                link="/"
               />
               <Breadcrumbs.BreadcrumbItem type="text" label={title} />
             </Breadcrumbs>
diff --git a/god-mode/app/sidebar.tsx b/god-mode/app/sidebar.tsx
index bbf792f95..cb65fcf93 100644
--- a/god-mode/app/sidebar.tsx
+++ b/god-mode/app/sidebar.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
 import useAppTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { HelpSection, SidebarMenu, SidebarDropdown } from "components/sidebar";
 
@@ -11,15 +12,42 @@ export interface IInstanceSidebar {}
 
 export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
   // store
-  const { sidebarCollapsed } = useAppTheme();
+  const themeStore = useAppTheme();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (themeStore.sidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        themeStore.toggleSidebar();
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        themeStore.toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [themeStore]);
 
   return (
     <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative ${
-        sidebarCollapsed ? "" : "md:w-[280px]"
-      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
+      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+        fixed md:relative
+        ${themeStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${themeStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        md:ml-0 ${themeStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${themeStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+      `}
     >
-      <div className="flex h-full w-full flex-1 flex-col">
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
         <SidebarDropdown />
         <SidebarMenu />
         <HelpSection />
diff --git a/god-mode/components/sidebar/help-section.tsx b/god-mode/components/sidebar/help-section.tsx
index c2844e26f..9d1d2bc2d 100644
--- a/god-mode/components/sidebar/help-section.tsx
+++ b/god-mode/components/sidebar/help-section.tsx
@@ -1,7 +1,7 @@
 import { FC, useState, useRef } from "react";
 import { Transition } from "@headlessui/react";
 import Link from "next/link";
-import { FileText, HelpCircle, MessagesSquare, MoveLeft } from "lucide-react";
+import { FileText, HelpCircle, MoveLeft } from "lucide-react";
 // hooks
 import { useAppTheme } from "hooks/use-theme";
 // icons
@@ -25,12 +25,6 @@ const helpOptions = [
     href: "https://github.com/makeplane/plane/issues/new/choose",
     Icon: GithubIcon,
   },
-  {
-    name: "Chat with us",
-    href: null,
-    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
-    Icon: MessagesSquare,
-  },
 ];
 
 export const HelpSection: FC = () => {
@@ -100,7 +94,7 @@ export const HelpSection: FC = () => {
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
-              {helpOptions.map(({ name, Icon, href, onClick }) => {
+              {helpOptions.map(({ name, Icon, href }) => {
                 if (href)
                   return (
                     <Link href={href} key={name} target="_blank">
@@ -120,7 +114,6 @@ export const HelpSection: FC = () => {
                     <button
                       key={name}
                       type="button"
-                      onClick={onClick ?? undefined}
                       className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
                     >
                       <div className="grid flex-shrink-0 place-items-center">
diff --git a/god-mode/components/sidebar/sidebar-menu-hamburger-toogle.tsx b/god-mode/components/sidebar/sidebar-menu-hamburger-toogle.tsx
new file mode 100644
index 000000000..5adfd7bcd
--- /dev/null
+++ b/god-mode/components/sidebar/sidebar-menu-hamburger-toogle.tsx
@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useAppTheme } from "hooks/use-theme";
+// icons
+import { Menu } from "lucide-react";
+
+export const SidebarHamburgerToggle: FC = observer(() => {
+  const { toggleSidebar } = useAppTheme();
+  return (
+    <div
+      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      onClick={() => toggleSidebar()}
+    >
+      <Menu
+        size={14}
+        className="text-custom-text-200 group-hover:text-custom-text-100 transition-all"
+      />
+    </div>
+  );
+});
diff --git a/god-mode/components/sidebar/sidebar-menu.tsx b/god-mode/components/sidebar/sidebar-menu.tsx
index 2e71ef3e3..28c92bf12 100644
--- a/god-mode/components/sidebar/sidebar-menu.tsx
+++ b/god-mode/components/sidebar/sidebar-menu.tsx
@@ -42,10 +42,16 @@ const INSTANCE_ADMIN_LINKS = [
 
 export const SidebarMenu = observer(() => {
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   // router
   const pathName = usePathname();
 
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
   return (
     <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-6">
       {INSTANCE_ADMIN_LINKS.map((item, index) => {
@@ -55,7 +61,7 @@ export const SidebarMenu = observer(() => {
             : pathName === item.href;
 
         return (
-          <Link key={index} href={item.href}>
+          <Link key={index} href={item.href} onClick={handleItemClick}>
             <div>
               <Tooltip
                 tooltipContent={item.name}
diff --git a/god-mode/hooks/use-outside-click-detector.tsx b/god-mode/hooks/use-outside-click-detector.tsx
new file mode 100644
index 000000000..5331d11c8
--- /dev/null
+++ b/god-mode/hooks/use-outside-click-detector.tsx
@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  });
+};
+
+export default useOutsideClickDetector;