added sidebar navigation button
This commit is contained in:
parent
a9839b21c3
commit
5248c149b0
39
src/components/Sidebar/NavigationButton.tsx
Normal file
39
src/components/Sidebar/NavigationButton.tsx
Normal file
|
@ -0,0 +1,39 @@
|
|||
import React, { FC } from 'react';
|
||||
import { Box, ButtonProps } from '@mui/material';
|
||||
import SidebarButton from './Button';
|
||||
import { DotSeparator } from './styledComponents';
|
||||
|
||||
interface IProps {
|
||||
hideArrow?: boolean;
|
||||
icon: JSX.Element;
|
||||
label: JSX.Element | string;
|
||||
count: number;
|
||||
}
|
||||
const NavigationButton: FC<ButtonProps<'button', IProps>> = ({
|
||||
icon,
|
||||
label,
|
||||
count,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<SidebarButton
|
||||
smallerArrow
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{ px: '12px', py: '10px' }}
|
||||
css={`
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
`}
|
||||
{...props}>
|
||||
<Box mr={'12px'}>{icon}</Box>
|
||||
{label}
|
||||
<DotSeparator />
|
||||
<Box component={'span'} sx={{ color: 'text.secondary' }}>
|
||||
{count}
|
||||
</Box>
|
||||
</SidebarButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavigationButton;
|
|
@ -1,66 +1,46 @@
|
|||
import React, { useContext } from 'react';
|
||||
import SidebarButton from './Button';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
import { ARCHIVE_SECTION, TRASH_SECTION } from 'constants/collection';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { FlexWrapper } from 'components/Container';
|
||||
import { CollectionSummaries } from 'types/collection';
|
||||
|
||||
import NavigationButton from './NavigationButton';
|
||||
interface Iprops {
|
||||
closeSidebar: () => void;
|
||||
collectionSummaries: CollectionSummaries;
|
||||
}
|
||||
|
||||
const DotSeparator = () => (
|
||||
<Typography color="text.secondary" ml="10px" mr="10px" fontWeight={700}>
|
||||
{'·'}
|
||||
</Typography>
|
||||
);
|
||||
export default function NavigationSection({
|
||||
closeSidebar,
|
||||
collectionSummaries,
|
||||
}: Iprops) {
|
||||
const galleryContext = useContext(GalleryContext);
|
||||
const openArchiveSection = () => {
|
||||
galleryContext.setActiveCollection(ARCHIVE_SECTION);
|
||||
closeSidebar();
|
||||
};
|
||||
|
||||
const openTrashSection = () => {
|
||||
galleryContext.setActiveCollection(TRASH_SECTION);
|
||||
closeSidebar();
|
||||
};
|
||||
|
||||
const openArchiveSection = () => {
|
||||
galleryContext.setActiveCollection(ARCHIVE_SECTION);
|
||||
closeSidebar();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SidebarButton bgDark onClick={openTrashSection}>
|
||||
<FlexWrapper>
|
||||
<Box mr="10px">
|
||||
<DeleteIcon />
|
||||
</Box>
|
||||
|
||||
{constants.TRASH}
|
||||
<DotSeparator />
|
||||
<Typography color="text.secondary">
|
||||
{collectionSummaries.get(TRASH_SECTION).fileCount}
|
||||
</Typography>
|
||||
</FlexWrapper>
|
||||
</SidebarButton>
|
||||
<SidebarButton bgDark onClick={openArchiveSection}>
|
||||
<FlexWrapper>
|
||||
<Box mr="10px">
|
||||
<VisibilityOffIcon />
|
||||
</Box>
|
||||
|
||||
{constants.ARCHIVE}
|
||||
<DotSeparator />
|
||||
<Typography color="text.secondary">
|
||||
{collectionSummaries.get(ARCHIVE_SECTION).fileCount}
|
||||
</Typography>
|
||||
</FlexWrapper>
|
||||
</SidebarButton>
|
||||
<NavigationButton
|
||||
icon={<DeleteIcon />}
|
||||
label={constants.TRASH}
|
||||
count={collectionSummaries.get(TRASH_SECTION)?.fileCount}
|
||||
onClick={openTrashSection}
|
||||
/>
|
||||
<NavigationButton
|
||||
icon={<VisibilityOffIcon />}
|
||||
label={constants.ARCHIVE}
|
||||
count={collectionSummaries.get(ARCHIVE_SECTION)?.fileCount}
|
||||
onClick={openArchiveSection}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -25,6 +25,6 @@ export const DotSeparator = styled(CircleIcon)`
|
|||
left: 86px;
|
||||
top: 18px;
|
||||
border-radius: 0px;
|
||||
margin: 0 ${({ theme }) => theme.spacing(2)};
|
||||
margin: 0 ${({ theme }) => theme.spacing(1)};
|
||||
color: ${({ theme }) => theme.palette.text.secondary};
|
||||
`;
|
||||
|
|
Loading…
Reference in a new issue