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;