diff --git a/src/components/header.js b/src/components/header.js index d0f2f38ee01df78ff7b5b4ff30e9bac963d2abf4..406f14137795983fe4a799034035ac8bd93b30ff 100644 --- a/src/components/header.js +++ b/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> diff --git a/src/styles/header.module.sass b/src/styles/header.module.sass index 0fc496f8e889ba34bc55334d3e9c6f07d6a0522d..84579d1d9185289bec4f6b065844b1ca1da0cb28 100644 --- a/src/styles/header.module.sass +++ b/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