OV-13: Add-side-bar-component

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

@@ -7,6 +7,7 @@ export { Overlay } from './overlay/overlay.js';
 export { Player } from './player/player.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export { Select } from './select/select.js';
+export { Sidebar } from './sidebar/sidebar.js';
 export { Textarea } from './textarea/textarea.js';
 export { VideoModal } from './video-modal/video-modal.js';
 export {
@@ -27,6 +28,7 @@ export {
     InputGroup,
     InputRightElement,
     SimpleGrid,
+    Spacer,
     Text,
     VStack,
 } from '@chakra-ui/react';

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

@@ -0,0 +1 @@
+export { SidebarItem } from './sidebar-item/sidebar-item.js';

frontend/src/bundles/common/components/sidebar/components/sidebar-item/sidebar-item.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;
+    onClick?: () => void;
+};
+
+const SidebarItem = ({
+    icon,
+    isCollapsed,
+    label,
+    bg = 'none',
+    color = 'white',
+    onClick = (): 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={onClick}
+        >
+            {icon}
+            {isCollapsed ? '' : label}
+        </Box>
+    );
+};
+
+export { SidebarItem };

frontend/src/bundles/common/components/sidebar/sidebar.tsx

@@ -0,0 +1,132 @@
+import {
+    Box,
+    Flex,
+    Icon,
+    IconButton,
+    Link,
+    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 { IconName } from '~/bundles/common/icons/icons.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+import { UserAvatar, UserCard } from '~/bundles/users/components/components.js';
+
+import { SidebarItem } from './components/components.js';
+
+type Properties = {
+    children: React.ReactNode;
+};
+
+const Sidebar = ({ children }: Properties): JSX.Element => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
+
+    const handleToggle = useCallback(
+        (): void => setIsCollapsed(!isCollapsed),
+        [isCollapsed],
+    );
+
+    const activeButtonPage = (page: ValueOf<typeof AppRoute>): string => {
+        return pathname === page ? 'background.600' : '';
+    };
+
+    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="100%">
+            <Flex
+                w={isCollapsed ? '60px' : '270px'}
+                bg="background.900"
+                height="calc(100vh - 75px)"
+                position="fixed"
+                flexDirection="column"
+                justifyContent="space-between"
+                p="10px"
+                pb="20px"
+            >
+                <IconButton
+                    aria-label={isCollapsed ? 'expand' : 'collapse'}
+                    icon={
+                        <Icon
+                            as={
+                                isCollapsed
+                                    ? IconName.ARROW_RIGHT
+                                    : IconName.ARROW_LEFT
+                            }
+                        />
+                    }
+                    onClick={handleToggle}
+                    justifyContent={isCollapsed ? 'center' : 'flex-end'}
+                    variant="icon"
+                />
+                <Box mb="30px">
+                    {/* ToDo: Add this username value dynamically */}
+                    {isCollapsed ? <UserAvatar username="FN" /> : <UserCard />}
+                </Box>
+                <Box>
+                    <Link to={AppRoute.ROOT}>
+                        <SidebarItem
+                            bg={activeButtonPage(AppRoute.ROOT)}
+                            icon={
+                                <Icon
+                                    as={IconName.HOME}
+                                    boxSize={5}
+                                    color={activeIconPage(AppRoute.ROOT)}
+                                />
+                            }
+                            isCollapsed={isCollapsed}
+                            label="Home"
+                        />
+                    </Link>
+                    <Link to={AppRoute.MY_AVATAR}>
+                        <SidebarItem
+                            bg={activeButtonPage(AppRoute.MY_AVATAR)}
+                            icon={
+                                <Icon
+                                    as={IconName.AVATAR}
+                                    boxSize={5}
+                                    color={activeIconPage(AppRoute.MY_AVATAR)}
+                                />
+                            }
+                            isCollapsed={isCollapsed}
+                            label="My Avatar"
+                        />
+                    </Link>
+                </Box>
+                <Spacer />
+                <SidebarItem
+                    color="brand.secondary.600"
+                    icon={
+                        <Icon
+                            as={IconName.LOG_OUT}
+                            boxSize={5}
+                            color="brand.secondary.600"
+                        />
+                    }
+                    isCollapsed={isCollapsed}
+                    label={'log out'}
+                    onClick={handleLogOut}
+                />
+            </Flex>
+            <Box flex="1" ml={isCollapsed ? '60px' : '270px'}>
+                {children}
+            </Box>
+        </Flex>
+    );
+};
+
+export { Sidebar };

frontend/src/bundles/common/enums/app-route.enum.ts

@@ -3,6 +3,7 @@ const AppRoute = {
     SIGN_IN: '/sign-in',
     SIGN_UP: '/sign-up',
     STUDIO: '/studio',
+    MY_AVATAR: '/my-avatar',
     ANY: '*',
 } as const;
 

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 { useFormField } from './use-form-field/use-form-field.hook.js';
 export { useCallback, useEffect, useMemo, useState } from 'react';
