From b96351499819d2a9953fad379f154ddf13fdf936 Mon Sep 17 00:00:00 2001
From: Kavin Valli <mail@kavin.me>
Date: Tue, 15 Oct 2024 16:52:11 -0400
Subject: [PATCH] Sidebar UI fixes (#2752)

* mobile nav

* improve sidebar ui

* Remove commented code

Co-authored-by: Justin Torre <justintorre75@gmail.com>

---------

Co-authored-by: Justin Torre <justintorre75@gmail.com>
---
 web/components/layout/auth/DesktopSidebar.tsx |  57 ++++-
 web/components/layout/auth/NavItem.tsx        |   5 +-
 web/components/layout/auth/Sidebar.tsx        |   4 +-
 web/components/layout/orgDropdown.tsx         | 206 ++++++------------
 web/components/layout/orgMoreDropdown.tsx     | 195 +++++++++++++++++
 5 files changed, 324 insertions(+), 143 deletions(-)
 create mode 100644 web/components/layout/orgMoreDropdown.tsx

diff --git a/web/components/layout/auth/DesktopSidebar.tsx b/web/components/layout/auth/DesktopSidebar.tsx
index 21ff6c1139..0bd62b1faf 100644
--- a/web/components/layout/auth/DesktopSidebar.tsx
+++ b/web/components/layout/auth/DesktopSidebar.tsx
@@ -13,6 +13,7 @@ import {
   ChevronRightIcon,
   Cog6ToothIcon,
   QuestionMarkCircleIcon,
+  Bars3Icon,
 } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -133,8 +134,46 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
     };
   }, [isCollapsed, expandedItems, setIsCollapsed]);
 
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const handleCollapseToggle = () => {
+    if (window.innerWidth < 768) {
+      // Mobile breakpoint
+      setIsMobileMenuOpen(false);
+    } else {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+
   return (
     <>
+      {/* Mobile hamburger menu */}
+      <div className="sticky top-0 z-20 px-2 py-3 flex md:hidden flex-shrink-0 bg-white dark:bg-black border-b border-slate-300 dark:border-slate-70">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            setIsCollapsed(false);
+            setIsMobileMenuOpen(true);
+          }}
+          className="text-slate-500 hover:text-slate-600"
+        >
+          <Bars3Icon className="h-6 w-6" />
+        </Button>
+      </div>
+
+      {/* Mobile drawer overlay */}
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
+          onClick={() => {
+            setIsCollapsed(false);
+            setIsMobileMenuOpen(false);
+          }}
+        />
+      )}
+
+      {/* Sidebar container */}
       <div
         className={cn(
           "hidden md:block",
@@ -142,15 +181,21 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
           "transition-all duration-300"
         )}
       />
+
+      {/* Sidebar content */}
       <div
         ref={sidebarRef}
         className={cn(
-          "hidden md:flex md:flex-col z-30 bg-background dark:bg-neutral-950 transition-all duration-300 h-screen bg-white ",
+          "flex flex-col z-50 bg-background dark:bg-slate-900 transition-all duration-300 h-screen bg-white",
           largeWith,
-          "fixed top-0 left-0"
+          "fixed top-0 left-0",
+          "md:translate-x-0", // Always visible on desktop
+          isMobileMenuOpen
+            ? "translate-x-0"
+            : "-translate-x-full md:translate-x-0"
         )}
       >
-        <div className="w-full flex flex-grow flex-col overflow-y-auto border-r  dark:border-slate-800 justify-between pb-4">
+        <div className="w-full flex flex-grow flex-col overflow-y-auto border-r dark:border-slate-800 justify-between pb-4">
           <div className="flex items-center gap-2 h-14 border-b dark:border-slate-800">
             <div className="flex items-center gap-2 w-full">
               {!isCollapsed && <OrgDropdown />}
@@ -161,7 +206,7 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
               <Button
                 variant="ghost"
                 size="icon"
-                onClick={() => setIsCollapsed(!isCollapsed)}
+                onClick={handleCollapseToggle}
                 className="w-full flex justify-center dark:hover:bg-slate-800 px-2"
               >
                 {isCollapsed ? (
@@ -210,6 +255,10 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
                     isCollapsed={isCollapsed}
                     expandedItems={expandedItems}
                     toggleExpand={toggleExpand}
+                    onClick={() => {
+                      setIsCollapsed(false);
+                      setIsMobileMenuOpen(false);
+                    }}
                     deep={0}
                   />
                 ))}
