implement responsive breadcrumb behaviour (#53764)

pull/53936/head
Ashley Harrison 3 years ago committed by GitHub
parent 7755f4c4ba
commit 78995e252a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx

@ -44,6 +44,10 @@ export function BreadcrumbItem(props: Props) {
}
const getStyles = (theme: GrafanaTheme2) => {
const separator = css({
color: theme.colors.text.secondary,
});
return {
breadcrumb: css({
alignItems: 'center',
@ -61,9 +65,21 @@ const getStyles = (theme: GrafanaTheme2) => {
color: theme.colors.text.primary,
display: 'flex',
fontWeight: theme.typography.fontWeightMedium,
// logic for small screens
// hide any breadcrumbs that aren't the second to last child (the parent)
[theme.breakpoints.down('md')]: {
display: 'none',
'&:nth-last-child(2)': {
display: 'flex',
flexDirection: 'row-reverse',
[`.${separator}`]: {
transform: 'rotate(180deg)',
},
},
},
}),
separator: css({
color: theme.colors.text.secondary,
}),
separator,
};
};

Loading…
Cancel
Save