Generate Token through Auth0

front/src/layout/AppLayout.tsx

@@ -9,12 +9,18 @@ const StyledLayout = styled.div`
 
 type OwnProps = {
   children: JSX.Element;
+  user?: {
+    email: string;
+    first_name: string;
+    last_name: string;
+    tenant: { id: string; name: string };
+  };
 };
 
-function AppLayout({ children }: OwnProps) {
+function AppLayout({ children, user }: OwnProps) {
   return (
     <StyledLayout>
-      <Navbar />
+      <Navbar user={user} />
       <div>{children}</div>
     </StyledLayout>
   );

front/src/layout/navbar/Navbar.tsx

@@ -1,50 +1,68 @@
 import styled from '@emotion/styled';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 import NavItem from './NavItem';
+import ProfileContainer from './ProfileContainer';
 
 const NavbarContainer = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: stretch;
+  justify-content: space-between;
   padding-left: 12px;
   height: 58px;
   border-bottom: 2px solid #eaecee;
 `;
 
-function Navbar() {
+const NavItemsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+type OwnProps = {
+  user?: {
+    email: string;
+    first_name: string;
+    last_name: string;
+    tenant: { id: string; name: string };
+  };
+};
+
+function Navbar({ user }: OwnProps) {
   return (
     <>
       <NavbarContainer>
-        <NavItem
-          label="Inbox"
-          to="/"
-          active={
-            !!useMatch({
-              path: useResolvedPath('/').pathname,
-              end: true,
-            })
-          }
-        />
-        <NavItem
-          label="Contacts"
-          to="/contacts"
-          active={
-            !!useMatch({
-              path: useResolvedPath('/contacts').pathname,
-              end: true,
-            })
-          }
-        />
-        <NavItem
-          label="Insights"
-          to="/insights"
-          active={
-            !!useMatch({
-              path: useResolvedPath('/insights').pathname,
-              end: true,
-            })
-          }
-        />
+        <NavItemsContainer>
+          <NavItem
+            label="Inbox"
+            to="/"
+            active={
+              !!useMatch({
+                path: useResolvedPath('/').pathname,
+                end: true,
+              })
+            }
+          />
+          <NavItem
+            label="Contacts"
+            to="/contacts"
+            active={
+              !!useMatch({
+                path: useResolvedPath('/contacts').pathname,
+                end: true,
+              })
+            }
+          />
+          <NavItem
+            label="Insights"
+            to="/insights"
+            active={
+              !!useMatch({
+                path: useResolvedPath('/insights').pathname,
+                end: true,
+              })
+            }
+          />
+        </NavItemsContainer>
+        <ProfileContainer user={user} />
       </NavbarContainer>
     </>
   );

front/src/layout/navbar/ProfileContainer.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  user?: {
+    email: string;
+    first_name: string;
+    last_name: string;
+    tenant: { id: string; name: string };
+  };
+};
+
+const StyledContainer = styled.button`
+  display: flex;
+  height: 60px;
+  background: inherit;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 14px;
+  margin-bottom: -2px;
+  cursor: pointer;
+  border: 0;
+`;
+
+const StyledInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledEmail = styled.div`
+  display: flex;
+`;
+
+const StyledTenant = styled.div`
+  display: flex;
+  text-transform: capitalize;
+  font-weight: bold;
+`;
+
+const StyledAvatar = styled.div`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  background: black;
+  font-size: 20px;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  margin-right: 16px;
+  flex-shrink: 0;
+`;
+
+function ProfileContainer({ user }: OwnProps) {
+  return (
+    <StyledContainer>
+      <StyledAvatar>
+        {user?.first_name
+          .split(' ')
+          .map((n) => n[0])
+          .join('')}
+      </StyledAvatar>
+      <StyledInfoContainer>
+        <StyledEmail>{user?.email}</StyledEmail>
+        <StyledTenant>{user?.tenant.name}</StyledTenant>
+      </StyledInfoContainer>
+    </StyledContainer>
+  );
+}
+
+export default ProfileContainer;

front/src/layout/navbar/__stories__/Navbar.stories.tsx

@@ -9,6 +9,13 @@ export default {
 
 export const NavbarOnInsights = () => (
   <MemoryRouter initialEntries={['/insights']}>
-    <Navbar />
+    <Navbar
+      user={{
+        email: 'charles@twenty.com',
+        first_name: 'Charles',
+        last_name: 'Bochet',
+        tenant: { id: '1', name: 'Twenty' },
+      }}
+    />
   </MemoryRouter>
 );