diff --git a/web/components/layout/auth/NavItem.tsx b/web/components/layout/auth/NavItem.tsx
index 8b159b9dc2..55f5df467a 100644
--- a/web/components/layout/auth/NavItem.tsx
+++ b/web/components/layout/auth/NavItem.tsx
@@ -25,6 +25,7 @@ interface NavItemProps {
   expandedItems: string[];
   toggleExpand: (name: string) => void;
   deep?: number;
+  onClick: () => void;
 }
 
 const NavItem: React.FC<NavItemProps> = ({
@@ -34,6 +35,7 @@ const NavItem: React.FC<NavItemProps> = ({
   expandedItems,
   toggleExpand,
   deep,
+  onClick,
 }) => {
   const router = useRouter();
   const hasSubItems = link.subItems && link.subItems.length > 0;
@@ -87,7 +89,7 @@ const NavItem: React.FC<NavItemProps> = ({
     <div className={cn(isSubItem)}>
       <Link
         href={hasSubItems ? "#" : link.href}
-        onClick={hasSubItems ? () => toggleExpand(link.name) : undefined}
+        onClick={hasSubItems ? () => toggleExpand(link.name) : onClick}
         className={cn(
           hasSubItems
             ? "flex items-center gap-1 font-medium text-slate-400 text-xs mt-[10px] text-[11px]"
@@ -134,6 +136,7 @@ const NavItem: React.FC<NavItemProps> = ({
               expandedItems={expandedItems}
               toggleExpand={toggleExpand}
               deep={deep ? deep + 1 : 1}
+              onClick={onClick}
             />
           ))}
         </div>
diff --git a/web/components/layout/auth/Sidebar.tsx b/web/components/layout/auth/Sidebar.tsx
index 197209e51b..30f6428522 100644
--- a/web/components/layout/auth/Sidebar.tsx
+++ b/web/components/layout/auth/Sidebar.tsx
@@ -18,7 +18,6 @@ import { useMemo } from "react";
 import DesktopSidebar, { NavigationItem } from "./DesktopSidebar";
 
 import { PiGraphLight } from "react-icons/pi";
-import MobileNavigation from "./MobileNavigation";
 import { useOrg } from "../organizationContext";
 import { NotepadText, TestTube2, Webhook } from "lucide-react";
 
@@ -209,7 +208,8 @@ const Sidebar = ({ setOpen }: SidebarProps) => {
 
   return (
     <>
-      <MobileNavigation NAVIGATION={NAVIGATION} setOpen={setOpen} />
+      {/* Remove this line */}
+      {/* <MobileNavigation NAVIGATION={NAVIGATION} setOpen={setOpen} /> */}
 
       <DesktopSidebar NAVIGATION={NAVIGATION} setOpen={setOpen} />
     </>
diff --git a/web/components/layout/orgDropdown.tsx b/web/components/layout/orgDropdown.tsx
index a7f6914972..abfec3835f 100644
--- a/web/components/layout/orgDropdown.tsx
+++ b/web/components/layout/orgDropdown.tsx
@@ -5,16 +5,15 @@ import { Dialog, DialogContent } from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { Database } from "@/supabase/database.types";
-import { CheckIcon } from "@heroicons/react/24/outline";
 import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
 import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
@@ -26,6 +25,9 @@ import {
   ORGANIZATION_COLORS,
   ORGANIZATION_ICONS,
 } from "../templates/organization/orgConstants";
+import { LogOutIcon } from "lucide-react";
+import Link from "next/link";
+import OrgMoreDropdown from "./orgMoreDropdown";
 
 interface OrgDropdownProps {}
 
@@ -90,7 +92,7 @@ export default function OrgDropdown({}: OrgDropdownProps) {
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="flex  items-center justify-start w-full ml-1 p-2"
+            className="flex items-center justify-start w-full ml-1 p-2"
           >
             {currentIcon && (
               <currentIcon.icon
@@ -106,143 +108,75 @@ export default function OrgDropdown({}: OrgDropdownProps) {
             </p>
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[15rem] ml-2 mt-1 max-h-[90vh] flex flex-col">
-          <DropdownMenuLabel>Organizations</DropdownMenuLabel>
-          <div className="flex-grow flex flex-col overflow-hidden">
-            {ownedOrgs && ownedOrgs.length > 0 && (
-              <div className="flex flex-col min-h-0">
-                <DropdownMenuLabel className="text-xs text-muted-foreground">
-                  Your Organizations
-                  {ownedOrgs.length > 7 && ` (${ownedOrgs.length})`}
-                </DropdownMenuLabel>
-                <ScrollArea className="flex-grow overflow-y-auto">
-                  {ownedOrgs.map((org, idx) => {
-                    const icon = ORGANIZATION_ICONS.find(
-                      (icon) => icon.name === org.icon
-                    );
-                    return (
-                      <DropdownMenuItem
-                        key={idx}
-                        onSelect={() => orgContext?.setCurrentOrg(org.id)}
-                      >
-                        <div className="flex items-center justify-between w-full">
-                          <div className="flex items-center space-x-2">
-                            {icon && (
-                              <icon.icon className="h-4 w-4 text-muted-foreground" />
-                            )}
-                            <span className="truncate max-w-[7.5rem]">
-                              {org.name}
-                            </span>
-                          </div>
-                          {org.id === orgContext?.currentOrg?.id && (
-                            <CheckIcon className="h-4 w-4 text-primary" />
-                          )}
-                        </div>
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </ScrollArea>
+        <DropdownMenuContent className="w-[15rem] ml-2 mt-2 max-h-[90vh] flex flex-col border-slate-200">
+          <DropdownMenuLabel className="flex justify-between items-center">
+            <div className="flex gap-2">
+              {currentIcon && (
+                <currentIcon.icon
+                  className={clsx(
+                    `text-${currentColor?.name}-500`,
+                    "mt-1 flex-shrink-0 h-4 w-4"
+                  )}
+                  aria-hidden="true"
+                />
+              )}
+              <div className="flex flex-col gap-1">
+                <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                  {orgContext?.currentOrg?.name}
+                </h3>
+                <p className="text-xs text-slate-500 font-medium">
+                  {user?.email}
+                </p>
               </div>
-            )}
-            {memberOrgs && memberOrgs.length > 0 && (
-              <div className="flex flex-col min-h-0">
-                <DropdownMenuLabel className="text-xs text-muted-foreground">
-                  Member Organizations
-                  {memberOrgs.length > 7 && ` (${memberOrgs.length})`}
-                </DropdownMenuLabel>
-                <ScrollArea className="flex-grow overflow-y-auto">
-                  {memberOrgs.map((org, idx) => {
-                    const icon = ORGANIZATION_ICONS.find(
-                      (icon) => icon.name === org.icon
-                    );
-                    return (
-                      <DropdownMenuItem
-                        key={idx}
-                        onSelect={() => orgContext?.setCurrentOrg(org.id)}
-                      >
-                        <div className="flex items-center justify-between w-full">
-                          <div className="flex items-center space-x-2">
-                            {icon && (
-                              <icon.icon className="h-4 w-4 text-muted-foreground" />
-                            )}
-                            <span className="truncate max-w-[7.5rem]">
-                              {org.name}
-                            </span>
-                          </div>
-                          {org.id === orgContext?.currentOrg?.id && (
-                            <CheckIcon className="h-4 w-4 text-primary" />
-                          )}
-                        </div>
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </ScrollArea>
-              </div>
-            )}
-            {customerOrgs && customerOrgs.length > 0 && (
-              <div className="flex flex-col min-h-0">
-                <DropdownMenuLabel className="text-xs text-muted-foreground">
-                  Customers
-                  {customerOrgs.length > 7 && ` (${customerOrgs.length})`}
-                </DropdownMenuLabel>
-                <ScrollArea className="flex-grow overflow-y-auto">
-                  {customerOrgs.map((org, idx) => {
-                    const icon = ORGANIZATION_ICONS.find(
-                      (icon) => icon.name === org.icon
-                    );
-                    return (
-                      <DropdownMenuItem
-                        key={idx}
-                        onSelect={() => orgContext?.setCurrentOrg(org.id)}
-                      >
-                        <div className="flex items-center justify-between w-full">
-                          <div className="flex items-center space-x-2">
-                            {icon && (
-                              <icon.icon className="h-4 w-4 text-muted-foreground" />
-                            )}
-                            <span className="truncate max-w-[7.5rem]">
-                              {org.name}
-                            </span>
-                          </div>
-                          {org.id === orgContext?.currentOrg?.id && (
-                            <CheckIcon className="h-4 w-4 text-primary" />
-                          )}
-                        </div>
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </ScrollArea>
-              </div>
-            )}
-          </div>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onSelect={() => createNewOrgHandler()}>
-            Create New Org
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuLabel>User Settings</DropdownMenuLabel>
-          <DropdownMenuItem
-            className={cn("hover:bg-transparent cursor-default")}
-            disableHover
-            disableClickClose
-          >
-            <div className="flex items-center justify-between w-full">
-              <span>Theme</span>
-              <Switch
-                checked={theme === "dark"}
-                onCheckedChange={handleThemeChange}
-              />
             </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem disableHover>
-            <div className="flex items-center justify-between w-full">
-              <span className="text-sm text-muted-foreground truncate">
-                {user?.email}
-              </span>
+            <div className="hidden sm:block">
+              <OrgMoreDropdown
+                ownedOrgs={ownedOrgs}
+                memberOrgs={memberOrgs}
+                customerOrgs={customerOrgs}
+                createNewOrgHandler={createNewOrgHandler}
+                currentOrgId={orgContext?.currentOrg?.id}
+                setCurrentOrg={orgContext?.setCurrentOrg}
+              />
             </div>
-          </DropdownMenuItem>
+          </DropdownMenuLabel>
           <DropdownMenuSeparator />
-          <DropdownMenuItem onSelect={handleSignOut}>Sign out</DropdownMenuItem>
+          <div className="block sm:hidden">
+            <OrgMoreDropdown
+              ownedOrgs={ownedOrgs}
+              memberOrgs={memberOrgs}
+              customerOrgs={customerOrgs}
+              createNewOrgHandler={createNewOrgHandler}
+              currentOrgId={orgContext?.currentOrg?.id}
+              setCurrentOrg={orgContext?.setCurrentOrg}
+            />
+            <DropdownMenuSeparator />
+          </div>
+          <DropdownMenuGroup>
+            <DropdownMenuItem asChild className="cursor-pointer text-xs">
+              <Link href="/settings/members">Invite members</Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className={cn("hover:bg-transparent cursor-default")}
+              disableHover
+              disableClickClose
+            >
+              <div className="flex items-center justify-between w-full text-xs">
+                <span>Dark mode</span>
+                <Switch
+                  checked={themeContext?.theme === "dark"}
+                  onCheckedChange={handleThemeChange}
+                  size="md"
+                />
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem onSelect={handleSignOut} className="text-xs">
+            <LogOutIcon className="h-4 w-4 mr-2" />
+            Sign out
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
 
diff --git a/web/components/layout/orgMoreDropdown.tsx b/web/components/layout/orgMoreDropdown.tsx
new file mode 100644
index 0000000000..ca384dbeb4
--- /dev/null
+++ b/web/components/layout/orgMoreDropdown.tsx
@@ -0,0 +1,195 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+import { ORGANIZATION_ICONS } from "../templates/organization/orgConstants";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+type Organization = {
+  id: string;
+  name: string;
+  icon: string;
+  color: string;
+};
+
+export default function OrgMoreDropdown({
+  ownedOrgs,
+  memberOrgs,
+  customerOrgs,
+  createNewOrgHandler,
+  currentOrgId,
+  setCurrentOrg,
+}: {
+  ownedOrgs: Organization[];
+  memberOrgs: Organization[];
+  customerOrgs: Organization[];
+  createNewOrgHandler: () => void;
+  currentOrgId?: string;
+  setCurrentOrg?: (orgId: string) => void;
+}) {
+  const content = (
+    <>
+      {ownedOrgs && ownedOrgs.length > 0 && (
+        <DropdownMenuGroup className="flex flex-col min-h-0">
+          <DropdownMenuLabel className="text-xs font-semibold text-slate-500">
+            Your Organizations
+            {ownedOrgs.length > 7 && ` (${ownedOrgs.length})`}
+          </DropdownMenuLabel>
+          <ScrollArea className="flex-grow overflow-y-auto">
+            {ownedOrgs.map((org, idx) => {
+              const icon = ORGANIZATION_ICONS.find(
+                (icon) => icon.name === org.icon
+              );
+              return (
+                <DropdownMenuItem
+                  key={idx}
+                  onSelect={
+                    setCurrentOrg ? () => setCurrentOrg(org.id) : undefined
+                  }
+                >
+                  <div className="flex items-center justify-between w-full text-xs">
+                    <div className="flex items-center space-x-2">
+                      {icon && (
+                        <icon.icon className="h-4 w-4 text-slate-500 dark:text-slate-400" />
+                      )}
+                      <span className="truncate max-w-[7.5rem]">
+                        {org.name}
+                      </span>
+                    </div>
+                    {org.id === currentOrgId && (
+                      <CheckIcon className="h-4 w-4 text-primary" />
+                    )}
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
+          </ScrollArea>
+        </DropdownMenuGroup>
+      )}
+      {memberOrgs && memberOrgs.length > 0 && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className="flex flex-col min-h-0">
+            <DropdownMenuLabel className="text-xs font-semibold text-slate-500">
+              Member Organizations
+              {memberOrgs.length > 7 && ` (${memberOrgs.length})`}
+            </DropdownMenuLabel>
+            <ScrollArea className="flex-grow overflow-y-auto">
+              {memberOrgs.map((org, idx) => {
+                const icon = ORGANIZATION_ICONS.find(
+                  (icon) => icon.name === org.icon
+                );
+                return (
+                  <DropdownMenuItem
+                    key={idx}
+                    onSelect={
+                      setCurrentOrg ? () => setCurrentOrg(org.id) : undefined
+                    }
+                  >
+                    <div className="flex items-center justify-between w-full text-xs">
+                      <div className="flex items-center space-x-2">
+                        {icon && (
+                          <icon.icon className="h-4 w-4 text-muted-foreground" />
+                        )}
+                        <span className="truncate max-w-[7.5rem]">
+                          {org.name}
+                        </span>
+                      </div>
+                      {org.id === currentOrgId && (
+                        <CheckIcon className="h-4 w-4 text-primary" />
+                      )}
+                    </div>
+                  </DropdownMenuItem>
+                );
+              })}
+            </ScrollArea>
+          </DropdownMenuGroup>
+        </>
+      )}
+      {customerOrgs && customerOrgs.length > 0 && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className="flex flex-col min-h-0">
+            <DropdownMenuLabel className="text-xs font-semibold text-slate-500">
+              Customers
+              {customerOrgs.length > 7 && ` (${customerOrgs.length})`}
+            </DropdownMenuLabel>
+            <ScrollArea className="flex-grow overflow-y-auto">
+              {customerOrgs.map((org, idx) => {
+                const icon = ORGANIZATION_ICONS.find(
+                  (icon) => icon.name === org.icon
+                );
+                return (
+                  <DropdownMenuItem
+                    key={idx}
+                    onSelect={
+                      setCurrentOrg ? () => setCurrentOrg(org.id) : undefined
+                    }
+                  >
+                    <div className="flex items-center justify-between w-full text-xs">
+                      <div className="flex items-center space-x-2">
+                        {icon && (
+                          <icon.icon className="h-4 w-4 text-muted-foreground" />
+                        )}
+                        <span className="truncate max-w-[7.5rem]">
+                          {org.name}
+                        </span>
+                      </div>
+                      {org.id === currentOrgId && (
+                        <CheckIcon className="h-4 w-4 text-primary" />
+                      )}
+                    </div>
+                  </DropdownMenuItem>
+                );
+              })}
+            </ScrollArea>
+          </DropdownMenuGroup>
+        </>
+      )}
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        className="text-xs"
+        onClick={() => createNewOrgHandler()}
+      >
+        <PlusIcon className="h-4 w-4 mr-2" />
+        Create New Org
+      </DropdownMenuItem>
+    </>
+  );
+
+  return (
+    <>
+      {/* Mobile view */}
+      <div className="sm:hidden">{content}</div>
+
+      {/* Desktop view */}
+      <div className="hidden sm:block">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="p-0 hover:bg-transparent m-0 w-auto h-auto outline-none focus-visible:outline-none"
+            >
+              <ChevronsUpDownIcon className="h-[18px] w-[18px] text-slate-900 dark:text-slate-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="right"
+            align="start"
+            className="w-[15rem] ml-3 max-h-[90vh] flex flex-col"
+          >
+            {content}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </>
+  );
+}