update post context menu, fix navigation mobile scaling

pingpad-io · Jul 7, 2024 · be8a17e · be8a17e
1 parent 8428d14
commit be8a17e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 46 deletions.
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
@@ -42,7 +42,7 @@ export default async function Menu() {
   }
 
   return (
-    <span className="flex shrink text-xl p-4 pb-0 sm:pb-4 w-full sm:w-max">
+    <span className="flex shrink text-xl p-2 sm:p-4 w-full sm:w-max">
       <span className="flex flex-row sm:flex-col items-end gap-2 place-content-between sm:place-content-start w-full">
         <Link href="/home">
           <Button variant="ghost" size="sm_icon">
@@ -70,8 +70,8 @@ export const MenuAuthed = ({ handle, user }: { handle: string; user: User }) =>
         </Button>
       </Link>
 
-      <Link href={"/communities"}>
-        <Button variant="ghost" size="sm_icon" className="hidden sm:flex">
+      <Link href={"/communities"} className="hidden sm:flex">
+        <Button variant="ghost" size="sm_icon" >
           <div className="hidden sm:flex -mt-1">communities</div>
           <UsersIcon className="sm:ml-2" size={21} />
         </Button>

diff --git a/src/components/menu/Navigation.tsx b/src/components/menu/Navigation.tsx
@@ -38,7 +38,7 @@ export const Navigation = () => {
       <Carousel
         opts={{ dragFree: true, watchDrag: true, slidesToScroll: 6, loop: true, active: true, align: "start" }}
         plugins={[WheelGesturesPlugin({ active: true })]}
-        className="w-full h-10 max-w-[24rem] sm:max-w-[32rem] select-none"
+        className="w-full h-10 max-w-[80%] select-none"
       >
         <CarouselPrevious variant="ghost" />
         <CarouselContent className="-ml-1">

diff --git a/src/components/post/PostContextMenu.tsx b/src/components/post/PostContextMenu.tsx
@@ -1,45 +1,22 @@
 "use client";
-import { type PropsWithChildren, useEffect, useState } from "react";
-import { Card } from "../ui/card";
+
+import type { PropsWithChildren } from "react";
+import { ContextMenu as Context, ContextMenuContent, ContextMenuTrigger } from "../ui/context-menu";
 import type { Post } from "./Post";
 import { PostMenu } from "./PostMenu";
 
-export const ContextMenu = (props: PropsWithChildren & { post: Post }) => {
-  const [clicked, setClicked] = useState(false);
-  const [points, setPoints] = useState({
-    x: 0,
-    y: 0,
-  });
-
-  const handleClick = () => setClicked(false);
-  useEffect(() => {
-    window.addEventListener("click", handleClick);
-
-    return () => {
-      window.removeEventListener("click", handleClick);
-    };
-  }, [handleClick]);
-
+export const PostContextMenu = (props: PropsWithChildren & { post: Post }) => {
   return (
-    <div
-      onContextMenu={(e) => {
-        e.preventDefault();
-        setClicked(true);
-        setPoints({
-          x: e.pageX,
-          y: e.pageY,
-        });
-      }}
-    >
-      {clicked && (
-        <div className="z-[40] absolute" style={{ top: `${points.y}px`, left: `${points.x}px` }}>
-          <Card className="flex flex-col w-max gap-1 p-1 hover:bg-card border">
-            <PostMenu post={props.post} />
-          </Card>
-        </div>
-      )}
-
-      {props.children}
-    </div>
+    <Context modal={false}>
+      <ContextMenuContent
+        onContextMenu={(e) => {
+          e.stopPropagation();
+        }}
+        className="flex flex-col w-max gap-1 p-1 hover:bg-card border"
+      >
+        <PostMenu post={props.post} />
+      </ContextMenuContent>
+      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
+    </Context>
   );
 };
diff --git a/src/components/post/PostView.tsx b/src/components/post/PostView.tsx
@@ -6,7 +6,7 @@ import { UserAvatar } from "../user/UserAvatar";
 import type { Post } from "./Post";
 import { PostComments } from "./PostComments";
 import { PostContent } from "./PostContent";
-import { ContextMenu } from "./PostContextMenu";
+import { PostContextMenu } from "./PostContextMenu";
 import { PostInfo } from "./PostInfo";
 import { PostMenu } from "./PostMenu";
 import { ReactionsList } from "./PostReactions";
@@ -29,7 +29,7 @@ export const PostView = ({
 
   return (
     <div className={"flex flex-col gap-2 w-full"}>
-      <ContextMenu post={item}>
+      <PostContextMenu post={item}>
         <Card onClick={() => setCollapsed(false)} className="hover:bg-card">
           <CardContent className={`flex flex-row p-2 ${settings.isComment ? "sm:p-2 sm:pb-4 gap-2" : "sm:p-4 gap-4 "}`}>
             <span className="min-h-full flex flex-col justify-start items-center relative">
@@ -57,7 +57,7 @@ export const PostView = ({
             </div>
           </CardContent>
         </Card>
-      </ContextMenu>
+      </PostContextMenu>
       <PostComments isOpen={isCommentsOpen} post={item} />
     </div>
   );

diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}