From 736839dc9a0d3c348299703d56f41a7cf67b62a1 Mon Sep 17 00:00:00 2001 From: Brok3Turtl3 Date: Mon, 15 Apr 2024 09:12:38 -0400 Subject: [PATCH 1/3] Created a new component for nav and banner --- client/src/AuthenticatedApp.tsx | 6 +- client/src/components/Header/Header.tsx | 87 +++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 client/src/components/Header/Header.tsx diff --git a/client/src/AuthenticatedApp.tsx b/client/src/AuthenticatedApp.tsx index c162852..02f9b63 100644 --- a/client/src/AuthenticatedApp.tsx +++ b/client/src/AuthenticatedApp.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import { Route, Routes } from "react-router-dom"; import Banner from "./components/Banner/Banner"; import Navbar from "./components/Navbar/Navbar"; +import Header from "./components/Header/Header"; import MainPage from "./pages/MainPage/MainPage"; import Forums from "./pages/Forums/Forums"; import Profiles from "./pages/Profiles/Profiles"; @@ -38,8 +39,9 @@ const AuthenticatedApp = () => { return (
- - + {/* + */} +
} /> } /> diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx new file mode 100644 index 0000000..48bc963 --- /dev/null +++ b/client/src/components/Header/Header.tsx @@ -0,0 +1,87 @@ +import React, { useState } from "react"; +import { Link, useLocation, useNavigate } from "react-router-dom"; +import logo from "../../assets/hammer.png"; +import { useAppDispatch, useAppSelector } from "../../app/hooks"; +import { logout } from "../../features/user/userSlice"; + +const Header = (): JSX.Element => { + const user = useAppSelector((state) => state.user.userData); + const dispatch = useAppDispatch(); + const navigate = useNavigate(); + const location = useLocation(); + const [showDropdown, setShowDropdown] = useState(false); + + const handleLogout = () => { + dispatch(logout()); + navigate("/"); + //TODO CLEAR ALL STATE + }; + + const currentPath = location.pathname.replace("/app/", ""); + + return ( +
+ Code Hammers Logo +
+ + MainPage + + + Profiles + + + Forums + +
+
+ + {showDropdown && ( + + )} +
+
+ ); +}; + +export default Header; From f9664710342de1556cf6bfeacd1b90fd8d0a7310 Mon Sep 17 00:00:00 2001 From: Brok3Turtl3 Date: Mon, 15 Apr 2024 09:51:31 -0400 Subject: [PATCH 2/3] Some styling and responsiveness adjustments as well as dropdown functionality improvement --- client/src/components/Header/Header.tsx | 86 ++++++++++++++++--------- 1 file changed, 56 insertions(+), 30 deletions(-) diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index 48bc963..3e9b71c 100644 --- a/client/src/components/Header/Header.tsx +++ b/client/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useRef, useEffect } from "react"; import { Link, useLocation, useNavigate } from "react-router-dom"; import logo from "../../assets/hammer.png"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; @@ -10,6 +10,7 @@ const Header = (): JSX.Element => { const navigate = useNavigate(); const location = useLocation(); const [showDropdown, setShowDropdown] = useState(false); + const dropdownRef = useRef(null); const handleLogout = () => { dispatch(logout()); @@ -19,37 +20,59 @@ const Header = (): JSX.Element => { const currentPath = location.pathname.replace("/app/", ""); + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setShowDropdown(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [dropdownRef]); + return (
- Code Hammers Logo -
- - MainPage - - - Profiles - - - Forums - +
+ Code Hammers Logo +

Code Hammers

+
+ +
+
+ + MainPage + + + Profiles + + + Forums + +
{showDropdown && ( -
+
{ navigate("/app/profile"); setShowDropdown(false); @@ -72,7 +98,7 @@ const Header = (): JSX.Element => { Logout From c5382987efe0566ea7be95e8783b4b75aafb568a Mon Sep 17 00:00:00 2001 From: Brok3Turtl3 Date: Mon, 15 Apr 2024 10:21:41 -0400 Subject: [PATCH 3/3] Removed unused component imports --- client/src/AuthenticatedApp.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/src/AuthenticatedApp.tsx b/client/src/AuthenticatedApp.tsx index 02f9b63..b6d2321 100644 --- a/client/src/AuthenticatedApp.tsx +++ b/client/src/AuthenticatedApp.tsx @@ -1,7 +1,5 @@ import React, { useEffect, useState } from "react"; import { Route, Routes } from "react-router-dom"; -import Banner from "./components/Banner/Banner"; -import Navbar from "./components/Navbar/Navbar"; import Header from "./components/Header/Header"; import MainPage from "./pages/MainPage/MainPage"; import Forums from "./pages/Forums/Forums"; @@ -39,8 +37,6 @@ const AuthenticatedApp = () => { return (
- {/* - */}
} />