Add navbar component

2026-05-01 18:20:28 +00:00 · 2021-04-28 21:26:03 +01:00
parent 88125ce522
commit 9335214939
2 changed files with 101 additions and 0 deletions
@@ -0,0 +1,62 @@
+import { useReactiveVar } from '@apollo/client';
+import { useHistory } from 'react-router';
+import { roleVar, tokenVar, userVar } from '../../graphql/state';
+import { Wrapper } from './styles';
+import { Avatar, Link, Menu, Text } from '..';
+import { Settings, Logout, Logo } from '../../assets';
+
+type NavbarProps = {
+  withSidebar: boolean;
+};
+
+const Navbar = ({ withSidebar }: NavbarProps) => {
+  const user = useReactiveVar(userVar);
+  const role = useReactiveVar(roleVar);
+  const history = useHistory();
+
+  return (
+    <Wrapper color={role} withSidebar={withSidebar}>
+      <Link href='/client'>
+        <Logo />
+      </Link>
+      <div className='menu'></div>
+      <div className='user' id='user'>
+        <Avatar text='H' color={role} />
+        <Text variant='body' weight='bold'>
+          {user?.firstName} {user?.lastName}
+        </Text>
+      </div>
+      <Menu
+        component='user'
+        items={
+          role !== 'admin'
+            ? [
+                { icon: <Settings />, label: 'Settings', action: () => {} },
+                {
+                  icon: <Logout />,
+                  label: 'Logout',
+                  action: () => {
+                    tokenVar(undefined);
+                    history.push('/login');
+                  },
+                  avoid: true,
+                },
+              ]
+            : [
+                {
+                  icon: <Logout />,
+                  label: 'Logout',
+                  action: () => {
+                    tokenVar(undefined);
+                    history.push('/login');
+                  },
+                  avoid: true,
+                },
+              ]
+        }
+      />
+    </Wrapper>
+  );
+};
+
+export default Navbar;