feat: add alternate project finder to left navbar

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

@@ -41,12 +41,51 @@ export const BreadcrumpSeparator = styled.span`
   font-size: 18px;
   margin: 0px 10px;
 `;
+export const ProjectInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const ProjectSwitchInner = styled.div`
+  border-radius: 12px;
+  height: 48px;
+  width: 48px;
+  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.05);
+  align-items: center;
+  background: #cbd4db;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: center;
+
+  background-color: ${props => props.theme.colors.primary};
+`;
+
+export const ProjectSwitch = styled.div`
+  align-self: center;
+  position: relative;
+  margin-right: 16px;
+  cursor: pointer;
+  &::after {
+    border-radius: 12px;
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  &:hover::after {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
 
 export const ProjectActions = styled.div`
   flex: 1;
   align-items: flex-start;
   display: flex;
-  flex-direction: column;
   min-width: 1px;
 `;
 

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

@@ -7,6 +7,7 @@ import { RoleCode } from 'shared/generated/graphql';
 import NOOP from 'shared/utils/noop';
 import { useHistory } from 'react-router';
 import {
+  ProjectInfo,
   NavbarLink,
   TaskcafeLogo,
   TaskcafeTitle,
@@ -14,6 +15,7 @@ import {
   LogoContainer,
   NavSeparator,
   IconContainerWrapper,
+  ProjectSwitch,
   ProjectNameWrapper,
   ProjectNameSpan,
   ProjectNameTextarea,
@@ -33,6 +35,7 @@ import {
   ProfileNameSecondary,
   ProjectMember,
   ProjectMembers,
+  ProjectSwitchInner,
 } from './Styles';
 
 type IconContainerProps = {
@@ -220,43 +223,50 @@ const NavBar: React.FC<NavBarProps> = ({
   };
   const history = useHistory();
   const { showPopup } = usePopup();
+  const $finder = useRef<HTMLDivElement>(null);
   return (
     <NavbarWrapper>
       <NavbarHeader>
         <ProjectActions>
-          <ProjectMeta>
+          <ProjectSwitch ref={$finder} onClick={e => onOpenProjectFinder($finder)}>
+            <ProjectSwitchInner>
+              <TaskcafeLogo innerColor="#9f46e4" outerColor="#000" width={32} height={32} />
+            </ProjectSwitchInner>
+          </ProjectSwitch>
+          <ProjectInfo>
+            <ProjectMeta>
+              {name && (
+                <ProjectHeading
+                  onFavorite={onFavorite}
+                  onOpenSettings={onOpenSettings}
+                  name={name}
+                  canEditProjectName={canEditProjectName}
+                  onSaveProjectName={onSaveName}
+                />
+              )}
+            </ProjectMeta>
             {name && (
-              <ProjectHeading
-                onFavorite={onFavorite}
-                onOpenSettings={onOpenSettings}
-                name={name}
-                canEditProjectName={canEditProjectName}
-                onSaveProjectName={onSaveName}
-              />
+              <ProjectTabs>
+                {menuType &&
+                  menuType.map((menu, idx) => {
+                    return (
+                      <ProjectTab
+                        key={menu.name}
+                        to={menu.link}
+                        exact
+                        onClick={() => {
+                          // TODO
+                        }}
+                      >
+                        {menu.name}
+                      </ProjectTab>
+                    );
+                  })}
+              </ProjectTabs>
             )}
-          </ProjectMeta>
-          {name && (
-            <ProjectTabs>
-              {menuType &&
-                menuType.map((menu, idx) => {
-                  return (
-                    <ProjectTab
-                      key={menu.name}
-                      to={menu.link}
-                      exact
-                      onClick={() => {
-                        // TODO
-                      }}
-                    >
-                      {menu.name}
-                    </ProjectTab>
-                  );
-                })}
-            </ProjectTabs>
-          )}
+          </ProjectInfo>
         </ProjectActions>
         <LogoContainer to="/">
-          <TaskcafeLogo width={32} height={32} />
           <TaskcafeTitle>Taskcafé</TaskcafeTitle>
         </LogoContainer>
         <GlobalActions>