admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix #7085 breadcrumb fix for mobile viewport (#7419)

Browse Source 
ISSUE
Closes https://github.com/twentyhq/twenty/issues/7085

DEMO 


https://github.com/user-attachments/assets/39692906-c02e-4e4c-9205-82447fa142df

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
NitinPSingh
2024-10-31 22:47:13 +05:30
committed by GitHub
parent 74291e531c
commit e5641c5c53
9 changed files with 122 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx
View File

@ -1,62 +0,0 @@
import styled from '@emotion/styled';
import { Fragment, ReactNode } from 'react';
import { Link } from 'react-router-dom';
export type BreadcrumbProps = {
className?: string;
links: { children: string | ReactNode; href?: string }[];
};
const StyledWrapper = styled.nav`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: grid;
font-size: ${({ theme }) => theme.font.size.md};
grid-auto-flow: column;
grid-column-gap: ${({ theme }) => theme.spacing(1)};
max-width: 100%;
min-width: 0;
height: ${({ theme }) => theme.spacing(8)};
`;
const StyledLink = styled(Link)`
color: inherit;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledDivider = styled.span`
width: ${({ theme }) => theme.spacing(2)};
`;
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
return (
<StyledWrapper className={className}>
{links.map((link, index) => {
const text = typeof link.children === 'string' ? link.children : '';
return (
<Fragment key={index}>
{link.href ? (
<StyledLink title={text} to={link.href}>
{link.children}
</StyledLink>
) : (
<StyledText title={text}>{link.children}</StyledText>
)}
{index < links.length - 1 && <StyledDivider>/</StyledDivider>}
</Fragment>
);
})}
</StyledWrapper>
);
};

1
packages/twenty-ui/src/navigation/index.ts
View File

@ -1,4 +1,3 @@
export * from './breadcrumb/components/Breadcrumb';
export * from './link/components/ActionLink';
export * from './link/components/AdvancedSettingsToggle';
export * from './link/components/ContactLink';