added account menu

src/components/columns/account/active.tsx

@@ -1,11 +1,15 @@
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';
 
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { AvatarIcon, ExitIcon, GearIcon } from '@radix-ui/react-icons';
 import useLocalStorage from '@rehooks/local-storage';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 import { memo, useCallback, useContext, useMemo } from 'react';
 
 export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }) {
+  const router = useRouter();
   const userData = JSON.parse(user.metadata);
 
   const { db }: any = useContext(DatabaseContext);
@@ -14,6 +18,13 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   const [relays]: any = useLocalStorage('relays');
   const [currentUser]: any = useLocalStorage('current-user');
 
+  const openProfile = () => {
+    router.push({
+      pathname: '/profile',
+      query: { id: currentUser.id },
+    });
+  };
+
   // save follows to database
   const insertFollows = useCallback(
     async (follows) => {
@@ -52,8 +63,50 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   }, [currentUser.id, insertFollows, relayPool, relays]);
 
   return (
-    <div className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
-      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
-    </div>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="relative h-11 w-11 shrink rounded-lg ring-1 ring-fuchsia-500 ring-offset-2 ring-offset-black">
+          <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="min-w-[220px] rounded-lg bg-zinc-800 p-1.5 shadow-lg shadow-black/50 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+          side="right"
+          sideOffset={5}
+          align="start"
+        >
+          <DropdownMenu.Item
+            onClick={() => openProfile()}
+            className="group relative flex h-7 select-none items-center rounded-sm px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500"
+          >
+            <div className="absolute left-0 inline-flex w-6 items-center justify-center">
+              <AvatarIcon />
+            </div>
+            Open profile
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            Update profile
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            Copy public key
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator className="m-1 h-px bg-zinc-700/50" />
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            <div className="absolute left-0 inline-flex w-6 items-center justify-center">
+              <GearIcon />
+            </div>
+            Settings
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="group relative flex h-7 select-none items-center rounded px-1 pl-7 text-sm leading-none text-zinc-400 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-zinc-700 data-[highlighted]:text-fuchsia-500">
+            <div className="absolute left-0 inline-flex w-6 items-center justify-center">
+              <ExitIcon />
+            </div>
+            Logout
+          </DropdownMenu.Item>
+          <DropdownMenu.Arrow className="fill-zinc-800" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
   );
 });

src/components/columns/navigator/newsfeed/index.tsx

@@ -9,7 +9,7 @@ export default function Newsfeed() {
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
-      <div className="flex flex-col px-2">
+      <div className="flex flex-col gap-1 px-2">
         <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
           <div
             className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${

src/pages/profile/index.tsx

@@ -0,0 +1,35 @@
+import BaseLayout from '@layouts/base';
+import WithSidebarLayout from '@layouts/withSidebar';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useRouter } from 'next/router';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+
+export default function Page() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const [currentUser]: any = useLocalStorage('current-user');
+
+  return (
+    <div className="h-full w-full">
+      <p>{id}</p>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
+    </BaseLayout>
+  );
+};

src/pages/profile/personal.tsx

@@ -1,19 +0,0 @@
-import BaseLayout from '@layouts/base';
-
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
-
-export default function Page() {
-  return <div></div>;
-}
-
-Page.getLayout = function getLayout(
-  page:
-    | string
-    | number
-    | boolean
-    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
-    | ReactFragment
-    | ReactPortal
-) {
-  return <BaseLayout>{page}</BaseLayout>;
-};