chore: sidebar responsiveness.

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>

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 ${
+      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
-        sidebarCollapsed ? "" : "md:w-[280px]"
+        fixed md:relative
-      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
+        ${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 />

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">

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>
+  );
+});

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}

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;