adding nested navigation for pages

net/web/src/App.js

@@ -4,6 +4,7 @@ import { Home } from './Home/Home';
 import { Login } from './Login/Login';
 import { Create } from './Create/Create';
 import { User } from './User/User';
+import { Profile } from './User/Profile/Profile';
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import 'antd/dist/antd.min.css'; 
 
@@ -20,7 +21,9 @@ function App() {
             <Route path="/" element={ <Home /> } />
             <Route path="/Login" element={ <Login /> } />
             <Route path="/Create" element={ <Create /> } />
-            <Route path="/User" element={ <User /> } />
+            <Route path="/User" element={ <User /> }>
+              <Route path="profile" element={<Profile />} />
+            </Route>
           </Routes>
         </Router>   
       </div>

net/web/src/User/Profile/Profile.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { ProfileWrapper } from './Profile.styled';
+import { CloseOutlined } from '@ant-design/icons';
+import { useProfile } from './useProfile.hook';
+
+export function Profile(props) {
+
+  const { state, actions } = useProfile();
+
+  return (
+    <ProfileWrapper>
+      <div class="close" onClick={() => actions.close()}>
+        <CloseOutlined />
+      </div>
+    </ProfileWrapper>
+  )
+}
+

net/web/src/User/Profile/Profile.styled.js

@@ -0,0 +1,21 @@
+import { Input, Button, Spin } from 'antd';
+import styled from 'styled-components';
+
+export const ProfileWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #f6f5ed;
+  border-radius: 8px;
+
+  .close {
+    position: absolute;
+    right: 0px;
+    padding-right: 16px;
+    padding-top: 8px;
+    font-size: 1.5em;
+    color: #888;
+    cursor: pointer;
+  }
+`;
+ 

net/web/src/User/Profile/useProfile.hook.js

@@ -0,0 +1,22 @@
+import { useContext, useState, useEffect } from 'react';
+import { AppContext } from '../../AppContext/AppContext';
+import { useNavigate } from "react-router-dom";
+
+export function useProfile() {
+  
+  const [state, setState] = useState({});
+
+  const navigate = useNavigate();
+  const app = useContext(AppContext);
+
+  const actions = {
+    close: () => {
+      navigate('/user')
+    },
+  };
+
+  useEffect(() => {
+  }, [app])
+
+  return { state, actions };
+}

net/web/src/User/SideBar/Contacts/Contacts.styled.jsx

@@ -4,8 +4,7 @@ import styled from 'styled-components';
 export const ContactsWrapper = styled.div`
   width: 100%;
   flex-grow: 1;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-radius: 8px;
   background-color: #f6f5ed;
   border-top: 1px solid #8fbea7;
   border-right: 1px solid #8fbea7;

net/web/src/User/SideBar/Identity/Identity.jsx

@@ -22,7 +22,7 @@ export function Identity() {
   const menu = (
     <Menu>
       <Menu.Item key="0">
-        <div onClick={() => {}}>Edit Profile</div>
+        <div onClick={() => actions.editProfile()}>Edit Profile</div>
       </Menu.Item>
       <Menu.Item key="1">
         <div onClick={() => actions.logout()}>Sign Out</div>

net/web/src/User/SideBar/Identity/useIdentity.hook.js

@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { AppContext } from '../../../AppContext/AppContext';
+import { useNavigate } from "react-router-dom";
 
 export function useIdentity() {
   
@@ -13,9 +14,13 @@ export function useIdentity() {
   const actions = {
     logout: async () => {
       app.actions.logout()
+    },
+    editProfile: () => {
+      navigate('/user/profile');
     }
   };
 
+  const navigate = useNavigate();
   const app = useContext(AppContext);
 
   const updateState = (value) => {

net/web/src/User/SideBar/SideBar.styled.js

@@ -9,4 +9,7 @@ export const SideBarWrapper = styled.div`
   background-color: #8fbea7;
   display: flex;
   flex-direction: column;
+  padding-top: 2px;
+  padding-left: 4px;
+  padding-bottom: 4px;
 `;

net/web/src/User/User.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Outlet } from 'react-router-dom';
 import { useUser } from './useUser.hook';
 import { Button } from 'antd';
 import { UserWrapper } from './User.styled';
@@ -15,6 +16,9 @@ export function User() {
       <SideBar />
       <div class="canvas">
         <img class="connect" src={connect} alt="" />
+        <div class="page">
+          <Outlet />
+        </div>
       </div>
     </UserWrapper>
   )

net/web/src/User/User.styled.js

@@ -19,9 +19,23 @@ export const UserWrapper = styled.div`
   }
 
   .connect {
+    position: absolute;
     width: 33%;
     height: 33%;
     object-fit: contain;
   }
+
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding-left: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-right: 4px;
+    z-index: 1;
+  }
 `;