258685467b
* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { useRecoilValue } from 'recoil';
|
|
|
|
import { currentUserState } from '@/auth/states/currentUserState';
|
|
import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
|
|
|
|
import NavCollapseButton from './NavCollapseButton';
|
|
|
|
const StyledContainer = styled.div`
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
background: inherit;
|
|
border: 0;
|
|
display: flex;
|
|
height: 34px;
|
|
justify-content: space-between;
|
|
padding: ${({ theme }) => theme.spacing(1)};
|
|
padding-bottom: ${({ theme }) => theme.spacing(2)};
|
|
user-select: none;
|
|
`;
|
|
|
|
const StyledLogoAndNameContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
`;
|
|
|
|
type StyledLogoProps = {
|
|
logo?: string | null;
|
|
};
|
|
|
|
const StyledLogo = styled.div<StyledLogoProps>`
|
|
background: url(${(props) => props.logo});
|
|
background-position: center;
|
|
background-size: cover;
|
|
border-radius: ${({ theme }) => theme.border.radius.xs};
|
|
height: 16px;
|
|
width: 16px;
|
|
`;
|
|
|
|
const StyledName = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-family: 'Inter';
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
margin-left: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
type NavWorkspaceButtonProps = {
|
|
showCollapseButton: boolean;
|
|
};
|
|
|
|
const NavWorkspaceButton = ({
|
|
showCollapseButton,
|
|
}: NavWorkspaceButtonProps) => {
|
|
const currentUser = useRecoilValue(currentUserState);
|
|
|
|
const currentWorkspace = currentUser?.workspaceMember?.workspace;
|
|
const DEFAULT_LOGO =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<StyledLogoAndNameContainer>
|
|
<StyledLogo
|
|
logo={
|
|
currentWorkspace?.logo
|
|
? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
|
|
: DEFAULT_LOGO
|
|
}
|
|
></StyledLogo>
|
|
<StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
|
|
</StyledLogoAndNameContainer>
|
|
<NavCollapseButton direction="left" show={showCollapseButton} />
|
|
</StyledContainer>
|
|
);
|
|
};
|
|
|
|
export default NavWorkspaceButton;
|