1 files changed, 39 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js
new file mode 100644
index 0000000..75ecf8b
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js
@@ -0,0 +1,39 @@
+import { useSelector } from "react-redux";
+import UserOptions from "./UserOptions/UserOptions";
+import "./Header.scss";
+import { useEffect, useRef, useState } from "react";
+import { useLocation } from "react-router";
+
+function Header() {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const currentUser = useSelector((state) => state.auth.currentUser);
+  const headerRef = useRef(null);
+  const location = useLocation();
+
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [location.pathname]);
+
+  const closeModal = (e) => {
+    if (!headerRef.current.contains(e.relatedTarget)) setIsExpanded(false);
+  };
+
+  return (
+    <header ref={headerRef} className="header" onBlur={closeModal}>
+      <div className="container">
+        <h1 className="branding">ToDos App</h1>
+        {currentUser ? (
+          <UserOptions
+            username={currentUser.username}
+            isExpanded={isExpanded}
+            setIsExpanded={setIsExpanded}
+          />
+        ) : (
+          ""
+        )}
+      </div>
+    </header>
+  );
+}
+
+export default Header;