Merged PR 8879: Add user identification

src/components/header.js

@@ -6,9 +6,11 @@ import classes from '../styles/header.module.sass'
 import { menuData } from '../data/MenuData'
 import { FaBars } from 'react-icons/fa'
 import { Link } from "gatsby"
-
+import { useMsal } from '../utility/auth/msalContext';
 
 const Header = () => {
+    const { user } = useMsal();
+    
 
     const openInNewTab = (url) => {
         const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
@@ -52,7 +54,14 @@ const Header = () => {
                 ))}
             </div>
 
+
            <div className={classes.login}>
+               { user ? <div className={classes.identification}> 
+                    {user.name}
+                    <br></br>
+                    {user.username}
+                </div> : <></>
+                }
                 <Login></Login>
             </div>
 

src/styles/header.module.sass

@@ -9,8 +9,10 @@
     position: relative;
     width: 100%;
     border-bottom: 1px solid var(--color-subtle-medium);
+    justify-content: flex-end;
 
-
+.logocontainer
+    flex: 1
 
 .logo
     color: black;
@@ -21,11 +23,14 @@
     line-height: 18px;
     padding-left: 1.8rem;
     cursor: pointer;
+    flex-grow: 1;
     @media (max-width: 768px)
         padding-left: 0;
         padding-left: 1.8rem;
         text-align: left;
 
+   
+
 
 .navlink
     font-weight: 400;
@@ -42,8 +47,11 @@
     display: flex;
     align-items: center;
     margin-right: 24px;
+    flex: 1
+    justify-content: flex-end
     @media (max-width: 768px)
         display: none;
+    
 
 .navmenu
     display: flex;
@@ -56,4 +64,7 @@
 
 .burger
     @media (min-width: 768px)
-        display: none;
\ No newline at end of file
+        display: none;
+        
+.identification
+    margin-right: 50px
\ No newline at end of file