feat: add toggle sidebar-minimap functionality

iway1 · Apr 18, 2023 · a1ec4d9 · a1ec4d9
1 parent 2467157
commit a1ec4d9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/packages/trpc-panel/src/react-app/Root.tsx b/packages/trpc-panel/src/react-app/Root.tsx
@@ -84,7 +84,7 @@ function AppInnards({ rootRouter }: { rootRouter: ParsedRouter }) {
 
   return (
     <div className="flex flex-col flex-1 relative">
-      <TopBar />
+      <TopBar open={sidebarOpen} setOpen={setSidebarOpen} />
       <div className="flex flex-row flex-1 bg-mainBackground">
         <SideNav
           rootRouter={rootRouter}

diff --git a/packages/trpc-panel/src/react-app/components/Chevron.tsx b/packages/trpc-panel/src/react-app/components/Chevron.tsx
@@ -6,7 +6,7 @@ export function Chevron({
   direction,
 }: {
   className?: string;
-  direction: "up" | "down" | "right";
+  direction: "up" | "down" | "right" | "left";
 }) {
   return (
     <ChevronIcon
@@ -21,6 +21,8 @@ export function Chevron({
               return "-rotate-90";
             case "right":
               return "rotate-180";
+            case "left":
+              return "";
           }
         })()}`
       }

diff --git a/packages/trpc-panel/src/react-app/components/SideNav.tsx b/packages/trpc-panel/src/react-app/components/SideNav.tsx
@@ -7,20 +7,21 @@ import { colorSchemeForNode } from "@src/react-app/components/style-utils";
 import { ItemTypeIcon } from "@src/react-app/components/ItemTypeIcon";
 export function SideNav({
   rootRouter,
+  open,
 }: // setOpen,
 {
   open: boolean;
   rootRouter: ParsedRouter;
   setOpen: (value: boolean) => void;
 }) {
-  return (
+  return open ? (
     <div
       style={{ maxHeight: "calc(100vh - 4rem)" }}
       className="min-w-[16rem] overflow-scroll shadow-sm flex-col flex items-start p-2 pr-4 space-y-2 bg-actuallyWhite border-r-2 border-r-panelBorder"
     >
       <SideNavItem node={rootRouter} path={[]} />
     </div>
-  );
+  ) : null;
 }
 
 function SideNavItem({

diff --git a/packages/trpc-panel/src/react-app/components/TopBar.tsx b/packages/trpc-panel/src/react-app/components/TopBar.tsx
@@ -3,17 +3,39 @@ import { useHeadersContext } from "@src/react-app/components/contexts/HeadersCon
 import MailLockIcon from "@mui/icons-material/MailLockOutlined";
 import { LogoSvg } from "@src/react-app/components/LogoSvg";
 import { useIsMac } from "@src/react-app/components/hooks/useIsMac";
+import { Chevron } from "@src/react-app/components/Chevron";
 import Search from "@mui/icons-material/Search";
 import { useSearch } from "@src/react-app/components/contexts/SearchStore";
 
-export function TopBar() {
+export function TopBar({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const { setHeadersPopupShown } = useHeadersContext();
   return (
     <div className="w-full px-4 pr-8 flex flex-row justify-between items-center position-fixed left-0 h-16 right-0 top-0 bg-gray-50 drop-shadow-sm bg-actuallyWhite border-b border-b-panelBorder">
-      <span className="flex flex-row items-center text-lg font-bold font-mono">
-        <LogoSvg className="rounded-lg w-10 h-10 mr-2" />
-        tRPC.panel()
-      </span>
+      <div className="flex flex-row items-center gap-4">
+        <button
+          type="button"
+          role="button"
+          onClick={() => setOpen((prev) => !prev)}
+          aria-label="Toggle sidebar"
+          aria-pressed={open}
+        >
+          {open ? (
+            <Chevron className="w-4 h-4" direction="left" />
+          ) : (
+            <Chevron className="w-4 h-4" direction="right" />
+          )}
+        </button>
+        <span className="flex flex-row items-center text-lg font-bold font-mono">
+          <LogoSvg className="rounded-lg w-10 h-10 mr-2" />
+          tRPC.panel()
+        </span>
+      </div>
       <RouterSearchTooltip />
       <button
         onClick={() => setHeadersPopupShown(true)}