-export { useLocation } from 'react-router-dom';
+export { useLocation, useNavigate } from 'react-router-dom';

frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts

@@ -0,0 +1,13 @@
+import {
+    faCircleUser,
+    faHouse,
+    faRightFromBracket,
+} from '@fortawesome/free-solid-svg-icons';
+
+import { iconConverter } from './icon-converter.helper.js';
+
+const HouseIcon = iconConverter(faHouse);
+const RightFromBracketIcon = iconConverter(faRightFromBracket);
+const CircleUserIcon = iconConverter(faCircleUser);
+
+export { CircleUserIcon, HouseIcon, RightFromBracketIcon };

frontend/src/bundles/common/icons/helper/icon-converter.helper.ts

@@ -0,0 +1,20 @@
+import {
+    type ComponentWithAs,
+    type IconProps,
+    createIcon,
+} from '@chakra-ui/react';
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
+const iconConverter = (
+    faIcon: IconDefinition,
+): ComponentWithAs<'svg', IconProps> => {
+    const { icon, iconName } = faIcon;
+
+    return createIcon({
+        displayName: iconName,
+        viewBox: `0 0 ${icon[0]} ${icon[1]}`,
+        d: `${icon[4]}`,
+    });
+};
+
+export { iconConverter };

frontend/src/bundles/common/icons/icon-name.ts

@@ -1,6 +1,11 @@
-import { DownloadIcon, ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import {
-    faCircleUser,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    DownloadIcon,
+    ViewIcon,
+    ViewOffIcon,
+} from '@chakra-ui/icons';
+import {
     faCloudArrowUp,
     faEllipsisVertical,
     faFileLines,
@@ -12,16 +17,26 @@ import {
     faTableColumns,
 } from '@fortawesome/free-solid-svg-icons';
 
+import {
+    CircleUserIcon,
+    HouseIcon,
+    RightFromBracketIcon,
+} from './helper/icon-conversion.helper.js';
+
 const IconName = {
     PEN: faPen,
+    HOME: HouseIcon,
+    LOG_OUT: RightFromBracketIcon,
+    ARROW_LEFT: ArrowLeftIcon,
+    ARROW_RIGHT: ArrowRightIcon,
     FILE_LINES: faFileLines,
     PLAY: faPlay,
     SCROLL: faScroll,
     OPTIONS_VERTICAL: faEllipsisVertical,
     DOWNLOAD: DownloadIcon,
     VIEW: ViewIcon,
     VIEW_OFF: ViewOffIcon,
-    AVATAR: faCircleUser,
+    AVATAR: CircleUserIcon,
     UPLOAD: faCloudArrowUp,
     TEMPLATE: faTableColumns,
     SCRIPT: faFont,

frontend/src/bundles/my-avatar/components/circles/circles.tsx

@@ -0,0 +1,24 @@
+import { Circle } from '~/bundles/common/components/components.js';
+
+const Circles = (): JSX.Element => {
+    return (
+        <Circle
+            size="271px"
+            border="solid 1px"
+            borderColor="background.50"
+            position="absolute"
+            left="-71%"
+            top="-270%"
+        >
+            <Circle size="159px" border="solid 1px" borderColor="background.50">
+                <Circle
+                    size="113px"
+                    border="solid 1px"
+                    borderColor="background.50"
+                />
+            </Circle>
+        </Circle>
+    );
+};
+
+export { Circles };

frontend/src/bundles/my-avatar/components/components.ts

@@ -0,0 +1,3 @@
+export { Circles } from './circles/circles.js';
+export { CreateAvatar } from './create-avatar/create-avatar.js';
+export { Dots } from './dots/dots.js';

frontend/src/bundles/my-avatar/components/create-avatar/create-avatar.tsx

@@ -0,0 +1,24 @@
+import { Box, Button, Flex } from '~/bundles/common/components/components.js';
+
+import { Circles, Dots } from '../components.js';
+
+const CreateAvatar = (): JSX.Element => {
+    return (
+        <Flex
+            bg="white"
+            h="215px"
+            borderRadius="lg"
+            justify="center"
+            align="center"
+            overflow="hidden"
+        >
+            <Box w="222px" position="relative">
+                <Circles />
+                <Dots />
+                <Button label="Create Avatar" />
+            </Box>
+        </Flex>
+    );
+};
+
+export { CreateAvatar };

frontend/src/bundles/my-avatar/components/dots/constants/constants.ts

@@ -0,0 +1,4 @@
+const SIZE = '3px';
+const COLOR = 'background.600';
+
+export { COLOR, SIZE };