Add User Info Page

src/components/navBar/ActionAvatar.tsx

@@ -0,0 +1,43 @@
+import { ActionIcon, Avatar, Menu } from "@mantine/core";
+import { NextLink } from "@mantine/next";
+import { DoorExit, Link } from "tabler-icons-react";
+import aw from "../../utils/appwrite.util";
+
+const ActionAvatar = () => {
+  return (
+    <Menu
+      control={
+        <ActionIcon>
+          <Avatar size={28} radius="xl" />
+        </ActionIcon>
+      }
+    >
+      <Menu.Label>My account</Menu.Label>
+      <Menu.Item
+        component={NextLink}
+        href="/account/shares"
+        icon={<Link size={14} />}
+      >
+        Shares
+      </Menu.Item>
+      {/* <Menu.Item
+        component={NextLink}
+        href="/account/shares"
+        icon={<Settings size={14} />}
+      >
+        Settings
+      </Menu.Item> */}
+      <Menu.Item
+        onClick={async () => {
+          await aw.account.deleteSession("current");
+          window.location.reload();
+        }}
+        icon={<DoorExit size={14} />}
+      >
+        Sign out
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default ActionAvatar;

src/components/navBar/NavBar.tsx

@@ -13,10 +13,9 @@ import { NextLink } from "@mantine/next";
 import Image from "next/image";
 import React, { useContext, useEffect, useState } from "react";
 import headerStyle from "../../styles/header.style";
-import aw from "../../utils/appwrite.util";
 import { IsSignedInContext } from "../../utils/auth.util";
 import { useConfig } from "../../utils/config.util";
-import ToggleThemeButton from "./ToggleThemeButton";
+import ActionAvatar from "./ActionAvatar";
 
 type Link = {
   link?: string;
@@ -36,26 +35,21 @@ const Header = () => {
       link: "/upload",
       label: "Upload",
     },
-    {
-      label: "Sign out",
-      action: async () => {
-        await aw.account.deleteSession("current");
-        window.location.reload();
-      },
-    },
   ];
 
   const unauthenticatedLinks: Link[] | undefined = [
-    {
-      link: "/",
-      label: "Home",
-    },
     {
       link: "/auth/signIn",
       label: "Sign in",
     },
   ];
 
+  if (!config.DISABLE_HOME_PAGE)
+    unauthenticatedLinks.unshift({
+      link: "/",
+      label: "Home",
+    });
+
   if (!config.DISABLE_REGISTRATION)
     unauthenticatedLinks.push({
       link: "/auth/signUp",
@@ -67,11 +61,11 @@ const Header = () => {
   const items = links.map((link) => {
     if (link) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      // useEffect(() => {
-      //   if (window.location.pathname == link.link) {
-      //     setActive(link.link);
-      //   }
-      // });
+      useEffect(() => {
+        if (window.location.pathname == link.link) {
+          setActive(link.link);
+        }
+      });
       return (
         <NextLink
           key={link.label}
@@ -104,9 +98,8 @@ const Header = () => {
         <Group spacing={5} className={classes.links}>
           {items}
           <Space w={5} />
-          <ToggleThemeButton />
+          {isSignedIn && <ActionAvatar />}
         </Group>
-
         <Burger
           opened={opened}
           onClick={() => toggleOpened()}