Add header component and side menu; update layout and styles

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;
+  }
+`;