feat: consistent styling for dropdown menus (#235)

* made user menu into a drawer

* deleted user menu component

* fixed lint errors

* changed to group element

* some clean up

* removed flex import

src/components/Header/Navbar.tsx

@@ -11,17 +11,34 @@ import {
   Group,
   useMantineTheme,
   Box,
+  Button,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import Link from "next/link";
-import { useSession } from "next-auth/react";
+import { signOut, useSession } from "next-auth/react";
 import { UserButton } from "../LogInButton";
-import UserMenu from "./UserMenu";
+import { IconLogout2, IconNotebook, IconSettings } from "@tabler/icons-react";
 // import { usePathname } from "next/navigation";
 
+const userMenuItems = [
+  {
+    name: "My Recipes",
+    href: "/dashboard",
+    icon: <IconNotebook />,
+  },
+  {
+    name: "Settings",
+    href: "#",
+    icon: <IconSettings />,
+  },
+];
+
 export const Navbar = () => {
   const { data: session } = useSession();
-  const [opened, { open, close }] = useDisclosure(false);
+  const [burgerOpened, { open: openBurger, close: closeBurger }] =
+    useDisclosure(false);
+  const [userButtonOpened, { open: openUserButton, close: closeUserButton }] =
+    useDisclosure(false);
   const theme = useMantineTheme();
   // usePathname if we want highlighted links
   // const active = usePathname();
@@ -38,14 +55,19 @@ export const Navbar = () => {
   return (
     <Box component="header" bg={theme.primaryColor} h={"56px"}>
       <Container {...containerProps} size="md">
+        {/* Burger menu */}
         <Burger
           hiddenFrom="xs"
           color="cream.0"
-          opened={opened}
-          onClick={open}
+          opened={burgerOpened}
+          onClick={openBurger}
           size="md"
         />
-        <Drawer opened={opened} onClose={close} withCloseButton={false}>
+        <Drawer
+          opened={burgerOpened}
+          onClose={closeBurger}
+          withCloseButton={false}
+        >
           <Group>
             <Drawer.CloseButton m={0} />
             <Text size="xl" fw={700}>
@@ -66,7 +88,7 @@ export const Navbar = () => {
             </Anchor>
           </Stack>
         </Drawer>
-
+        {/* Burger menu content if big screen */}
         <Group visibleFrom="xs">
           <Anchor c="cream.0" component={Link} href="/about">
             About
@@ -81,20 +103,75 @@ export const Navbar = () => {
           </Anchor>
         </Group>
 
+        {/* Logo */}
         <Anchor component={Link} href="/" underline="never">
           <Text c="cream.0" fw={500}>
             Recipe Declutter
           </Text>
         </Anchor>
-        {/* Different button depending on whether the user is logged in or not */}
+
+        {/* User menu (no menu if logged out, only login button) */}
         {!session ? (
           <Link href="/login" passHref>
-            <UserButton displayName="Log in" />
+            <UserButton isLoggedIn={false} displayName="Log in" />
           </Link>
         ) : (
-          <UserMenu
-            displayName={session.user.name?.charAt(0).toUpperCase() || "U"}
-          />
+          <>
+            <UserButton
+              isLoggedIn={true}
+              displayName={session.user.name?.charAt(0).toUpperCase() || "U"}
+              onClick={openUserButton}
+            />
+            <Drawer
+              opened={userButtonOpened}
+              onClose={closeUserButton}
+              withCloseButton={false}
+              position="right"
+            >
+              <Group justify="space-between">
+                <Text size="xl" fw={700}>
+                  {session.user.name}
+                </Text>
+                <Drawer.CloseButton m={0} />
+              </Group>
+              <Divider mt={16} mb={16} />
+
+              <Stack gap={24}>
+                {userMenuItems.map((item, index) => (
+                  <Anchor
+                    key={index}
+                    component={Link}
+                    href={item.href}
+                    onClick={closeUserButton}
+                    c="var(--mantine-color-text)"
+                  >
+                    <Group
+                      align="center"
+                      gap="sm"
+                      p="md"
+                      style={{
+                        border: "1px solid var(--mantine-color-gray-3)",
+                      }}
+                    >
+                      {item.icon}
+                      {item.name}
+                    </Group>
+                  </Anchor>
+                ))}
+                <Button
+                  leftSection={<IconLogout2 size={24} />}
+                  onClick={() => signOut({ callbackUrl: "/login" })}
+                  p="md"
+                  radius={0}
+                  size="xl"
+                  fz="md"
+                  fw="400"
+                >
+                  Log out
+                </Button>
+              </Stack>
+            </Drawer>
+          </>
         )}
       </Container>
     </Box>