OV-13: Add-side-bar-component

frontend/src/bundles/common/components/components.ts

@@ -1,10 +1,12 @@
 export { Button } from './button/button.js';
 export { Header } from './header/header.js';
+export { IconMap } from './icon/icon.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
+export { SideBar } from './side-bar/side-bar.js';
 export { VideoModal } from './video-modal/video-modal.js';
 export { DownloadIcon } from '@chakra-ui/icons';
 export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
@@ -17,10 +19,12 @@ export {
     FormControl,
     FormErrorMessage,
     Heading,
+    Icon,
     IconButton,
     InputGroup,
     InputRightElement,
     SimpleGrid,
+    Spacer,
     Text,
     VStack,
 } from '@chakra-ui/react';

frontend/src/bundles/common/components/icon/components/icons.tsx

@@ -0,0 +1,28 @@
+import { type IconProps } from '@chakra-ui/react';
+import { type ReactElement } from 'react';
+
+import { Icon } from '../../components.js';
+
+const HomeIcon = (properties: IconProps): ReactElement => {
+    return (
+        <Icon viewBox="0 0 16 18" {...properties}>
+            <path
+                d="M2 16H5V10H11V16H14V7L8 2.5L2 7V16ZM0 18V6L8 0L16 6V18H9V12H7V18H0Z"
+                fill="currentColor"
+            />
+        </Icon>
+    );
+};
+
+const LogOutIcon = (properties: IconProps): ReactElement => {
+    return (
+        <Icon viewBox="0 0 18 19" {...properties}>
+            <path
+                d="M2 18.5C1.45 18.5 0.979167 18.3042 0.5875 17.9125C0.195833 17.5208 0 17.05 0 16.5V2.5C0 1.95 0.195833 1.47917 0.5875 1.0875C0.979167 0.695833 1.45 0.5 2 0.5H8C8.28333 0.5 8.52083 0.595833 8.7125 0.7875C8.90417 0.979167 9 1.21667 9 1.5C9 1.78333 8.90417 2.02083 8.7125 2.2125C8.52083 2.40417 8.28333 2.5 8 2.5H2V16.5H8C8.28333 16.5 8.52083 16.5958 8.7125 16.7875C8.90417 16.9792 9 17.2167 9 17.5C9 17.7833 8.90417 18.0208 8.7125 18.2125C8.52083 18.4042 8.28333 18.5 8 18.5H2ZM14.175 10.5H7C6.71667 10.5 6.47917 10.4042 6.2875 10.2125C6.09583 10.0208 6 9.78333 6 9.5C6 9.21667 6.09583 8.97917 6.2875 8.7875C6.47917 8.59583 6.71667 8.5 7 8.5H14.175L12.3 6.625C12.1167 6.44167 12.025 6.21667 12.025 5.95C12.025 5.68333 12.1167 5.45 12.3 5.25C12.4833 5.05 12.7167 4.94583 13 4.9375C13.2833 4.92917 13.525 5.025 13.725 5.225L17.3 8.8C17.5 9 17.6 9.23333 17.6 9.5C17.6 9.76667 17.5 10 17.3 10.2L13.725 13.775C13.525 13.975 13.2875 14.0708 13.0125 14.0625C12.7375 14.0542 12.5 13.95 12.3 13.75C12.1167 13.55 12.0292 13.3125 12.0375 13.0375C12.0458 12.7625 12.1417 12.5333 12.325 12.35L14.175 10.5Z"
+                fill="currentColor"
+            />
+        </Icon>
+    );
+};
+
+export { HomeIcon, LogOutIcon };

frontend/src/bundles/common/components/icon/icon-map.ts

@@ -0,0 +1,12 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
+
+import { HomeIcon, LogOutIcon } from './components/icons.js';
+
+const IconMap = {
+    HOME: HomeIcon,
+    LOG_OUT: LogOutIcon,
+    ARROW_LEFT: ArrowLeftIcon,
+    ARROW_RIGHT: ArrowRightIcon,
+} as const;
+
+export { IconMap };

frontend/src/bundles/common/components/icon/icon.ts

@@ -0,0 +1,2 @@
+export { IconMap } from './icon-map.js';
+export { Size } from './size.enum.js';

frontend/src/bundles/common/components/icon/size.enum.ts

@@ -0,0 +1,5 @@
+const Size = {
+    LG: 5,
+};
+
+export { Size };

frontend/src/bundles/common/components/side-bar/libs/components/collapse-button-link.tsx

