Skip to content

Commit

Permalink
Merge pull request #23 from stacks-degens/rerouting-for-stacking
Browse files Browse the repository at this point in the history 
Rerouting for stacking
  • Loading branch information
@Alexandrescu
Alexandrescu authored Jun 16, 2023
2 parents b1abfbb + f2eec08 commit 672dbec
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 27 deletions.
163 changes: 145 additions & 18 deletions src/components/LeftPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {

const location = useLocation();

console.log('location-', location.pathname.slice(0, 8));

const handleClickMiningPoolMenuItem = () => {
setOpenMiningPoolMenu(!openMiningPoolMenu);
};
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 12 additions & 8 deletions src/components/MainPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/components/stacking/dashboard/DashboardStacking.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const DashboardStacking = () => {
return <div>stacking dashboard</div>;
};

export default DashboardStacking;
5 changes: 5 additions & 0 deletions src/components/stacking/profile/ProfileStacking.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const ProfileStacking = () => {
return <div>stacking profile</div>;
};

export default ProfileStacking;
10 changes: 9 additions & 1 deletion src/css/navbars/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}

0 comments on commit 672dbec

Please sign in to comment.