Add header component and side menu; update layout and styles

src/components/menu/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import {useLocation} from 'react-router-dom';
+import {useSelector} from 'react-redux';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+import {RootState} from 'store';
+import urlRoute from 'routers/url-routes';
+
+import {MenuLayout, MenuItem} from './style';
+
+interface IMenu {
+  toggleShowMenu: () => void;
+}
+
+const menuTitles = Object.keys(urlRoute).filter((menuTitle: string) => menuTitle !== 'login');
+const Menu = (props: IMenu) => {
+  const {toggleShowMenu} = props;
+  const applicationId = useSelector((state: RootState) => state.authentication.applicationId);
+  const {pathname} = useLocation();
+  const currentLocation = pathname.split('/')[2];
+
+  return (
+    <MenuLayout>
+      {menuTitles.map((menuItem: string): JSX.Element | null => {
+        const {path, icon, notSupported} = urlRoute[menuItem];
+
+        if (notSupported) {
+          return null;
+        }
+
+        const active = currentLocation === path;
+
+        return (
+          <MenuItem
+            className={active ? 'active' : ''}
+            onClick={toggleShowMenu}
+            key={menuItem}
+            to={`/${applicationId}/${path}`}
+          >
+            <span><FontAwesomeIcon icon={icon} /></span>
+            <p>{menuItem}</p>
+          </MenuItem>
+        );
+      })}
+    </MenuLayout>
+  );
+};
+
+export default Menu;

src/components/menu/style.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+import {Link} from 'components/ui';
+import {theme, paddings} from 'components/shared/theme';
+
+const {
+  colors,
+  primaryThemeColor
+} = theme;
+
+export const MenuLayout = styled.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+
+export const MenuItem = styled.default(Link)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  padding: 0 ${paddings.xlarge};
+  color: ${colors.white};
+  text-transform: capitalize;
+  text-decoration: none;
+  cursor: pointer;
+  &.active {
+    color: ${primaryThemeColor};
+  }
+  &:hover {
+    background: ${colors.headerColor};
+  }
+  & span {
+    font-size: 22px;
+    margin: 0 ${paddings.medium} 0 0;
+  }
+`;