From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: chore!: restructure repo

I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
---
 .../todos/src/components/layout/Header/Header.js   | 39 ++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js

(limited to 'public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js')

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;
-- 
cgit v1.2.3