improve header component (#8)

xas-standards-client/src/components/DiamondIcon.tsx

@@ -0,0 +1,39 @@
+import { SvgIcon } from "@mui/material"
+
+export default function DiamondIcon() {
+    return (
+        <SvgIcon fontSize="large" >
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   role="img"
+   class="iconify iconify--logos"
+   width="31.88"
+   height="32"
+   preserveAspectRatio="xMidYMid meet"
+   viewBox="0 0 256 257"
+   version="1.1"
+   id="svg3914"
+   sodipodi:docname="vite.svg"
+   stroke="currentColor"
+   fill="currentColor"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+
+  <g
+     transform="matrix(1.0538199,0,0,-1.0538199,0.67781236,254.87384)">
+    <path d="m 167.021,50.0199 c -6.42,-0.9168 -8.488,-5.9148 -4.598,-11.1019 l 17.776,-23.6981 c 17.752,10.0723 32.708,24.493 43.391,41.843 l -56.569,-7.043" />
+    <path d="m 74.6574,75.2738 c 6.4203,0.9184 8.4887,5.9121 4.5985,11.0992 l -46.4973,61.999 c -3.8938,5.187 -2.8301,6.248 2.357,2.357 l 61.9891,-46.49 c 5.1873,-3.894 10.1813,-1.823 11.0993,4.595 l 10.959,113.025 c 0.914,6.42 2.417,6.42 3.335,0 l 10.959,-113.042 c 0.918,-6.417 5.912,-8.485 11.099,-4.595 l 62.012,46.507 c 5.188,3.891 6.248,2.83 2.358,-2.357 L 162.425,86.3699 c -3.89,-5.1867 -1.822,-10.182 4.599,-11.0988 l 62.314,-7.7582 c 7.761,15.941 12.12,33.8391 12.12,52.7621 0,66.674 -54.052,120.726 -120.729,120.726 C 54.052,241.001 0,186.949 0,120.275 0,101.342 4.36563,83.434 12.1297,67.4898 l 62.5277,7.784"/>
+    <path d="m 108.203,16.4551 c -0.918,6.4179 -5.912,8.4859 -11.0995,4.5988 L 78.5465,7.13203 C 88.6414,3.36797 99.3848,0.933984 110.553,0 l -2.35,16.4551"/>
+    <path d="M 133.457,16.4711 131.106,0.0148438 C 142.258,0.966016 152.978,3.41289 163.06,7.18984 L 144.559,21.0691 c -5.19,3.8899 -10.185,1.8188 -11.102,-4.598"/>
+    <path d="M 74.6574,50.016 17.8488,57.0879 C 28.5656,39.6781 43.5848,25.2109 61.4137,15.1301 l 17.8422,23.7871 c 3.8902,5.1867 1.8218,10.1808 -4.5985,11.0988"/>
+  </g>
+</svg>
+</SvgIcon>
+    )
+}

xas-standards-client/src/components/Header.tsx

@@ -10,11 +10,14 @@ import ListItem from "@mui/material/ListItem";
 import List from "@mui/material/List";
 import ListItemText from "@mui/material/ListItemText";
 import Stack from "@mui/material/Stack";
-import { Switch } from "@mui/material";
+import {Switch } from "@mui/material";
 
 import { NavLink } from "react-router-dom";
 
+import DiamondIcon from "./DiamondIcon";
+
 import ColorModeContext from "../contexts/ColorModeContext";
+import UserIcon from "./UserIcon";
 
 function NavListItem(props: { to: string; label: string }) {
   const to = props.to;
@@ -54,11 +57,12 @@ export default function Header() {
 
   return (
     <AppBar style={{ position: "static" }}>
-      <Toolbar>
+      <Toolbar sx={{justifyContent:"space-between", alignItems:"center"}}>
+        <Stack direction="row" alignItems={"center"} spacing={2}>
+        <DiamondIcon />
         <Typography variant="h4" component="div" sx={{ flexGrow: 1 }}>
           XAS Standards
         </Typography>
-        <Switch onChange={colorMode.toggleColorMode}></Switch>
         <List component={Stack} direction="row">
           {Object.entries(navitems).map(([key, value]) => (
             <ListItem key={key}>
@@ -75,12 +79,23 @@ export default function Header() {
               </ListItemButton>
             </ListItem>
           ))}
-          {loggedIn ? (
+          {loggedIn && (
             <NavListItem to="/submit" label="Submit" />
-          ) : (
-            <NavListItem to="/login" label="Login" />
-          )}
+          ) }
         </List>
+        </Stack>
+        <Stack direction="row" alignItems={"center"}>
+        <Switch onChange={colorMode.toggleColorMode}></Switch>
+        {!loggedIn ? (
+            <NavListItem to="/login" label="Login" />
+          ) : (        <Stack alignItems={"flex-end"}>
+                        <UserIcon />
+            <Typography>
+              {user.identifier}
+            </Typography>
+
+          </Stack>)}
+        </Stack>
       </Toolbar>
     </AppBar>
   );

xas-standards-client/src/components/UserIcon.tsx

@@ -0,0 +1,10 @@
+import { SvgIcon } from "@mui/material"
+
+export default function UserIcon() {
+    return (
+        <SvgIcon fontSize="large" >
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
+
+</SvgIcon>
+    )
+}

xas-standards-client/src/mocks/handlers.ts

@@ -140,6 +140,14 @@ export const handlers = [
     return HttpResponse.json(response);
   }),
 
+  http.get('/login', () => {
+    return new HttpResponse('<div>Hello</div>', {
+      headers: {
+        'Content-Type': 'application/html'
+      }
+    })
+  })
+
   // http.get("/login", () => {
   //   // ...and respond to them using this JSON response.
   //   return new HttpResponse(null, { status: 302, Location: "/" });