initial commit

src/components/navBar/NavBar.tsx

@@ -0,0 +1,122 @@
+import {
+  Burger,
+  Container,
+  Group,
+  Header as MantineHeader,
+  Paper,
+  Space,
+  Text,
+  Transition,
+} from "@mantine/core";
+import { useBooleanToggle } from "@mantine/hooks";
+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 ToggleThemeButton from "./ToggleThemeButton";
+
+type Link = {
+  link?: string;
+  label: string;
+  action?: () => Promise<void>;
+};
+
+const authenticatedLinks: Link[] = [
+  {
+    link: "/upload",
+    label: "Upload",
+  },
+  {
+    label: "Sign out",
+    action: async () => {
+      await aw.account.deleteSession("current");
+      window.location.reload();
+    },
+  },
+];
+
+const unauthenticatedLinks: Link[] = [
+  {
+    link: "/",
+    label: "Home",
+  },
+  {
+    link: "/auth/signUp",
+    label: "Sign up",
+  },
+  {
+    link: "/auth/signIn",
+    label: "Sign in",
+  },
+];
+
+const Header = () => {
+  const [opened, toggleOpened] = useBooleanToggle(false);
+  const [active, setActive] = useState<string>();
+  const isSignedIn = useContext(IsSignedInContext);
+  const { classes, cx } = headerStyle();
+
+  const links = isSignedIn ? authenticatedLinks : unauthenticatedLinks;
+
+  const items = links.map((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="/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}
+          <Space w={5} />
+          <ToggleThemeButton />
+        </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;

src/components/navBar/ToggleThemeButton.tsx

@@ -0,0 +1,26 @@
+import { ActionIcon, useMantineColorScheme } from "@mantine/core";
+import { Sun, MoonStars } from "tabler-icons-react";
+
+const ToggleThemeButton = () => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <ActionIcon
+      onClick={() => toggleColorScheme()}
+      sx={(theme) => ({
+        backgroundColor:
+          theme.colorScheme === "dark"
+            ? theme.colors.dark[6]
+            : theme.colors.gray[0],
+        color:
+          theme.colorScheme === "dark"
+            ? theme.colors.yellow[4]
+            : theme.colors.violet,
+      })}
+    >
+      {colorScheme === "dark" ? <Sun size={18} /> : <MoonStars size={18} />}
+    </ActionIcon>
+  );
+};
+
+export default ToggleThemeButton;