Function MobileMenu

apps/cursor/src/components/mobile-menu.tsx:21–161

()

};

export function MobileMenu() {
  const pathname = usePathname();
  const [isOpen, setIsOpen] = useState(false);
  const supabase = createClient();
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    async function getUser() {
      const session = await supabase.auth.getSession();

      if (!session.data.session) {
        return;
      }

      const { data } = await supabase
        .from("users")
        .select("id, slug, name, image")
        .eq("id", session.data.session?.user?.id)
        .single();

      setUser(data);
    }

    if (!user) {
      getUser();
    }
  }, [pathname]);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
    return () => {
      document.body.style.overflow = "unset";
    };
  }, [isOpen]);

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    setUser(null);
    setIsOpen(false);
  };

  return (
    <>
      <div className="md:hidden mr-4">
        {user ? (
          <Avatar
            className="size-6 rounded-none cursor-pointer"
            onClick={() => setIsOpen(!isOpen)}
          >
            <AvatarImage src={user?.image} className="rounded-none" />
            <AvatarFallback className="rounded-md bg-muted text-xs text-foreground">
              {user?.name?.charAt(0)}
            </AvatarFallback>
          </Avatar>