From c7b996857bf96f191a14f298a6566cf4b48b5402 Mon Sep 17 00:00:00 2001
From: Alexis <alexandrescu.alexandra.maria@gmail.com>
Date: Mon, 5 Jun 2023 12:38:17 +0100
Subject: [PATCH] completes the rerouting for stacking

---
 src/components/LeftPanel.tsx                  | 163 ++++++++++++++++--
 src/components/MainPage.tsx                   |  20 ++-
 .../stacking/dashboard/DashboardStacking.tsx  |   5 +
 .../stacking/profile/ProfileStacking.tsx      |   5 +
 src/css/navbars/styles.css                    |  10 +-
 5 files changed, 176 insertions(+), 27 deletions(-)
 create mode 100644 src/components/stacking/dashboard/DashboardStacking.tsx
 create mode 100644 src/components/stacking/profile/ProfileStacking.tsx

diff --git a/src/components/LeftPanel.tsx b/src/components/LeftPanel.tsx
index 8a6daa5..e3f6427 100644
--- a/src/components/LeftPanel.tsx
+++ b/src/components/LeftPanel.tsx
@@ -44,6 +44,8 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
 
   const location = useLocation();
 
+  console.log('location-', location.pathname.slice(0, 8));
+
   const handleClickMiningPoolMenuItem = () => {
     setOpenMiningPoolMenu(!openMiningPoolMenu);
   };
@@ -122,13 +124,108 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
         component="nav"
         aria-labelledby="nested-list-subheader"
       > */}
+        <div style={{ marginTop: -10 }}>
+          <ListItem
+            className={
+              location.pathname === '/stacking/myProfile' || location.pathname === '/stacking/dashboard'
+                ? 'active-custom'
+                : ''
+            }
+            // onClick={toggleDrawer(anchor, false)}
+            // onKeyDown={toggleDrawer(anchor, false)}
+          >
+            <ListItemButton>
+              <ListItemIcon>
+                <HomeIcon style={{ color: colors[appCurrentTheme].secondary }} />
+              </ListItemIcon>
+              <ListItemText
+                className="navbar-sections-font-size"
+                style={{ color: colors[appCurrentTheme].secondary }}
+                primary="Stacking"
+              />
+            </ListItemButton>
+          </ListItem>
+          <Divider style={{ backgroundColor: colors[appCurrentTheme].secondary }} />
+          <Divider style={{ backgroundColor: colors[appCurrentTheme].secondary }} />
+        </div>
+        <div>
+          <ListItem
+            className={location.pathname === '/stacking/dashboard' ? 'active-custom' : ''}
+            onClick={toggleDrawer(anchor, false)}
+            onKeyDown={toggleDrawer(anchor, false)}
+          >
+            <ListItemButton component={Link} to={'/stacking/dashboard'} className="padding-left-sidebar-main-sections">
+              <ListItemIcon>
+                <Home style={{ color: colors[appCurrentTheme].secondary }} />
+              </ListItemIcon>
+              <ListItemText
+                className="navbar-sections-font-size"
+                style={{ color: colors[appCurrentTheme].secondary }}
+                primary="Dashboard"
+              />
+            </ListItemButton>
+          </ListItem>
+          <Divider variant="middle" style={{ backgroundColor: colors[appCurrentTheme].secondary }} />
+        </div>
+        <div>
+          <ListItem
+            className={location.pathname === '/stacking/myProfile' ? 'active-custom' : ''}
+            onClick={toggleDrawer(anchor, false)}
+            onKeyDown={toggleDrawer(anchor, false)}
+          >
+            <ListItemButton component={Link} to={'/stacking/myProfile'} className="padding-left-sidebar-main-sections">
+              <ListItemIcon>
+                <Home style={{ color: colors[appCurrentTheme].secondary }} />
+              </ListItemIcon>
+              <ListItemText
+                className="navbar-sections-font-size"
+                style={{ color: colors[appCurrentTheme].secondary }}
+                primary="Profile"
+              />
+            </ListItemButton>
+          </ListItem>
+          <Divider variant="middle" style={{ backgroundColor: colors[appCurrentTheme].secondary }} />
+        </div>
+        <div style={{ marginTop: -10 }}>
+          <ListItem
+            className={
+              location.pathname === '/mining/myProfile' ||
+              location.pathname === '/mining/dashboard' ||
+              location.pathname === '/mining/pool/status' ||
+              location.pathname === '/mining/pool/miners' ||
+              location.pathname.slice(0, 8) === '/profile' ||
+              location.pathname === '/mining/voting/joiners' ||
+              location.pathname === '/mining/voting/removals' ||
+              location.pathname === '/mining/voting/notifier' ||
+              location.pathname === '/mining/voting'
+                ? 'active-custom'
+                : ''
+            }
+            // onClick={toggleDrawer(anchor, false)}
+            // onKeyDown={toggleDrawer(anchor, false)}
+          >
+            <ListItemButton>
+              <ListItemIcon>
+                <HomeIcon style={{ color: colors[appCurrentTheme].secondary }} />
+              </ListItemIcon>
+              <ListItemText
+                className="navbar-sections-font-size"
+                style={{ color: colors[appCurrentTheme].secondary }}
+                primary="Mining"
+              />
+            </ListItemButton>
+          </ListItem>
+          <Divider style={{ backgroundColor: colors[appCurrentTheme].secondary }} />
+          <Divider style={{ backgroundColor: colors[appCurrentTheme].secondary }} />
+          {/* <Divider style={{ backgroundColor: colors[appCurrentTheme].secondary }} /> */}
+        </div>
         <div>
           <ListItem
