feat: bring header drawer

src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@apollo/client";
-import { CircleUser } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Drawer, Typography } from "@material-tailwind/react";
+import { Menu } from "lucide-react";
 import { LoginModal } from "@components/Login/LoginModal.tsx";
 import { gql } from "@generated/index.ts";
 import { useUserStore } from "@state/userStore.ts";
@@ -22,7 +22,9 @@ const GET_USER = gql(/* GraphQL */ `
 `);
 
 export function Header() {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const { user, setUser, setIsSessionLoading } = useUserStore();
+  const isLoggedIn = !!user.userId;
 
   const { data, loading, refetch } = useQuery(GET_USER);
 
@@ -51,12 +53,18 @@ export function Header() {
     <>
       <header className="absolute left-0 top-0 z-10 w-full px-4 py-2 sm:px-6 sm:py-4">
         <div className="flex items-center justify-end">
-          <Link to={user.userId ? "/profile" : "#login"}>
-            <CircleUser className="h-10 w-8 cursor-pointer sm:w-10" />
-          </Link>
+          <Menu onClick={() => setIsDrawerOpen(true)} className="h-10 w-8 cursor-pointer sm:w-10" />
         </div>
       </header>
 
+      <Drawer open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} placement="right" className="p-4">
+        <div className="flex flex-col items-center justify-between">
+          <Typography variant="h3" color="blue-gray">
+            Hello explorer!
+          </Typography>
+          {!isLoggedIn && <Typography color="blue-gray">Get started and login to your account</Typography>}
+        </div>
+      </Drawer>
       <LoginModal refetchUser={refetch} />
     </>
   );