[#19] Display user information in header and add sidebar for logging …

…the user out

src/adapters/authAdapter.ts

@@ -36,6 +36,17 @@ class AuthAdapter extends BaseAdapter {
     return this.prototype.postRequest('oauth/token', { data: requestParams });
   }
 
+  static logout(accessToken: string) {
+    /* eslint-disable camelcase */
+    const requestParams = {
+      ...commonParams,
+      token: accessToken,
+    };
+    /* eslint-enable camelcase */
+
+    return this.prototype.postRequest('oauth/revoke', { data: requestParams });
+  }
+
   static getUser() {
     return this.prototype.getRequest('me', {});
   }

src/components/Header/index.tsx

@@ -1,14 +1,30 @@
+import { useState } from 'react';
+
+import logo from 'assets/images/logo.svg';
+import Sidebar from 'components/Sidebar';
 import { User } from 'types/User';
 
 type HeaderProps = {
   user: User;
 };
 
 function Header({ user }: HeaderProps) {
+  const [sidebarVisible, setSidebarVisible] = useState(false);
+
   return (
-    <header className="flex w-screen flex-row items-center justify-between p-0">
-      <div className="">Test logo for {user.email}</div>
-      <div className="profile-image">Test image for {user.name}</div>
+    <header className="fixed top-5 flex w-11/12 flex-row items-center justify-between p-0">
+      <div>
+        <img src={logo} alt="logo"></img>
+      </div>
+      <div onClick={() => setSidebarVisible(!sidebarVisible)} role="presentation">
+        {sidebarVisible ? (
+          <Sidebar user={user} />
+        ) : (
+          <div>
+            <img className="cursor-pointer rounded-full" height={36} width={36} src={user.avatarUrl} alt="profile"></img>
+          </div>
+        )}
+      </div>
     </header>
   );
 }

src/components/Sidebar/Sidebar.module.scss

@@ -0,0 +1,5 @@
+.sidebar {
+  border: 5px bla solid;
+
+  background: rgba(30, 30, 30, 0.9);
+}

src/components/Sidebar/index.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+
+import AuthAdapter from 'adapters/authAdapter';
+import { getItem, clearItem } from 'helpers/localStorage';
+import { User } from 'types/User';
+
+import styles from './Sidebar.module.scss';
+import { LOGIN_URL } from '../../constants';
+
+type SidebarProps = {
+  user: User;
+};
+
+function Sidebar({ user }: SidebarProps) {
+  const navigate = useNavigate();
+
+  const performLogout = async (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+
+    const accessToken = getItem('UserProfile')?.auth.access_token;
+    await AuthAdapter.logout(accessToken);
+    clearItem('UserProfile');
+    navigate(LOGIN_URL);
+  };
+
+  return (
+    <aside className={`${styles.sidebar} fixed top-0 right-0 flex h-screen w-1/6 min-w-fit flex-col gap-10 p-0`}>
+      <div className="flex h-16 flex-col items-center justify-between px-5 md:flex-row md:border-b md:border-b-white">
+        <span className="pt-2 font-bold text-white">{user.name}</span>
+        <img className="cursor-pointer rounded-full" height={36} width={36} src={user.avatarUrl} alt="profile"></img>
+      </div>
+      <button onClick={performLogout} className="left-5 text-xl text-white opacity-50">
+        Logout
+      </button>
+    </aside>
+  );
+}
+
+export default Sidebar;