eto pizdec tovarishi

frontend/app/src/components/HeaderComponent.tsx

@@ -1,5 +1,5 @@
 import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Layout, Menu, MenuProps, Tooltip } from "antd";
+import { Button, Layout, Menu, MenuProps, Popover, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";
@@ -12,30 +12,32 @@ type NullableUser = { name: string | null; username: string } | null;
 
 const HeaderComponent = () => {
   const [authModalOpen, setAuthModalOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
 
   const user: NullableUser = useSelector(
     (state: StorePrototype) => state.auth.user
   );
 
-  // const userMenuItems: MenuProps["userMenuItems"] = [
-  //   {
-  //     label: <Button>Log out</Button>,
-  //     key: "logout",
-  //     icon: <LogoutOutlined />,
-  //     onClick: () => store.dispatch(logOut()),
-  //   },
-  // ]
+  const userMenuItems: MenuProps["userMenuItems"] = [
+    {
+      label: "Log out",
+      key: "logout",
+      icon: <LogoutOutlined />,
+      onClick: () => store.dispatch(logOut()),
+    },
+  ];
 
   const items: MenuProps["items"] = [
     {
       label: user ? (
-        <Tooltip
-          title={
-            <Button onClick={() => store.dispatch(logOut())}>Log out</Button>
-          }
+        <Popover
+          trigger="click"
+          open={userMenuOpen}
+          onOpenChange={(isOpen) => setUserMenuOpen(isOpen)}
+          content={<Menu theme="dark" mode="vertical" items={userMenuItems} />}
         >
           {user.username}
-        </Tooltip>
+        </Popover>
       ) : (
         "Log In"
       ),