Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add mobile menu #5306

Merged
merged 2 commits into from
Jan 2, 2025
Merged

Add mobile menu #5306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ba3f39
add mobile menu
fmtabbara Jan 2, 2025
fb0c462
fix unstake on delegations with no bond details
fmtabbara Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 2 additions & 25 deletions explorer-nextjs/src/components/header/DesktopHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,7 @@ import { Wrapper } from "@/components/wrapper";
import { Box, Divider } from "@mui/material";
import ConnectWallet from "../wallet/ConnectWallet";
import HeaderItem from "./HeaderItem";

export type MenuItem = {
id: number;
title: string;
url: string;
};

const DUMMY_MENU_DATA: MenuItem[] = [
{
id: 1,
title: "Explorer",
url: "/explorer",
},
{
id: 2,
title: "Stake",
url: "/stake",
},
{
id: 3,
title: "Onboarding",
url: "/onboarding",
},
];
import MENU_DATA from "./menuItems";

export const DesktopHeader = () => {
return (
Expand Down Expand Up @@ -68,7 +45,7 @@ export const DesktopHeader = () => {
gap: 5,
}}
>
{DUMMY_MENU_DATA.map((menu) => (
{MENU_DATA.map((menu) => (
<HeaderItem key={menu.id} menu={menu} />
))}
</Box>
Expand Down
3 changes: 2 additions & 1 deletion explorer-nextjs/src/components/header/HeaderItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { Circle } from "@mui/icons-material";
import { Button, Stack } from "@mui/material";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { MenuItem } from "./DesktopHeader";
import type { MenuItem } from "./menuItems";

type HeaderItemProps = {
menu: MenuItem;
};

const HeaderItem = ({ menu }: HeaderItemProps) => {
const pathname = usePathname();
return (
Expand Down
151 changes: 151 additions & 0 deletions explorer-nextjs/src/components/header/MobileHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
"use client";
import { Link } from "@/components/muiLink";
import { Wrapper } from "@/components/wrapper";
import { Close as CloseIcon, Menu as MenuIcon } from "@mui/icons-material";
import { Box, Drawer, IconButton, Typography } from "@mui/material";
import { useState } from "react";
import NymLogo from "../icons/NymLogo";
import MENU_DATA from "./menuItems";

export const MobileHeader = () => {
const [drawerOpen, setDrawerOpen] = useState(false);

// Mobile menu handlers
const toggleDrawer = (open: boolean) => {
setDrawerOpen(open);
};

return (
<>
<Box sx={{ display: { xs: "block", lg: "none" } }}>
<MobileMenuHeader toggleDrawer={toggleDrawer} drawerOpen={drawerOpen} />
<Drawer
anchor="left"
open={drawerOpen}
onClose={() => toggleDrawer(false)}
sx={{
display: { xs: "block", lg: "none" },
}}
PaperProps={{
sx: {
width: "100%",
height: "100%",
bgcolor: "base.white",
overflow: "hidden",
position: "relative",
color: "background.main",
},
}}
>
<MobileMenuHeader
toggleDrawer={toggleDrawer}
drawerOpen={drawerOpen}
/>
{/* Sliding Animation */}
<Box
sx={{
display: "flex",
width: "200%",
height: "100%",
transition: "transform 0.3s ease-in-out",
position: "relative",
transform: "translateX(0%)",
}}
>
{/* Main Menu */}
<Box sx={{ width: "50%", height: "100%" }}>
{MENU_DATA.map((menu) => (
<Box key={menu.title} sx={{ marginBottom: 3 }}>
<Link
onClick={() => toggleDrawer(false)}
href={menu.url || ""}
target={menu?.url?.startsWith("http") ? "_blank" : "_self"}
sx={{
display: "flex",
width: "100%",
padding: 3.75,
color: "background.main",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: 1.25,
}}
>
<Box
sx={{
display: "block",
width: "10px",
height: "10px",
borderRadius: "100%",
bgcolor: "primary.main",
}}
/>
<Typography color="primary" variant="h4">
{menu.title}
</Typography>
</Box>
</Link>
</Box>
))}
</Box>
</Box>
</Drawer>
</Box>
</>
);
};

const MobileMenuHeader = ({
toggleDrawer,
drawerOpen,
}: {
toggleDrawer: (open: boolean) => void;
drawerOpen: boolean;
}) => {
return (
<Wrapper
sx={{
backgroundColor: "background.default",
}}
>
<Box
sx={{
height: "115px",
alignItems: "center",
display: "flex",
justifyContent: "space-between",
}}
>
<Link
onClick={() => toggleDrawer(false)}
href={"/"}
style={{
display: "flex",
alignItems: "center",
width: "100px",
aspectRatio: "89/25",
}}
>
<NymLogo />
</Link>
<Box
sx={{
display: "flex",
gap: 2.5,
alignItems: "center",
}}
>
<IconButton sx={{}} onClick={() => toggleDrawer(!drawerOpen)}>
{drawerOpen ? <CloseIcon /> : <MenuIcon />}
</IconButton>
</Box>
</Box>
</Wrapper>
);
};
2 changes: 2 additions & 0 deletions explorer-nextjs/src/components/header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { DesktopHeader } from "./DesktopHeader";
import { MobileHeader } from "./MobileHeader";

export const Header = async () => {
return (
<header>
<DesktopHeader />
<MobileHeader />
{/* Mobile header will go here */}
</header>
);
Expand Down
25 changes: 25 additions & 0 deletions explorer-nextjs/src/components/header/menuItems.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export type MenuItem = {
id: number;
title: string;
url: string;
};

const MENU_DATA: MenuItem[] = [
{
id: 1,
title: "Explorer",
url: "/explorer",
},
{
id: 2,
title: "Stake",
url: "/stake",
},
{
id: 3,
title: "Onboarding",
url: "/onboarding",
},
];

export default MENU_DATA;
4 changes: 2 additions & 2 deletions explorer-nextjs/src/components/staking/StakeActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MoreVert } from "@mui/icons-material";
import { IconButton, Menu, MenuItem } from "@mui/material";
import { IconButton, Menu, MenuItem, Typography } from "@mui/material";
import { useState } from "react";

type StakeAction = "unstake";
Expand Down Expand Up @@ -72,7 +72,7 @@ const StakeAction = ({
onSelect();
}}
>
{actionName}
<Typography variant="h5">{actionName}</Typography>
</MenuItem>
);
};
Expand Down
9 changes: 3 additions & 6 deletions explorer-nextjs/src/components/staking/StakeTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
Cell: ({ row }) => (
<Stack spacing={1}>
<Typography variant="body4">
{row.original.node?.bondInformation.node_id || "-"}
{row.original.delegation?.node_id || "-"}
</Typography>
<Typography variant="body5">
{row.original.node?.bondInformation.node.identity_key || "-"}
Expand Down Expand Up @@ -215,12 +215,9 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
Header: <ColumnHeading>Action</ColumnHeading>,
Cell: ({ row }) => (
<StakeActions
nodeId={row.original.node?.bondInformation.node_id}
nodeId={row.original.delegation?.node_id}
onActionSelect={(action) => {
handleActionSelect(
action,
row.original.node?.bondInformation.node_id,
);
handleActionSelect(action, row.original.delegation?.node_id);
}}
/>
),
Expand Down
5 changes: 4 additions & 1 deletion explorer-nextjs/src/components/staking/SubHeaderRowActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { useNymClient } from "@/hooks/useNymClient";
import { Button, Stack } from "@mui/material";
import { Link } from "../muiLink";

const SubHeaderRowActions = () => {
const { address } = useNymClient();
Expand All @@ -13,7 +14,9 @@ const SubHeaderRowActions = () => {
return (
<Stack direction="row" spacing={3} justifyContent={"end"}>
<Button variant="outlined">Redeem all rewards</Button>
<Button variant="contained">Stake NYM</Button>
<Link href="/explorer">
<Button variant="contained">Stake NYM</Button>
</Link>
</Stack>
);
};
Expand Down
Loading