-            className={location.pathname === '/dashboard' ? 'active-custom' : ''}
+            className={location.pathname === '/mining/dashboard' ? 'active-custom' : ''}
             onClick={toggleDrawer(anchor, false)}
             onKeyDown={toggleDrawer(anchor, false)}
           >
-            <ListItemButton component={Link} to={'/dashboard'}>
+            <ListItemButton component={Link} to={'/mining/dashboard'} className="padding-left-sidebar-main-sections">
               <ListItemIcon>
                 <Home style={{ color: colors[appCurrentTheme].secondary }} />
               </ListItemIcon>
@@ -144,11 +241,11 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
         {currentRole !== 'Viewer' && (
           <div>
             <ListItem
-              className={location.pathname === '/myProfile' ? 'active-custom' : ''}
+              className={location.pathname === '/mining/myProfile' ? 'active-custom' : ''}
               onClick={toggleDrawer(anchor, false)}
               onKeyDown={toggleDrawer(anchor, false)}
             >
-              <ListItemButton component={Link} to={'/myProfile'}>
+              <ListItemButton component={Link} to={'/mining/myProfile'} className="padding-left-sidebar-main-sections">
                 <ListItemIcon>
                   <AccountCircleIcon style={{ color: colors[appCurrentTheme].secondary }} />
                 </ListItemIcon>
@@ -166,7 +263,7 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
           <>
             <div>
               <ListItem className="liMenuMiningPool">
-                <ListItemButton onClick={handleClickMiningPoolMenuItem}>
+                <ListItemButton onClick={handleClickMiningPoolMenuItem} className="padding-left-sidebar-main-sections">
                   <ListItemIcon>
                     <Hardware style={{ color: colors[appCurrentTheme].secondary }} />
                   </ListItemIcon>
@@ -190,11 +287,16 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                   unmountOnExit
                 >
                   <List
-                    className={location.pathname === '/miningPool/status' ? 'active-custom' : ''}
+                    className={location.pathname === '/mining/pool/status' ? 'active-custom' : ''}
                     component="div"
                     disablePadding
                   >
-                    <ListItemButton sx={{ pl: 4 }} component={Link} to={'/miningPool/status'}>
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      component={Link}
+                      to={'/mining/pool/status'}
+                      className="padding-left-sidebar-inner-sections"
+                    >
                       <ListItemIcon>
                         <StarBorder style={{ color: colors[appCurrentTheme].secondary }} />
                       </ListItemIcon>
@@ -207,14 +309,19 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                   </List>
                   <List
                     className={
-                      location.pathname === '/miningPool/miners' || location.pathname.slice(0, 8) === '/profile'
+                      location.pathname === '/mining/pool/miners' || location.pathname.slice(0, 8) === '/profile'
                         ? 'active-custom'
                         : ''
                     }
                     component="div"
                     disablePadding
                   >
-                    <ListItemButton sx={{ pl: 4 }} component={Link} to={'/miningPool/miners'}>
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      component={Link}
+                      to={'/mining/pool/miners'}
+                      className="padding-left-sidebar-inner-sections"
+                    >
                       <ListItemIcon>
                         <StarBorder style={{ color: colors[appCurrentTheme].secondary }} />
                       </ListItemIcon>
@@ -231,7 +338,7 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
             </div>
             <div>
               <ListItem className="liMenuMiningPool">
-                <ListItemButton onClick={handleClickVotingMenuItem}>
+                <ListItemButton onClick={handleClickVotingMenuItem} className="padding-left-sidebar-main-sections">
                   <ListItemIcon>
                     <Poll style={{ color: colors[appCurrentTheme].secondary }} />
                   </ListItemIcon>
@@ -255,11 +362,16 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                   unmountOnExit
                 >
                   <List
-                    className={location.pathname === '/voting' ? 'active-custom' : ''}
+                    className={location.pathname === '/mining/voting' ? 'active-custom' : ''}
                     component="div"
                     disablePadding
                   >
-                    <ListItemButton sx={{ pl: 4 }} component={Link} to={'/voting'}>
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      component={Link}
+                      to={'/mining/voting'}
+                      className="padding-left-sidebar-inner-sections"
+                    >
                       <ListItemIcon>
                         <StarBorder style={{ color: colors[appCurrentTheme].secondary }} />
                       </ListItemIcon>
@@ -271,11 +383,16 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                     </ListItemButton>
                   </List>
                   <List
-                    className={location.pathname === '/voting/joiners' ? 'active-custom' : ''}
+                    className={location.pathname === '/mining/voting/joiners' ? 'active-custom' : ''}
                     component="div"
                     disablePadding
                   >
-                    <ListItemButton sx={{ pl: 4 }} component={Link} to={'/voting/joiners'}>
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      component={Link}
+                      to={'/mining/voting/joiners'}
+                      className="padding-left-sidebar-inner-sections"
+                    >
                       <ListItemIcon>
                         <StarBorder style={{ color: colors[appCurrentTheme].secondary }} />
                       </ListItemIcon>
@@ -287,11 +404,16 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                     </ListItemButton>
                   </List>
                   <List
-                    className={location.pathname === '/voting/removals' ? 'active-custom' : ''}
+                    className={location.pathname === '/mining/voting/removals' ? 'active-custom' : ''}
                     component="div"
                     disablePadding
                   >
-                    <ListItemButton sx={{ pl: 4 }} component={Link} to={'/voting/removals'}>
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      component={Link}
+                      to={'/mining/voting/removals'}
+                      className="padding-left-sidebar-inner-sections"
+                    >
                       <ListItemIcon>
                         <StarBorder style={{ color: colors[appCurrentTheme].secondary }} />
                       </ListItemIcon>
@@ -303,11 +425,16 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                     </ListItemButton>
                   </List>
                   <List
-                    className={location.pathname === '/voting/notifier' ? 'active-custom' : ''}
+                    className={location.pathname === '/mining/voting/notifier' ? 'active-custom' : ''}
                     component="div"
                     disablePadding
                   >
-                    <ListItemButton sx={{ pl: 4 }} component={Link} to={'/voting/notifier'}>
+                    <ListItemButton
+                      sx={{ pl: 4 }}
+                      component={Link}
+                      to={'/mining/voting/notifier'}
+                      className="padding-left-sidebar-inner-sections"
+                    >
                       <ListItemIcon>
                         <StarBorder style={{ color: colors[appCurrentTheme].secondary }} />
                       </ListItemIcon>
diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
index efa530f..f18ffe6 100644
--- a/src/components/MainPage.tsx
+++ b/src/components/MainPage.tsx
@@ -11,6 +11,8 @@ import VotingJoiners from './appMenuSections/voting/VotingJoiners';
 import VotingRemovals from './appMenuSections/voting/VotingRemovals';
 import VotingNotifier from './appMenuSections/voting/VotingNotifier';
 import MinerProfileDetails from './appMenuSections/profile/MinerProfileDetails';
+import DashboardStacking from './stacking/dashboard/DashboardStacking';
+import ProfileStacking from './stacking/profile/ProfileStacking';
 
 const MainPage = () => {
   return (
@@ -24,15 +26,17 @@ const MainPage = () => {
       </div>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/dashboard" index element={<Dashboard />} />
-        <Route path="/miningPool/miners" element={<MiningPool />} />
-        <Route path="/voting" element={<Voting />} />
-        <Route path="/myProfile" element={<Profile />} />
-        <Route path="/miningPool/status" element={<MiningPoolStatus />} />
-        <Route path="/voting/joiners" element={<VotingJoiners />} />
-        <Route path="/voting/removals" element={<VotingRemovals />} />
-        <Route path="/voting/notifier" element={<VotingNotifier />} />
+        <Route path="mining/dashboard" index element={<Dashboard />} />
+        <Route path="/mining/pool/miners" element={<MiningPool />} />
+        <Route path="/mining/voting" element={<Voting />} />
+        <Route path="mining/myProfile" element={<Profile />} />
+        <Route path="/mining/pool/status" element={<MiningPoolStatus />} />
+        <Route path="/mining/voting/joiners" element={<VotingJoiners />} />
+        <Route path="/mining/voting/removals" element={<VotingRemovals />} />
+        <Route path="/mining/voting/notifier" element={<VotingNotifier />} />
         <Route path="/profile/:address" element={<MinerProfileDetails />} />
+        <Route path="/stacking/dashboard" element={<DashboardStacking />} />
+        <Route path="/stacking/myProfile" element={<ProfileStacking />} />
         <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </div>
diff --git a/src/components/stacking/dashboard/DashboardStacking.tsx b/src/components/stacking/dashboard/DashboardStacking.tsx
new file mode 100644
index 0000000..58b61fe
--- /dev/null
+++ b/src/components/stacking/dashboard/DashboardStacking.tsx
@@ -0,0 +1,5 @@
+const DashboardStacking = () => {
+  return <div>stacking dashboard</div>;
+};
+
+export default DashboardStacking;
diff --git a/src/components/stacking/profile/ProfileStacking.tsx b/src/components/stacking/profile/ProfileStacking.tsx
new file mode 100644
index 0000000..040c779
--- /dev/null
+++ b/src/components/stacking/profile/ProfileStacking.tsx
@@ -0,0 +1,5 @@
+const ProfileStacking = () => {
+  return <div>stacking profile</div>;
+};
+
+export default ProfileStacking;
diff --git a/src/css/navbars/styles.css b/src/css/navbars/styles.css
index 47bdc48..a6616c4 100644
--- a/src/css/navbars/styles.css
+++ b/src/css/navbars/styles.css
@@ -45,6 +45,14 @@
   display: block !important;
 }
 
+.padding-left-sidebar-main-sections {
+  padding-left: 35px !important;
+}
+
+.padding-left-sidebar-inner-sections {
+  padding-left: 60px !important;
+}
+
 @media screen and (max-width: 575px) {
   .navbar-sections-font-size span {
     font-size: 14px !important;
@@ -53,6 +61,6 @@
 
 @media screen and (min-width: 576px) and (max-width: 991px) {
   .navbar-sections-font-size span {
-    font-size: 18px !important;
+    font-size: 16px !important;
   }
 }