added sidebar navigation button

src/components/Sidebar/NavigationButton.tsx

@@ -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;

src/components/Sidebar/NavigationSection.tsx

@@ -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}>
+            <NavigationButton
-                <FlexWrapper>
+                icon={<DeleteIcon />}
-                    <Box mr="10px">
+                label={constants.TRASH}
-                        <DeleteIcon />
+                count={collectionSummaries.get(TRASH_SECTION)?.fileCount}
-                    </Box>
+                onClick={openTrashSection}
-
+            />
-                    {constants.TRASH}
+            <NavigationButton
-                    <DotSeparator />
+                icon={<VisibilityOffIcon />}
-                    <Typography color="text.secondary">
+                label={constants.ARCHIVE}
-                        {collectionSummaries.get(TRASH_SECTION).fileCount}
+                count={collectionSummaries.get(ARCHIVE_SECTION)?.fileCount}
-                    </Typography>
+                onClick={openArchiveSection}
-                </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>
         </>
     );
 }

src/components/Sidebar/styledComponents.tsx

@@ -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};
 `;