chore: initial import for test contour

2026-05-27 19:36:33 +03:00
commit ffd4cf9031
105 changed files with 10772 additions and 0 deletions
@@ -0,0 +1,73 @@
+import { useState, useRef, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { useLogoutMutation } from '/src/api/apiSlice'
+
+export const UserBurger = () => {
+  const username = useSelector( s => s.auth.username );
+  const [ logout ] = useLogoutMutation()
+
+  const [open, setOpen] = useState(false);
+  const toggleRef = useRef(null);
+  const menuRef   = useRef(null);
+
+  useEffect(() => {
+    const handleOutside = e => {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(e.target) &&
+        toggleRef.current &&
+        !toggleRef.current.contains(e.target)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleOutside)
+    return () => document.removeEventListener('mousedown', handleOutside)
+  }, []);
+
+  return (
+    <ul className="navbar-nav ml-auto">
+      <li className="nav-item dropdown no-arrow">
+        <button
+          ref={toggleRef}
+          className="nav-link dropdown-toggle btn btn-link p-0"
+          onClick={() => setOpen(o => !o)}
+          aria-haspopup="true"
+          aria-expanded={open}
+        >
+          <i className="fas fa-user-circle fa-fw"></i>
+          <span className="ml-2 d-none d-lg-inline text-gray-600 small">
+            {username}
+          </span>
+        </button>
+
+        {open && (
+          <div
+            ref={menuRef}
+            className="dropdown-menu dropdown-menu-right shadow animated--grow-in show"
+            aria-labelledby="userMenu"
+          >
+            <Link
+              className="dropdown-item"
+              to="/user"
+              onClick={() => setOpen(false)}
+            >
+              <i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
+              Профиль
+            </Link>
+            <div className="dropdown-divider"></div>
+            <button
+              className="dropdown-item"
+              onClick={() => { setOpen(false); logout() }}
+            >
+              <i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
+              Выйти
+            </button>
+          </div>
+        )}
+      </li>
+    </ul>
+  )
+}