everything done

apps/web/src/components/Main.tsx

@@ -14,6 +14,7 @@ import { useMemory } from "@/contexts/MemoryContext";
 
 import Image from "next/image";
 import { getMemoriesFromUrl } from "@/actions/db";
+import { ProfileDrawer } from "./ProfileDrawer";
 
 function supportsDVH() {
   try {
@@ -25,7 +26,6 @@ function supportsDVH() {
 
 export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const searchParams = useSearchParams();
-  const router = useRouter();
 
   const [hide, setHide] = useState(false);
   const [layout, setLayout] = useState<"chat" | "initial">("initial");
@@ -307,12 +307,17 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
             )}
           >
             <Image
-              className="absolute right-10 top-10 rounded-md"
+              className="hidden md:block absolute right-10 top-10 rounded-md"
               src="/icons/logo_bw_without_bg.png"
               alt="Smort logo"
               width={50}
               height={50}
             />
+						<div
+              className="absolute block md:hidden right-10 top-10"
+						>
+							{width <= 768 && <ProfileDrawer hide={hide} />}
+						</div>
             <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl font-bold tracking-tight md:mt-0">
               Ask your second brain
             </h1>
@@ -446,6 +451,8 @@ export function Chat({
     const lines = countLines(e.target);
     e.target.rows = Math.min(5, lines);
   }
+	
+  const { width } = useViewport();
 
   return (
     <main
@@ -454,6 +461,12 @@ export function Chat({
         "sidebar relative flex w-full flex-col items-end gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:gap-10 md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
       )}
     >
+
+			<div
+				className="absolute block md:hidden z-[100] right-10 top-10"
+			>
+				{width <= 768 && <ProfileDrawer />}
+			</div>
       <div className="scrollbar-none h-[70vh] md:h-screen w-full overflow-y-auto px-2 md:px-5">
         {chatHistory.map((msg, i) => (
           <ChatMessage index={i} key={i} isLast={i === chatHistory.length - 1}>

apps/web/src/components/ProfileDrawer.tsx

@@ -0,0 +1,37 @@
+
+import { useRef, useState } from "react";
+import { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger } from "./ui/drawer";
+import { cn } from "@/lib/utils";
+import { ProfileTab } from "./Sidebar";
+import { useSession } from "next-auth/react";
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  hide?: boolean;
+}
+
+export function ProfileDrawer({ className, hide = false, ...props }: Props) {
+
+	const { data: session } = useSession();
+	
+  return (
+    <Drawer
+			snapPoints={[0.9]}
+      shouldScaleBackground={false}
+    >
+			<DrawerTrigger>
+				<img src={session?.user?.image ?? "/icons/white_without_bg.png"} className="w-10 h-10 rounded-full" />
+			</DrawerTrigger>
+      <DrawerContent
+        overlay={false}
+        className={cn(
+          "border-rgray-6 z-[101] bg-rgray-3 DrawerContent data-[expanded=true]:bg-rgray-3 h-full w-screen border transition-[background] focus-visible:outline-none",
+          hide ? "hidden" : "",
+        )}
+      >
+				<div className="w-full h-[85vh] overflow-y-auto">
+					<ProfileTab open={true} />
+				</div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

apps/web/src/components/Sidebar/index.tsx

@@ -208,10 +208,10 @@ export function ProfileTab({ open }: { open: boolean }) {
 	}, [open])
 
 	return (
-		<div className="text-rgray-11 h-full flex w-full font-normal flex-col items-start py-8 text-left">
-      <div className="w-full px-8">
+		<div className="text-rgray-11 h-full flex w-full font-normal flex-col items-start py-3 md:py-8 text-left">
+      <div className="w-full px-6">
         <h1 className="w-full text-2xl font-medium">Profile</h1>
-				<div className="w-full mt-5 grid grid-cols-3">
+				<div className="w-full mt-5 grid gap-1 grid-cols-3">
 					<img
 						className="rounded-full"
 						src={session?.user?.image ?? "/icons/white_without_bg.png"}

apps/web/src/components/ui/drawer.tsx

@@ -53,7 +53,7 @@ const DrawerContent = React.forwardRef<
       {...props}
     >
       {handle && (
-        <div className="bg-rgray-4 mx-auto mt-4 h-2 w-[100px] rounded-full " />
+        <div className="bg-rgray-4 mx-auto mb-1 h-2 w-[100px] rounded-full " />
       )}
       {children}
     </DrawerPrimitive.Content>