Account menu

src/pages/layout.tsx

@@ -8,6 +8,9 @@ import { useLogin } from "hooks/login";
 import { Profile } from "element/profile";
 import { NewStreamDialog } from "element/new-stream";
 import { LoginSignup } from "element/login-signup";
+import { Menu, MenuItem } from "@szhsin/react-menu";
+import { hexToBech32 } from "@snort/shared";
+import { Login } from "index";
 
 export function LayoutPage() {
   const navigate = useNavigate();
@@ -21,13 +24,34 @@ export function LayoutPage() {
     return (
       <>
         <NewStreamDialog btnClassName="btn btn-primary" />
-        <Profile
-          avatarClassname="mb-squared"
-          pubkey={login.pubkey}
-          options={{
-            showName: false,
-          }}
-        />
+        <Menu
+          menuClassName="ctx-menu"
+          menuButton={
+            <div>
+              <Profile
+                avatarClassname="mb-squared"
+                pubkey={login.pubkey}
+                options={{
+                  showName: false,
+                }}
+                linkToProfile={false}
+              />
+            </div>
+          }
+          align="end"
+          gap={5}
+        >
+          <MenuItem
+            onClick={() => navigate(`/p/${hexToBech32("npub", login.pubkey)}`)}
+          >
+            <Icon name="user" size={24} />
+            Profile
+          </MenuItem>
+          <MenuItem onClick={() => Login.logout()}>
+            <Icon name="logout" size={24} />
+            Logout
+          </MenuItem>
+        </Menu>
       </>
     );
   }
@@ -35,31 +59,40 @@ export function LayoutPage() {
   function loggedOut() {
     if (login) return;
 
-    return <Dialog.Root open={showLogin} onOpenChange={setShowLogin}>
-      <Dialog.Trigger asChild>
-        <button type="button" className="btn btn-border" onClick={() => setShowLogin(true)}>
-          Login
-          <Icon name="login" />
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="dialog-overlay" />
-        <Dialog.Content className="dialog-content">
-          <LoginSignup close={() => setShowLogin(false)} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+    return (
+      <Dialog.Root open={showLogin} onOpenChange={setShowLogin}>
+        <Dialog.Trigger asChild>
+          <button
+            type="button"
+            className="btn btn-border"
+            onClick={() => setShowLogin(true)}
+          >
+            Login
+            <Icon name="login" />
+          </button>
+        </Dialog.Trigger>
+        <Dialog.Portal>
+          <Dialog.Overlay className="dialog-overlay" />
+          <Dialog.Content className="dialog-content">
+            <LoginSignup close={() => setShowLogin(false)} />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
   }
   const isNsfw = window.location.pathname === "/nsfw";
 
   return (
     <div
       className={
-        location.pathname === "/" || location.pathname.startsWith("/p/") || location.pathname.startsWith("/providers") || location.pathname === "/nsfw"
+        location.pathname === "/" ||
+        location.pathname.startsWith("/p/") ||
+        location.pathname.startsWith("/providers") ||
+        location.pathname === "/nsfw"
           ? "page only-content"
           : location.pathname.startsWith("/chat/")
-            ? "page chat"
-            : "page"
+          ? "page chat"
+          : "page"
       }
     >
       <header>
@@ -81,14 +114,15 @@ export function LayoutPage() {
       </header>
       <Outlet />
       {isNsfw && <ContentWarningOverlay />}
-
     </div>
   );
 }
 
 function ContentWarningOverlay() {
   const navigate = useNavigate();
-  const [is18Plus, setIs18Plus] = useState(Boolean(window.localStorage.getItem("accepted-content-warning")));
+  const [is18Plus, setIs18Plus] = useState(
+    Boolean(window.localStorage.getItem("accepted-content-warning"))
+  );
   if (is18Plus) return null;
 
   function grownUp() {
@@ -96,16 +130,18 @@ function ContentWarningOverlay() {
     setIs18Plus(true);
   }
 
-  return <div className="fullscreen-exclusive age-check">
-    <h1>Sexually explicit material ahead!</h1>
-    <h2>Confirm your age</h2>
-    <div className="flex g24">
-      <button className="btn btn-warning" onClick={grownUp}>
-        Yes, I am over 18
-      </button>
-      <button className="btn" onClick={() => navigate("/")}>
-        No, I am under 18
-      </button>
+  return (
+    <div className="fullscreen-exclusive age-check">
+      <h1>Sexually explicit material ahead!</h1>
+      <h2>Confirm your age</h2>
+      <div className="flex g24">
+        <button className="btn btn-warning" onClick={grownUp}>
+          Yes, I am over 18
+        </button>
+        <button className="btn" onClick={() => navigate("/")}>
+          No, I am under 18
+        </button>
+      </div>
     </div>
-  </div>
-}
+  );
+}