initial commit

web/src/shared/components/TopNavbar/Styles.ts

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+
+export const NavbarWrapper = styled.div`
+  height: 103px;
+  padding: 1.3rem 2.2rem 2.2rem;
+  width: 100%;
+`;
+
+export const NavbarHeader = styled.header`
+  border-radius: 0.5rem;
+  padding: 0.8rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgb(16, 22, 58);
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
+`;
+export const Breadcrumbs = styled.div`
+  color: rgb(94, 108, 132);
+  font-size: 15px;
+`;
+export const BreadcrumpSeparator = styled.span`
+  position: relative;
+  top: 2px;
+  font-size: 18px;
+  margin: 0px 10px;
+`;
+
+export const ProjectActions = styled.div``;
+export const GlobalActions = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const ProfileContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const ProfileNameWrapper = styled.div`
+  text-align: right;
+  line-height: 1.25;
+`;
+
+export const NotificationContainer = styled.div`
+  margin-right: 20px;
+  cursor: pointer;
+`;
+export const ProfileNamePrimary = styled.div`
+  color: #c2c6dc;
+  font-weight: 600;
+`;
+
+export const ProfileNameSecondary = styled.small`
+  color: #c2c6dc;
+`;
+
+export const ProfileIcon = styled.div`
+  margin-left: 10px;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 700;
+  background: rgb(115, 103, 240);
+  cursor: pointer;
+`;

web/src/shared/components/TopNavbar/TopNavbar.stories.tsx

@@ -0,0 +1,46 @@
+import React, { createRef, useState } from 'react';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+
+import TopNavbar from './index';
+import { action } from '@storybook/addon-actions';
+
+import DropdownMenu from 'shared/components/DropdownMenu';
+
+export default {
+  component: TopNavbar,
+  title: 'TopNavbar',
+
+  // Our exports that end in "Data" are not stories.
+  excludeStories: /.*Data$/,
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#f8f8f8' },
+      { name: 'darkBlue', value: '#262c49', default: true },
+    ],
+  },
+};
+
+export const Default = () => {
+  const [menu, setMenu] = useState({
+    top: 0,
+    left: 0,
+    isOpen: false,
+  });
+  const onClick = (bottom: number, right: number) => {
+    setMenu({
+      isOpen: !menu.isOpen,
+      left: right,
+      top: bottom,
+    });
+  };
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <TopNavbar onNotificationClick={action('notifications click')} onProfileClick={onClick} />
+      {menu.isOpen && <DropdownMenu left={menu.left} top={menu.top} />}
+    </>
+  );
+};

web/src/shared/components/TopNavbar/index.tsx

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import { Bell } from 'shared/icons';
+
+import {
+  NotificationContainer,
+  GlobalActions,
+  ProjectActions,
+  NavbarWrapper,
+  NavbarHeader,
+  Breadcrumbs,
+  BreadcrumpSeparator,
+  ProfileIcon,
+  ProfileContainer,
+  ProfileNameWrapper,
+  ProfileNamePrimary,
+  ProfileNameSecondary,
+} from './Styles';
+
+type NavBarProps = {
+  onProfileClick: (bottom: number, right: number) => void;
+  onNotificationClick: () => void;
+};
+const NavBar: React.FC<NavBarProps> = ({ onProfileClick, onNotificationClick }) => {
+  const $profileRef: any = useRef(null);
+  const handleProfileClick = () => {
+    console.log('click');
+    const boundingRect = $profileRef.current.getBoundingClientRect();
+    onProfileClick(boundingRect.bottom, boundingRect.right);
+  };
+  return (
+    <NavbarWrapper>
+      <NavbarHeader>
+        <ProjectActions>
+          <Breadcrumbs>
+            Projects
+            <BreadcrumpSeparator>/</BreadcrumpSeparator>
+            project name
+            <BreadcrumpSeparator>/</BreadcrumpSeparator>
+            Board
+          </Breadcrumbs>
+        </ProjectActions>
+        <GlobalActions>
+          <NotificationContainer onClick={onNotificationClick}>
+            <Bell color="#c2c6dc" size={20} />
+          </NotificationContainer>
+          <ProfileContainer>
+            <ProfileNameWrapper>
+              <ProfileNamePrimary>Jordan Knott</ProfileNamePrimary>
+              <ProfileNameSecondary>Manager</ProfileNameSecondary>
+            </ProfileNameWrapper>
+            <ProfileIcon ref={$profileRef} onClick={handleProfileClick}>
+              JK
+            </ProfileIcon>
+          </ProfileContainer>
+        </GlobalActions>
+      </NavbarHeader>
+    </NavbarWrapper>
+  );
+};
+
+export default NavBar;