feat: remove appwrite and add nextjs backend

frontend/src/components/navBar/ActionAvatar.tsx

@@ -0,0 +1,47 @@
+import { ActionIcon, Avatar, Menu } from "@mantine/core";
+import { NextLink } from "@mantine/next";
+import { DoorExit, Link, Moon } from "tabler-icons-react";
+import authService from "../../services/auth.service";
+import ToggleThemeButton from "./ToggleThemeButton";
+
+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 authService.signOut();
+        }}
+        icon={<DoorExit size={14} />}
+      >
+        Sign out
+      </Menu.Item>
+      <Menu.Label>Settings</Menu.Label>
+      <Menu.Item icon={<Moon size={14} />}>
+        <ToggleThemeButton />
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default ActionAvatar;

frontend/src/components/navBar/NavBar.tsx

@@ -0,0 +1,131 @@
+import {
+  Burger,
+  Container,
+  Group,
+  Header as MantineHeader,
+  Paper,
+  Text,
+  Transition,
+} from "@mantine/core";
+import { useBooleanToggle } from "@mantine/hooks";
+import { NextLink } from "@mantine/next";
+import getConfig from "next/config";
+import Image from "next/image";
+import { ReactNode, useEffect, useState } from "react";
+import useUser from "../../hooks/user.hook";
+import headerStyle from "../../styles/header.style";
+import ActionAvatar from "./ActionAvatar";
+
+const { publicRuntimeConfig } = getConfig();
+
+type Link = {
+  link?: string;
+  label?: string;
+  component?: ReactNode;
+  action?: () => Promise<void>;
+};
+
+const Header = () => {
+  const [opened, toggleOpened] = useBooleanToggle(false);
+  const [active, setActive] = useState<string>();
+  const user = useUser();
+
+  const { classes, cx } = headerStyle();
+
+  const authenticatedLinks: Link[] = [
+    {
+      link: "/upload",
+      label: "Upload",
+    },
+    {
+      component: <ActionAvatar />,
+    },
+  ];
+
+  const unauthenticatedLinks: Link[] | undefined = [
+    {
+      link: "/auth/signIn",
+      label: "Sign in",
+    },
+  ];
+
+  if (publicRuntimeConfig.SHOW_HOME_PAGE == "true")
+    unauthenticatedLinks.unshift({
+      link: "/",
+      label: "Home",
+    });
+
+  if (publicRuntimeConfig.ALLOW_REGISTRATION == "true")
+    unauthenticatedLinks.push({
+      link: "/auth/signUp",
+      label: "Sign up",
+    });
+
+  const links = user ? authenticatedLinks : unauthenticatedLinks;
+
+  const items = links.map((link, i) => {
+    if (link.component) {
+      return (
+        <Container key={i} pl={5} py={15}>
+          {link.component}
+        </Container>
+      );
+    }
+    if (link) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(() => {
+        if (window.location.pathname == link.link) {
+          setActive(link.link);
+        }
+      }, []);
+      return (
+        <NextLink
+          key={link.label}
+          href={link.link ?? ""}
+          onClick={link.action}
+          className={cx(classes.link, {
+            [classes.linkActive]: link.link && active === link.link,
+          })}
+        >
+          {link.label}
+        </NextLink>
+      );
+    }
+  });
+
+  return (
+    <MantineHeader height={60} mb={20} className={classes.root}>
+      <Container className={classes.header}>
+        <NextLink href="/">
+          <Group>
+            <Image
+              src="/img/logo.svg"
+              alt="Pinvgin Share Logo"
+              height={40}
+              width={40}
+            />
+            <Text weight={600}>Pingvin Share</Text>
+          </Group>
+        </NextLink>
+        <Group spacing={5} className={classes.links}>
+          {items}
+        </Group>
+        <Burger
+          opened={opened}
+          onClick={() => toggleOpened()}
+          className={classes.burger}
+          size="sm"
+        />
+
+        <Transition transition="pop-top-right" duration={200} mounted={opened}>
+          {(styles) => (
+            <Paper className={classes.dropdown} withBorder style={styles}>
+              {items}
+            </Paper>
+          )}
+        </Transition>
+      </Container>
+    </MantineHeader>
+  );
+};
+export default Header;

frontend/src/components/navBar/ToggleThemeButton.tsx

@@ -0,0 +1,19 @@
+import { Switch, useMantineColorScheme } from "@mantine/core";
+
+const ToggleThemeButton = () => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <Switch
+      size="sm"
+      checked={colorScheme == "dark"}
+      onClick={(v) =>
+        toggleColorScheme(v.currentTarget.checked ? "dark" : "light")
+      }
+      onLabel="ON"
+      offLabel="OFF"
+    />
+  );
+};
+
+export default ToggleThemeButton;