Merge pull request #191 from SCCapstone/cleanupHeader

Cleanup header

FU.SPA/src/components/Navbar.css

@@ -18,12 +18,13 @@ body {
   justify-content: space-between;
   align-items: stretch;
   gap: 2rem;
-  padding: 0 1rem;
+  font-size: 1rem;
+  height: 50px;
 }
 
 .left-content,
 .right-content {
-  display: flex;
+  display:flex;
 }
 
 .site-title {
@@ -40,13 +41,28 @@ body {
   gap: 1rem;
 }
 
+.nav button {
+color: white;
+background: none;
+border: none; 
+outline: none;
+font-family: inherit;
+font-size: inherit; 
+cursor: pointer; 
+display: flex; 
+align-items: center; 
+padding: 0.2rem; 
+height: 100%; 
+}
+
 .nav a {
   color: inherit;
   text-decoration: none;
   height: 100%;
   display: flex;
-  align-items: center;
+  align-items:center;
   padding: 0.2rem;
+
 }
 
 .nav li.active {

FU.SPA/src/components/Navbar.jsx

@@ -2,17 +2,27 @@ import { Link, useMatch, useResolvedPath } from 'react-router-dom';
 import UserContext from '../context/userContext';
 import { useNavigate } from 'react-router-dom';
 import { useContext } from 'react';
+import Avatar from '@mui/material/Avatar';
 
 export default function Navbar() {
   const { user, logout } = useContext(UserContext);
   const navigate = useNavigate();
 
   const renderTabContent = () => {
     if (user) {
+      // if user has a custom pfp then use that, if not then use MUI instead of default pfp
+      const defaultPFP = user.pfpUrl.includes('https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png');
+      const pfpComponent = !defaultPFP
+      ? <Avatar src={user.pfpUrl} sx={{ width: 33, height: 33 }} />
+      : <Avatar {...stringAvatar(user.username)} sx={{ width: 33, height: 33, bgcolor: stringToColor(user.username) }} />;
       return (
         <>
-          <p>{user.username}</p>
+        <li style={{ display: 'flex', alignItems: 'center' }}>
+        {pfpComponent}
+        </li>
+        <li style={{ display: 'flex', alignItems: 'center' }}>
           <button onClick={logout}>Logout</button>
+        </li>
         </>
       );
     } else {
@@ -59,3 +69,33 @@ function CustomLink({ to, children, ...props }) {
     </li>
   );
 }
+function stringToColor(string) {
+  let hash = 0;
+  let i;
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = '#';
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  return color;
+}
+
+function stringAvatar(name) {
+  // split  name by spaces and filter empty entries
+  let nameParts = name.split(' ').filter(Boolean);
+  // get the first letter of the first part
+  let initials = nameParts[0][0];
+  // if there is a second part to name
+  if (nameParts.length > 1) {
+    initials += nameParts[1][0];
+  }
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: initials,
+  };
+}

FU.SPA/src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
-//import './index.css'
+import './index.css'
 // add comment
 import './components/Navbar.css';
 import { BrowserRouter } from 'react-router-dom';