upd

client/src/components/Menu.tsx

@@ -7,6 +7,9 @@ import WorkIcon from "./icons/WorkIcon";
 import ExitIcon from "./icons/ExitIcon";
 import useAuthStore from "../stores/useAuthStore";
 import { useClickAway } from "@uidotdev/usehooks";
+import useModalStore from "../stores/useModalStore";
+import SettingsModal from "./modals/SettingsModal";
+import CompanyModal from "./modals/CompanyModal";
 
 function Menu() {
   const [isShow, setIsShow] = useState<boolean>(false);
@@ -15,10 +18,22 @@ function Menu() {
     setIsShow(false);
   });
 
+  const { setModal } = useModalStore();
+
   function logout() {
     setUser(null);
   }
 
+  function handleClickSettings() {
+    setIsShow(false);
+    setModal(<SettingsModal />);
+  }
+
+  function handleClickCompany() {
+    setIsShow(false);
+    setModal(<CompanyModal />);
+  }
+
   return (
     <div>
       <span className="relative z-20 cursor-pointer">
@@ -36,8 +51,8 @@ function Menu() {
 
       <Transition in={isShow} timeout={150} mountOnEnter unmountOnExit>
         {(state) => (
-          <div className={`transition-opacity ${state}`}>
-            <div className="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-10"></div>
+          <div className={`${state}`}>
+            <div className="absolute top-0 left-0 z-20 w-full h-full bg-black bg-opacity-10"></div>
             <div ref={ref} className="absolute z-20 ml-2 mt-3.5">
               <div className="relative">
                 <svg
@@ -57,12 +72,13 @@ function Menu() {
                   <div className="border-b border-[#DAE0E5] p-6 flex flex-col items-center justify-center gap-4">
                     <div className="rounded-full bg-[#E6ECF2] w-[88px] h-[88px] flex justify-center items-center">
                       <p className="text-2xl font-semibold ml-0.5 mt-0.5">
-                        {user?.name[0]}
+                        {user?.name.split(" ")[0][0]}
+                        {user?.name.split(" ")[1][0]}
                       </p>
                     </div>
                     <div className="space-y-1 text-center">
                       <p className="text-sm">{user?.name}</p>
-                      <p className="text-[#77828C] text-xs">{user?.role}</p>
+                      <p className="text-[#77828C] text-xs">{user?.username}</p>
                     </div>
                   </div>
                   <div className="border-b border-[#DAE0E5] py-3 space-y-2">
@@ -76,8 +92,8 @@ function Menu() {
                       Уведомления
                     </button>
                     <button
-                      disabled
                       className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
+                      onClick={handleClickSettings}
                     >
                       <span className="text-[#77828C] py-1">
                         <ParamsIcon />
@@ -87,8 +103,8 @@ function Menu() {
                   </div>
                   <div className="border-b border-[#DAE0E5] py-2">
                     <button
-                      disabled
                       className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
+                      onClick={handleClickCompany}
                     >
                       <span className="text-[#77828C] py-1">
                         <WorkIcon />