@@ -0,0 +1,40 @@
+import { useLocation } from 'react-router-dom';
+
+import { Link } from '~/bundles/common/components/components.js';
+import { type AppRoute } from '~/bundles/common/enums/enums.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+
+import {
+    type CollapseButtonProperties,
+    CollapseButton,
+} from './collapse-button.js';
+
+type Properties = Omit<CollapseButtonProperties, 'bg' | 'handleClick'> & {
+    to: ValueOf<typeof AppRoute>;
+};
+
+const CollapseButtonLink = ({
+    icon,
+    isCollapsed,
+    label,
+    to,
+}: Properties): JSX.Element => {
+    const { pathname } = useLocation();
+
+    const activeButtonPage = (page: ValueOf<typeof AppRoute>): string => {
+        return pathname === page ? 'background.600' : '';
+    };
+
+    return (
+        <Link to={to}>
+            <CollapseButton
+                bg={activeButtonPage(to)}
+                icon={icon}
+                isCollapsed={isCollapsed}
+                label={label}
+            />
+        </Link>
+    );
+};
+
+export { CollapseButtonLink };

frontend/src/bundles/common/components/side-bar/libs/components/collapse-button.tsx

@@ -0,0 +1,45 @@
+import { type ReactElement } from 'react';
+
+import { Box } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    bg?: string;
+    color?: string;
+    handleClick?: () => void;
+    icon: ReactElement;
+    isCollapsed: boolean;
+    label: string;
+};
+
+const CollapseButton = ({
+    bg = 'none',
+    color = 'white',
+    handleClick = (): void => {},
+    icon,
+    isCollapsed,
+    label,
+}: Properties): JSX.Element => {
+    return (
+        <Box
+            as="button"
+            w="100%"
+            h="50px"
+            color={color}
+            display="flex"
+            justifyContent={isCollapsed ? 'center' : 'flex-start'}
+            alignItems="center"
+            gap="10px"
+            fontSize="1rem"
+            fontWeight="bold"
+            bg={bg}
+            borderRadius="10px"
+            p="10px"
+            onClick={handleClick}
+        >
+            {icon}
+            {isCollapsed ? '' : label}
+        </Box>
+    );
+};
+
+export { type Properties as CollapseButtonProperties, CollapseButton };

frontend/src/bundles/common/components/side-bar/libs/components/components.ts

@@ -0,0 +1,2 @@
+export { CollapseButton } from './collapse-button.js';
+export { CollapseButtonLink } from './collapse-button-link.js';

frontend/src/bundles/common/components/side-bar/side-bar.tsx

@@ -0,0 +1,102 @@
+import { useCallback, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import {
+    Box,
+    Flex,
+    Icon,
+    IconButton,
+    IconMap,
+    Spacer,
+} from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+
+import { Size } from '../icon/icon.js';
+import {
+    CollapseButton,
+    CollapseButtonLink,
+} from './libs/components/components.js';
+
+const SideBar = (): JSX.Element => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
+
+    const toggle = useCallback(
+        (): void => setIsCollapsed(!isCollapsed),
+        [isCollapsed],
+    );
+
+    const activeIconPage = (page: ValueOf<typeof AppRoute>): string => {
+        return pathname === page ? 'white' : 'background.600';
+    };
+
+    const logOut = useCallback(() => {
+        //ToDo: log out user with token
+        navigate(AppRoute.SIGN_IN);
+    }, [navigate]);
+
+    return (
+        <Flex
+            w={isCollapsed ? '60px' : '260px'}
+            bg="background.900"
+            height="100vh"
+            position="fixed"
+            flexDirection="column"
+            justifyContent="space-between"
+            p="10px"
+            pb="20px"
+        >
+            <IconButton
+                bg="none"
+                aria-label={isCollapsed ? 'expand' : 'collapse'}
+                icon={
+                    isCollapsed ? (
+                        <Icon as={IconMap.ARROW_RIGHT} />
+                    ) : (
+                        <Icon as={IconMap.ARROW_LEFT} />
+                    )
+                }
+                mb="10px"
+                onClick={toggle}
+                _active={{ bg: 'none' }}
+                _hover={{ bg: 'none' }}
+                justifyContent={isCollapsed ? 'center' : 'flex-end'}
+            />
+
+            <Box>
+                <CollapseButtonLink
+                    icon={
+                        <Icon
+                            as={IconMap.HOME}
+                            boxSize={Size.LG}
+                            color={activeIconPage('/')}
+                        />
+                    }
+                    label="Home"
+                    to="/"
+                    isCollapsed={isCollapsed}
+                />
+            </Box>
+
+            <Spacer />
+
+            <CollapseButton
+                color="brand.secondary.600"
+                icon={
+                    <Icon
+                        as={IconMap.LOG_OUT}
+                        boxSize={Size.LG}
+                        color="brand.secondary.600"
+                    />
+                }
+                isCollapsed={isCollapsed}
+                label={'log out'}
+                handleClick={logOut}
+            />
+        </Flex>
+    );
+};
+
+export { SideBar };