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/icon-map.ts

@@ -0,0 +1,11 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
+import { faHouse, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
+
+const IconMap = {
+    HOME: faHouse,
+    LOG_OUT: faRightFromBracket,
+    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,
+} as const;
+
+export { Size };

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

@@ -0,0 +1,39 @@
+import { Link } from '~/bundles/common/components/components.js';
+import { type AppRoute } from '~/bundles/common/enums/enums.js';
+import { useLocation } from '~/bundles/common/hooks/hooks.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 = {
+    icon: ReactElement;
+    isCollapsed: boolean;
+    label: string;
+    bg?: string;
+    color?: string;
+    handleClick?: () => void;
+};
+
+const CollapseButton = ({
+    icon,
+    isCollapsed,
+    label,
+    bg = 'none',
+    color = 'white',
+    handleClick = (): void => {},
+}: 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,111 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {
+    Box,
+    Flex,
+    Icon,
+    IconButton,
+    IconMap,
+    Spacer,
+} from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import {
+    useCallback,
+    useLocation,
+    useNavigate,
+    useState,
+} from '~/bundles/common/hooks/hooks.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+import { UserCard, UserCircle } from '~/bundles/users/components/components.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 handleToggle = useCallback(
+        (): void => setIsCollapsed(!isCollapsed),
+        [isCollapsed],
+    );
+
+    const activeIconPage = (page: ValueOf<typeof AppRoute>): string => {
+        return pathname === page ? 'white' : 'background.600';
+    };
+
+    const handleLogOut = 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
+                aria-label={isCollapsed ? 'expand' : 'collapse'}
+                icon={
+                    isCollapsed ? (
+                        <Icon as={IconMap.ARROW_RIGHT} />
+                    ) : (
+                        <Icon as={IconMap.ARROW_LEFT} />
+                    )
+                }
+                onClick={handleToggle}
+                justifyContent={isCollapsed ? 'center' : 'flex-end'}
+                variant="icon"
+            />
+            <Box mb="30px">
+                {/* ToDo: Add this username value dynamically */}
+                {isCollapsed ? <UserCircle username="FN" /> : <UserCard />}
+            </Box>
+
+            <Box>
+                <CollapseButtonLink
+                    icon={
+                        <Icon
+                            as={FontAwesomeIcon}
+                            icon={IconMap.HOME}
+                            boxSize={Size.LG}
+                            color={activeIconPage('/')}
+                        />
+                    }
+                    label="Home"
+                    to="/"
+                    isCollapsed={isCollapsed}
+                />
+            </Box>
+
+            <Spacer />
+
+            <CollapseButton
+                color="brand.secondary.600"
+                icon={
+                    <Icon
+                        as={FontAwesomeIcon}
+                        icon={IconMap.LOG_OUT}
+                        boxSize={Size.LG}
+                        color="brand.secondary.600"
+                    />
+                }
+                isCollapsed={isCollapsed}
+                label={'log out'}
+                handleClick={handleLogOut}
+            />
+        </Flex>
+    );
+};
+
+export { SideBar };

frontend/src/bundles/common/hooks/hooks.ts

@@ -3,4 +3,4 @@ export { useAppForm } from './use-app-form/use-app-form.hook.js';
 export { useAppSelector } from './use-app-selector/use-app-selector.hook.js';
 export { useField as useFormField } from 'formik';
 export { useCallback, useEffect, useMemo, useState } from 'react';
-export { useLocation } from 'react-router-dom';
+export { useLocation, useNavigate } from 'react-router-dom';

frontend/src/bundles/users/components/components.ts

@@ -1 +1,2 @@
+export { UserCircle } from './user-card/components/user-circle.js';
 export { UserCard } from './user-card/user-card.js';

frontend/src/bundles/users/components/user-card/components/user-circle.tsx

@@ -0,0 +1,20 @@
+import { Circle } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    username: string;
+};
+
+const UserCircle: React.FC<Properties> = ({ username }) => {
+    return (
+        <Circle
+            size="40px"
+            border="2px solid"
+            borderColor="brand.secondary.900"
+            color="brand.secondary.900"
+        >
+            {username}
+        </Circle>
+    );
+};
+
+export { UserCircle };

frontend/src/bundles/users/components/user-card/user-card.tsx

@@ -1,11 +1,12 @@
 import {
     Button,
-    Circle,
     Flex,
     Text,
     VStack,
 } from '~/bundles/common/components/components.js';
 
+import { UserCircle } from '../components.js';
+
 const UserCard: React.FC = () => (
     <VStack rounded="lg" bg="background.600" spacing="10px" p="15px 5px 10px">
         <Flex
@@ -16,13 +17,7 @@ const UserCard: React.FC = () => (
             pl="10px"
         >
             {/* TODO: replace Circle and Text content with dynamic values */}
-            <Circle
-                size="40px"
-                border="2px solid"
-                borderColor="brand.secondary.900"
-            >
-                FN
-            </Circle>
+            <UserCircle username="FN" />
             <Text>Firstname Lastname</Text>
         </Flex>
         <Button label="Create video" />

frontend/src/framework/theme/styles/components.styles.ts

@@ -85,6 +85,12 @@ const components = {
                     color: colors.brand.secondary[300],
                 },
             },
+            icon: {
+                color: colors.white,
+                bg: 'none',
+                _active: { bg: 'none' },
+                _hover: { bg: 'none' },
+            },
         },
     },
     Link: {