mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
refactor: cleaned up MegaMenu components
This commit is contained in:
dan13ram
committed by
Scott Stevenson
Scott Stevenson
parent
96c3518298
commit
04448573c1
@@ -1,31 +0,0 @@
|
||||
import { MetaButton, Spinner } from '@metafam/ds';
|
||||
import { useMounted, useWeb3 } from 'lib/hooks';
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
export const LoginButton: React.FC = () => {
|
||||
const { connect, connecting } = useWeb3();
|
||||
const mounted = useMounted();
|
||||
|
||||
const handleLoginClick = useCallback(async () => {
|
||||
await connect();
|
||||
}, [connect]);
|
||||
|
||||
if (!mounted || connecting) {
|
||||
return (
|
||||
<Spinner color="purple.500" size="md" my={3} thickness="4px" speed="4s" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MetaButton
|
||||
mx={4}
|
||||
my={3.5}
|
||||
maxWidth={{ sm: '480px' }}
|
||||
size="md"
|
||||
px={8}
|
||||
onClick={handleLoginClick}
|
||||
>
|
||||
Connect Wallet
|
||||
</MetaButton>
|
||||
);
|
||||
};
|
||||
79
packages/web/components/MegaMenu/DesktopMenuItem.tsx
Normal file
79
packages/web/components/MegaMenu/DesktopMenuItem.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { Avatar, Box, Link, MenuItem, Text } from '@metafam/ds';
|
||||
import { Values } from '@metafam/utils';
|
||||
import { menuIcons } from 'utils/menuIcons';
|
||||
|
||||
const ICON_SIZE = 60;
|
||||
|
||||
type MenuItemProps = {
|
||||
title: string;
|
||||
url: string;
|
||||
explainerText: string;
|
||||
icon: Values<Record<string, string>>;
|
||||
iconSize?: number;
|
||||
};
|
||||
|
||||
// Menu links (with icons and explanatory text) -- used in DesktopNavLinks below
|
||||
export const DesktopMenuItem = ({
|
||||
title,
|
||||
url,
|
||||
explainerText,
|
||||
icon,
|
||||
iconSize = ICON_SIZE,
|
||||
}: MenuItemProps) => (
|
||||
<MenuItem
|
||||
color="#FFF"
|
||||
key={title}
|
||||
mb={4}
|
||||
p={0}
|
||||
borderRadius="md"
|
||||
_active={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
_hover={{ bg: '#C8BAFC33' }}
|
||||
>
|
||||
<Link
|
||||
display="flex"
|
||||
className="desktop-menu-item"
|
||||
href={url}
|
||||
width="full"
|
||||
m={1}
|
||||
p="1rem"
|
||||
borderRadius="0.618vmax"
|
||||
_hover={{
|
||||
backgroundColor: 'rgba(0,0,0,0.56)',
|
||||
textDecoration: 'none',
|
||||
transition: '0s',
|
||||
}}
|
||||
transitionTimingFunction="ease-in"
|
||||
transition="0.5s"
|
||||
_focus={{ outline: 'none' }}
|
||||
alignItems="center"
|
||||
>
|
||||
<Avatar
|
||||
alt={title}
|
||||
src={menuIcons[icon]}
|
||||
width={`${iconSize}px`}
|
||||
height={`${iconSize}px`}
|
||||
style={{ padding: '10px', marginRight: '20px' }}
|
||||
bg="linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.36) 100%);"
|
||||
boxShadow="0 0 0 2px rgba(0, 0, 0, 0.08)"
|
||||
sx={{
|
||||
'.desktop-menu-item:hover &': {
|
||||
boxShadow: '0 0 1px 1px rgba(255, 255, 255, 0.1)',
|
||||
bg: 'linear-gradient(180deg, #170B23 0%, #350C58 100%);',
|
||||
transition: '0s',
|
||||
},
|
||||
}}
|
||||
transitionTimingFunction="ease-in"
|
||||
transition="0.3s"
|
||||
/>
|
||||
<Box>
|
||||
<Text color="#FFF" fontSize="xl" fontWeight="bold">
|
||||
{title}
|
||||
</Text>
|
||||
<Text color="#FFF" fontSize="13px">
|
||||
{explainerText}
|
||||
</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
);
|
||||
104
packages/web/components/MegaMenu/DesktopNavLinks.tsx
Normal file
104
packages/web/components/MegaMenu/DesktopNavLinks.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
Flex,
|
||||
Icon,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuList,
|
||||
} from '@metafam/ds';
|
||||
import { DesktopMenuItem } from 'components/MegaMenu/DesktopMenuItem';
|
||||
import React from 'react';
|
||||
import { MenuLinkItem, MenuLinkSet, MenuSectionLinks } from 'utils/menuLinks';
|
||||
|
||||
// Nav links on desktop -- text and links from utils/menuLinks.ts
|
||||
export const DesktopNavLinks = () => (
|
||||
<Flex
|
||||
justifyContent="center"
|
||||
alignContent="center"
|
||||
display={{ base: 'none', lg: 'flex' }}
|
||||
>
|
||||
{MenuSectionLinks.map((section: MenuLinkSet) => (
|
||||
<Menu
|
||||
key={section.label}
|
||||
offset={[0, 0]}
|
||||
preventOverflow
|
||||
flip={false}
|
||||
placement="bottom"
|
||||
>
|
||||
{({ isOpen }) => (
|
||||
<>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
variant="link"
|
||||
minW="fit-content"
|
||||
color="#FFF"
|
||||
fontSize={['md', 'md', 'md', 'lg']}
|
||||
fontWeight={700}
|
||||
textTransform="uppercase"
|
||||
mx={23}
|
||||
_expanded={{ color: 'cyan.300' }}
|
||||
_focus={{ outline: 'none', border: 'none' }}
|
||||
>
|
||||
{section.label}
|
||||
{isOpen ? (
|
||||
<ChevronUpIcon color="#FFF" />
|
||||
) : (
|
||||
<ChevronDownIcon color="#FFF" />
|
||||
)}
|
||||
<Icon
|
||||
position="absolute"
|
||||
left="calc(50% - 1.25rem)"
|
||||
top={14}
|
||||
width={6}
|
||||
borderColor="transparent"
|
||||
h={isOpen ? 'auto' : 0}
|
||||
opacity={isOpen ? 1 : 0}
|
||||
transition="opacity 0.2s"
|
||||
zIndex={2}
|
||||
>
|
||||
<path
|
||||
d="M12 0L24 12C14.6274 12 9.37258 12 0 12L12 0Z"
|
||||
fill="rgba(42, 31, 71, 0.99)"
|
||||
/>
|
||||
</Icon>
|
||||
</MenuButton>
|
||||
{isOpen && (
|
||||
<Box
|
||||
position="absolute"
|
||||
minW="100vw"
|
||||
top="81px"
|
||||
left="calc(100% - 100vw)"
|
||||
mx={0}
|
||||
h="100vh"
|
||||
bg="linear-gradient(rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 96%)"
|
||||
sx={{ filter: 'blur(3rem)' }}
|
||||
zIndex={-2}
|
||||
/>
|
||||
)}
|
||||
<MenuList
|
||||
display="grid"
|
||||
gridTemplateColumns={
|
||||
section.menuItems.length > 3
|
||||
? 'repeat(2, 1fr)'
|
||||
: 'repeat(1, 1fr)'
|
||||
}
|
||||
width={section.menuItems.length > 3 ? '948px' : '474px'}
|
||||
p="2rem"
|
||||
boxShadow="dark-lg"
|
||||
bg="linear-gradient(180deg, rgba(42, 31, 71, 0.9) 6.18%, rgba(17, 3, 32, 0.86) 140%)"
|
||||
borderRadius="0.618vmax"
|
||||
border={0}
|
||||
>
|
||||
{section.menuItems.map((item: MenuLinkItem) => (
|
||||
<DesktopMenuItem {...item} key={item.title} />
|
||||
))}
|
||||
</MenuList>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
73
packages/web/components/MegaMenu/DesktopPlayerStats.tsx
Normal file
73
packages/web/components/MegaMenu/DesktopPlayerStats.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import {
|
||||
Dashboard,
|
||||
Flex,
|
||||
LogOut,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Profile,
|
||||
} from '@metafam/ds';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import { XPSeedsBalance } from 'components/MegaMenu/XPSeedsBalance';
|
||||
import { PlayerAvatar } from 'components/Player/PlayerAvatar';
|
||||
import { Player } from 'graphql/autogen/types';
|
||||
import { useWeb3 } from 'lib/hooks';
|
||||
import React from 'react';
|
||||
import { getPlayerURL } from 'utils/playerHelpers';
|
||||
|
||||
type PlayerStatsProps = {
|
||||
player: Player;
|
||||
};
|
||||
|
||||
export const DesktopPlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
|
||||
const { disconnect } = useWeb3();
|
||||
|
||||
return (
|
||||
<Flex align="center" justifyContent="flex-end">
|
||||
<XPSeedsBalance totalXP={player.totalXP} />
|
||||
<Menu>
|
||||
<MenuButton
|
||||
bg="transparent"
|
||||
aria-label="Options"
|
||||
_focus={{ outline: 'none', bg: 'transparent' }}
|
||||
_hover={{ bg: 'transparent' }}
|
||||
_active={{ bg: 'transparent' }}
|
||||
>
|
||||
<PlayerAvatar
|
||||
{...{ player }}
|
||||
w={14}
|
||||
h={14}
|
||||
ml={4}
|
||||
_hover={{ transform: 'scale(0.9)' }}
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList mt="8px" color="black">
|
||||
<MetaLink
|
||||
color="black"
|
||||
href={getPlayerURL(player) ?? '/'}
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
<MenuItem>
|
||||
<Profile w={4} h={4} mr={4} /> View Profile
|
||||
</MenuItem>
|
||||
</MetaLink>
|
||||
<MetaLink
|
||||
color="black"
|
||||
href={'/dashboard'}
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
<MenuItem>
|
||||
<Dashboard w={4} h={4} mr={4} color="red.500" />
|
||||
Dashboard
|
||||
</MenuItem>
|
||||
</MetaLink>
|
||||
<MenuItem onClick={disconnect}>
|
||||
<LogOut w={4} h={4} mr={4} />
|
||||
Disconnect
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -1,490 +0,0 @@
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
BoxedNextImage as Image,
|
||||
Button,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
CloseIcon,
|
||||
Dashboard,
|
||||
Flex,
|
||||
HamburgerIcon,
|
||||
Icon,
|
||||
Link,
|
||||
LogOut,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
MetaButton,
|
||||
Profile,
|
||||
SimpleGrid,
|
||||
Spinner,
|
||||
Stack,
|
||||
Text,
|
||||
useBreakpointValue,
|
||||
useDisclosure,
|
||||
} from '@metafam/ds';
|
||||
import { Values } from '@metafam/utils';
|
||||
import LogoImage from 'assets/logo.png';
|
||||
import Alliances from 'assets/menuIcon/alliances.svg';
|
||||
import Asketh from 'assets/menuIcon/asketh.svg';
|
||||
import BecomeAPatron from 'assets/menuIcon/becomeapatron.svg';
|
||||
import Contribute from 'assets/menuIcon/contribute.svg';
|
||||
import Discord from 'assets/menuIcon/discord.svg';
|
||||
import Events from 'assets/menuIcon/events.svg';
|
||||
import Forum from 'assets/menuIcon/forum.svg';
|
||||
import Grants from 'assets/menuIcon/grants.svg';
|
||||
import Guilds from 'assets/menuIcon/guilds.svg';
|
||||
import Invest from 'assets/menuIcon/invest.svg';
|
||||
import Learn from 'assets/menuIcon/learn.svg';
|
||||
import MetaGameWiki from 'assets/menuIcon/metagamewiki.svg';
|
||||
import MetaRadio from 'assets/menuIcon/metaradio.svg';
|
||||
import Patrons from 'assets/menuIcon/patrons.svg';
|
||||
import Playbooks from 'assets/menuIcon/playbooks.svg';
|
||||
import Players from 'assets/menuIcon/players.svg';
|
||||
import Quests from 'assets/menuIcon/quests.svg';
|
||||
import Raids from 'assets/menuIcon/raids.svg';
|
||||
import Roles from 'assets/menuIcon/roles.svg';
|
||||
import SeedEarned from 'assets/menuIcon/seedearned.svg';
|
||||
import Seeds from 'assets/menuIcon/seeds.svg';
|
||||
import TheGreatHouses from 'assets/menuIcon/thegreathouses.svg';
|
||||
import WelcomeToMetaGame from 'assets/menuIcon/welcometometagame.svg';
|
||||
import XPEarned from 'assets/menuIcon/xpearned.svg';
|
||||
import Youtube from 'assets/menuIcon/youtube.svg';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import { PlayerAvatar } from 'components/Player/PlayerAvatar';
|
||||
import { Player } from 'graphql/autogen/types';
|
||||
import { useUser, useWeb3 } from 'lib/hooks';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { MenuLinkItem, MenuLinkSet, MenuSectionLinks } from 'utils/menuLinks';
|
||||
import { getPlayerURL } from 'utils/playerHelpers';
|
||||
|
||||
import { XPSeedsBalance } from './XPSeedsBalance';
|
||||
|
||||
const menuIcons: Record<string, string> = {
|
||||
alliances: Alliances,
|
||||
asketh: Asketh,
|
||||
contribute: Contribute,
|
||||
discord: Discord,
|
||||
forum: Forum,
|
||||
grants: Grants,
|
||||
guilds: Guilds,
|
||||
invest: Invest,
|
||||
learn: Learn,
|
||||
metagamewiki: MetaGameWiki,
|
||||
patrons: Patrons,
|
||||
playbooks: Playbooks,
|
||||
players: Players,
|
||||
quests: Quests,
|
||||
raids: Raids,
|
||||
roles: Roles,
|
||||
seedearned: SeedEarned,
|
||||
seeds: Seeds,
|
||||
thegreathouses: TheGreatHouses,
|
||||
welcometometagame: WelcomeToMetaGame,
|
||||
xpearned: XPEarned,
|
||||
youtube: Youtube,
|
||||
metaradio: MetaRadio,
|
||||
events: Events,
|
||||
becomeapatron: BecomeAPatron,
|
||||
} as const;
|
||||
|
||||
const ICON_SIZE = 60;
|
||||
|
||||
type LogoProps = {
|
||||
link: string;
|
||||
iconSize?: number;
|
||||
};
|
||||
|
||||
// Navbar logo
|
||||
const Logo = ({ link }: LogoProps) => {
|
||||
const w = useBreakpointValue({ base: 9, lg: 12 }) ?? 9;
|
||||
const h = useBreakpointValue({ base: 12, lg: 16 }) ?? 12;
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="logo"
|
||||
alignSelf="center"
|
||||
w={{ base: 'fit-content', lg: '20%' }}
|
||||
mt={[0.5, 2]}
|
||||
ml={3}
|
||||
>
|
||||
<MetaLink
|
||||
href={link}
|
||||
_focus={{ outline: 'none', bg: 'transparent' }}
|
||||
_hover={{ bg: 'transparent' }}
|
||||
_active={{ bg: 'transparent' }}
|
||||
>
|
||||
<Image
|
||||
src={LogoImage}
|
||||
{...{ w, h }}
|
||||
transition="0.25s"
|
||||
_hover={{ transform: 'scale(1.1)' }}
|
||||
/>
|
||||
</MetaLink>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
type MenuItemProps = {
|
||||
title: string;
|
||||
url: string;
|
||||
explainerText: string;
|
||||
icon: Values<typeof menuIcons>;
|
||||
iconSize?: number;
|
||||
};
|
||||
// Menu links (with icons and explanatory text) -- used in DesktopNavLinks below
|
||||
const DesktopMenuItem = ({
|
||||
title,
|
||||
url,
|
||||
explainerText,
|
||||
icon,
|
||||
iconSize = ICON_SIZE,
|
||||
}: MenuItemProps) => (
|
||||
<MenuItem
|
||||
color="#FFF"
|
||||
key={title}
|
||||
mb={4}
|
||||
p={0}
|
||||
borderRadius="md"
|
||||
_active={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
_hover={{ bg: '#C8BAFC33' }}
|
||||
>
|
||||
<Link
|
||||
display="flex"
|
||||
className="desktop-menu-item"
|
||||
href={url}
|
||||
width="full"
|
||||
m={1}
|
||||
p="1rem"
|
||||
borderRadius="0.618vmax"
|
||||
_hover={{
|
||||
backgroundColor: 'rgba(0,0,0,0.56)',
|
||||
textDecoration: 'none',
|
||||
transition: '0s',
|
||||
}}
|
||||
transitionTimingFunction="ease-in"
|
||||
transition="0.5s"
|
||||
_focus={{ outline: 'none' }}
|
||||
alignItems="center"
|
||||
>
|
||||
<Avatar
|
||||
alt={title}
|
||||
src={menuIcons[icon]}
|
||||
width={`${iconSize}px`}
|
||||
height={`${iconSize}px`}
|
||||
style={{ padding: '10px', marginRight: '20px' }}
|
||||
bg="linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.36) 100%);"
|
||||
boxShadow="0 0 0 2px rgba(0, 0, 0, 0.08)"
|
||||
sx={{
|
||||
'.desktop-menu-item:hover &': {
|
||||
boxShadow: '0 0 1px 1px rgba(255, 255, 255, 0.1)',
|
||||
bg: 'linear-gradient(180deg, #170B23 0%, #350C58 100%);',
|
||||
transition: '0s',
|
||||
},
|
||||
}}
|
||||
transitionTimingFunction="ease-in"
|
||||
transition="0.3s"
|
||||
/>
|
||||
<Box>
|
||||
<Text color="#FFF" fontSize="xl" fontWeight="bold">
|
||||
{title}
|
||||
</Text>
|
||||
<Text color="#FFF" fontSize="13px">
|
||||
{explainerText}
|
||||
</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
);
|
||||
|
||||
// Nav links on desktop -- text and links from utils/menuLinks.ts
|
||||
const DesktopNavLinks = () => (
|
||||
<Flex
|
||||
justifyContent="center"
|
||||
alignContent="center"
|
||||
display={{ base: 'none', lg: 'flex' }}
|
||||
>
|
||||
{MenuSectionLinks.map((section: MenuLinkSet) => (
|
||||
<Menu
|
||||
key={section.label}
|
||||
offset={[0, 0]}
|
||||
preventOverflow
|
||||
flip={false}
|
||||
placement="bottom"
|
||||
>
|
||||
{({ isOpen }) => (
|
||||
<>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
variant="link"
|
||||
minW="fit-content"
|
||||
color="#FFF"
|
||||
fontSize={['md', 'md', 'md', 'lg']}
|
||||
fontWeight={700}
|
||||
textTransform="uppercase"
|
||||
mx={23}
|
||||
_expanded={{ color: 'cyan.300' }}
|
||||
_focus={{ outline: 'none', border: 'none' }}
|
||||
>
|
||||
{section.label}
|
||||
{isOpen ? (
|
||||
<ChevronUpIcon color="#FFF" />
|
||||
) : (
|
||||
<ChevronDownIcon color="#FFF" />
|
||||
)}
|
||||
<Icon
|
||||
position="absolute"
|
||||
left="calc(50% - 1.25rem)"
|
||||
top={14}
|
||||
width={6}
|
||||
borderColor="transparent"
|
||||
h={isOpen ? 'auto' : 0}
|
||||
opacity={isOpen ? 1 : 0}
|
||||
transition="opacity 0.2s"
|
||||
zIndex={2}
|
||||
>
|
||||
<path
|
||||
d="M12 0L24 12C14.6274 12 9.37258 12 0 12L12 0Z"
|
||||
fill="rgba(42, 31, 71, 0.99)"
|
||||
/>
|
||||
</Icon>
|
||||
</MenuButton>
|
||||
{isOpen && (
|
||||
<Box
|
||||
position="absolute"
|
||||
minW="100vw"
|
||||
top="81px"
|
||||
left="calc(100% - 100vw)"
|
||||
mx={0}
|
||||
h="100vh"
|
||||
bg="linear-gradient(rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 96%)"
|
||||
sx={{ filter: 'blur(3rem)' }}
|
||||
zIndex={-2}
|
||||
/>
|
||||
)}
|
||||
<MenuList
|
||||
display="grid"
|
||||
gridTemplateColumns={
|
||||
section.menuItems.length > 3
|
||||
? 'repeat(2, 1fr)'
|
||||
: 'repeat(1, 1fr)'
|
||||
}
|
||||
width={section.menuItems.length > 3 ? '948px' : '474px'}
|
||||
p="2rem"
|
||||
boxShadow="dark-lg"
|
||||
bg="linear-gradient(180deg, rgba(42, 31, 71, 0.9) 6.18%, rgba(17, 3, 32, 0.86) 140%)"
|
||||
borderRadius="0.618vmax"
|
||||
border={0}
|
||||
>
|
||||
{section.menuItems.map((item: MenuLinkItem) => (
|
||||
<DesktopMenuItem {...item} key={item.title} />
|
||||
))}
|
||||
</MenuList>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
type PlayerStatsProps = {
|
||||
player: Player;
|
||||
};
|
||||
// Display player XP and Seed
|
||||
const PlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
|
||||
const { disconnect } = useWeb3();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
display={{ base: 'none', lg: 'flex' }}
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<XPSeedsBalance totalXP={player.totalXP} />
|
||||
<Menu>
|
||||
<MenuButton
|
||||
bg="transparent"
|
||||
aria-label="Options"
|
||||
_focus={{ outline: 'none', bg: 'transparent' }}
|
||||
_hover={{ bg: 'transparent' }}
|
||||
_active={{ bg: 'transparent' }}
|
||||
>
|
||||
<PlayerAvatar
|
||||
{...{ player }}
|
||||
w={14}
|
||||
h={14}
|
||||
ml={4}
|
||||
_hover={{ transform: 'scale(0.9)' }}
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList mt="8px" color="black">
|
||||
<MetaLink
|
||||
color="black"
|
||||
href={getPlayerURL(player) ?? '/'}
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
<MenuItem>
|
||||
<Profile w={4} h={4} mr={4} /> View Profile
|
||||
</MenuItem>
|
||||
</MetaLink>
|
||||
<MetaLink
|
||||
color="black"
|
||||
href={'/dashboard'}
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
<MenuItem>
|
||||
<Dashboard w={4} h={4} mr={4} color="red.500" />
|
||||
Dashboard
|
||||
</MenuItem>
|
||||
</MetaLink>
|
||||
<MenuItem onClick={disconnect}>
|
||||
<LogOut w={4} h={4} mr={4} />
|
||||
Disconnect
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const MegaMenu: React.FC = () => {
|
||||
const { connected, connect, connecting } = useWeb3();
|
||||
const router = useRouter();
|
||||
const { user, fetching } = useUser();
|
||||
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const menuToggle = () => (isOpen ? onClose() : onOpen());
|
||||
|
||||
return (
|
||||
<Stack
|
||||
position={
|
||||
router.pathname === '/community/players' ? 'relative' : 'sticky'
|
||||
}
|
||||
top={0}
|
||||
id="MegaMenu"
|
||||
zIndex={11}
|
||||
>
|
||||
<Flex
|
||||
borderBottom="1px"
|
||||
bg="rgba(0,0,0,0.5)"
|
||||
borderColor="#2B2244"
|
||||
sx={{ backdropFilter: 'blur(10px)' }}
|
||||
px={4}
|
||||
py={1.5}
|
||||
h={20}
|
||||
>
|
||||
<Flex
|
||||
onClick={menuToggle}
|
||||
flexWrap="nowrap"
|
||||
alignItems="center"
|
||||
cursor="pointer"
|
||||
h="2rem"
|
||||
w="2rem"
|
||||
display={{ base: 'flex', lg: 'none' }}
|
||||
p={2}
|
||||
my="auto"
|
||||
grow={1}
|
||||
>
|
||||
{isOpen ? (
|
||||
<CloseIcon fontSize="1.5rem" color="#FFF" ml={2} />
|
||||
) : (
|
||||
<HamburgerIcon fontSize="2rem" color="#FFF" ml={2} />
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
w={{ base: 'fit-content', lg: '100%' }}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Logo link={user ? '/dashboard' : '/'} />
|
||||
<DesktopNavLinks />
|
||||
{/* <Search /> */}
|
||||
<Box
|
||||
w="20%"
|
||||
alignSelf="center"
|
||||
textAlign="right"
|
||||
display={{ base: 'none', lg: 'block' }}
|
||||
>
|
||||
{(() => {
|
||||
if (connecting || fetching) {
|
||||
return (
|
||||
<Spinner
|
||||
mr={8}
|
||||
thickness="3px"
|
||||
speed="1s"
|
||||
size="lg"
|
||||
title="Connecting…"
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (connected && !!user) {
|
||||
return <PlayerStats player={user} />;
|
||||
}
|
||||
return (
|
||||
<MetaButton h={10} px={6} ml={150} onClick={connect}>
|
||||
Connect
|
||||
</MetaButton>
|
||||
);
|
||||
})()}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Stack
|
||||
display={{ base: isOpen ? 'block' : 'none', xl: 'none' }}
|
||||
position="fixed"
|
||||
top="4.5rem"
|
||||
zIndex={1}
|
||||
overflowX="hidden"
|
||||
w="100vw"
|
||||
bg="rgba(0, 0, 0, 0.8)"
|
||||
h="calc(100vh - 10rem)"
|
||||
sx={{ backdropFilter: 'blur(10px)' }}
|
||||
p="1rem"
|
||||
border="none"
|
||||
>
|
||||
{MenuSectionLinks.map((section) => (
|
||||
<Stack pt={1} key={section.label}>
|
||||
<Text fontSize={18} fontWeight={600} textTransform="capitalize">
|
||||
{section.label}
|
||||
</Text>
|
||||
<SimpleGrid columns={2}>
|
||||
{section.menuItems.map(({ title, icon, url }) => (
|
||||
<Link
|
||||
key={title}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
href={url}
|
||||
border="1px"
|
||||
_odd={{ marginRight: '-1px' }}
|
||||
marginBottom="-1px"
|
||||
borderColor="purple.400"
|
||||
bg="rgba(0, 0, 0, 0.35)"
|
||||
px={2}
|
||||
py={1.5}
|
||||
_hover={{
|
||||
bg: 'rgba(255, 255, 255, 0.1)',
|
||||
}}
|
||||
isExternal={/^https?:\/\//.test(url)}
|
||||
>
|
||||
<Avatar
|
||||
name={title}
|
||||
src={menuIcons[icon]}
|
||||
p={0}
|
||||
w={7}
|
||||
h={7}
|
||||
mr={1}
|
||||
bg="linear-gradient(180deg, #170B23 0%, #350C58 100%)"
|
||||
/>
|
||||
<Text fontSize={20}>{title}</Text>
|
||||
</Link>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -7,23 +7,21 @@ import {
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
MetaButton,
|
||||
Profile,
|
||||
Stack,
|
||||
Text,
|
||||
} from '@metafam/ds';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import { LoginButton } from 'components/LoginButton';
|
||||
import { XPSeedsBalance } from 'components/MegaMenu/XPSeedsBalance';
|
||||
import { PlayerAvatar } from 'components/Player/PlayerAvatar';
|
||||
import { useUser, useWeb3 } from 'lib/hooks';
|
||||
import React from 'react';
|
||||
import { getPlayerName, getPlayerURL } from 'utils/playerHelpers';
|
||||
|
||||
import { XPSeedsBalance } from './XPSeedsBalance';
|
||||
|
||||
// Display player XP and Seed
|
||||
export const PlayerStatsBar = () => {
|
||||
const { disconnect } = useWeb3();
|
||||
const { user } = useUser();
|
||||
export const MegaMenuFooter = () => {
|
||||
const { connected, connect, connecting, disconnect } = useWeb3();
|
||||
const { user, fetching } = useUser();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
@@ -40,9 +38,7 @@ export const PlayerStatsBar = () => {
|
||||
px="1rem"
|
||||
sx={{ backdropFilter: 'blur(10px)' }}
|
||||
>
|
||||
{!user ? (
|
||||
<LoginButton />
|
||||
) : (
|
||||
{connected && !!user && !fetching && !connecting ? (
|
||||
<>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
@@ -102,6 +98,16 @@ export const PlayerStatsBar = () => {
|
||||
<XPSeedsBalance totalXP={user.totalXP} mobile />
|
||||
</HStack>
|
||||
</>
|
||||
) : (
|
||||
<MetaButton
|
||||
mx={4}
|
||||
my={3.5}
|
||||
px={8}
|
||||
onClick={connect}
|
||||
isLoading={connecting || fetching}
|
||||
>
|
||||
Connect Wallet
|
||||
</MetaButton>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
188
packages/web/components/MegaMenu/MegaMenuHeader.tsx
Normal file
188
packages/web/components/MegaMenu/MegaMenuHeader.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
BoxedNextImage as Image,
|
||||
CloseIcon,
|
||||
Flex,
|
||||
HamburgerIcon,
|
||||
Link,
|
||||
MetaButton,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
useBreakpointValue,
|
||||
useDisclosure,
|
||||
} from '@metafam/ds';
|
||||
import LogoImage from 'assets/logo.png';
|
||||
import { MetaLink } from 'components/Link';
|
||||
import { DesktopNavLinks } from 'components/MegaMenu/DesktopNavLinks';
|
||||
import { DesktopPlayerStats } from 'components/MegaMenu/DesktopPlayerStats';
|
||||
import { useUser, useWeb3 } from 'lib/hooks';
|
||||
import { useRouter } from 'next/router';
|
||||
import React from 'react';
|
||||
import { menuIcons } from 'utils/menuIcons';
|
||||
import { MenuSectionLinks } from 'utils/menuLinks';
|
||||
|
||||
type LogoProps = {
|
||||
link: string;
|
||||
iconSize?: number;
|
||||
};
|
||||
|
||||
// Navbar logo
|
||||
const Logo = ({ link }: LogoProps) => {
|
||||
const w = useBreakpointValue({ base: 9, lg: 12 }) ?? 9;
|
||||
const h = useBreakpointValue({ base: 12, lg: 16 }) ?? 12;
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="logo"
|
||||
alignSelf="center"
|
||||
w={{ base: 'fit-content', lg: '20%' }}
|
||||
mt={[0.5, 2]}
|
||||
ml={3}
|
||||
>
|
||||
<MetaLink
|
||||
href={link}
|
||||
_focus={{ outline: 'none', bg: 'transparent' }}
|
||||
_hover={{ bg: 'transparent' }}
|
||||
_active={{ bg: 'transparent' }}
|
||||
>
|
||||
<Image
|
||||
src={LogoImage}
|
||||
{...{ w, h }}
|
||||
transition="0.25s"
|
||||
_hover={{ transform: 'scale(1.1)' }}
|
||||
/>
|
||||
</MetaLink>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const MegaMenuHeader: React.FC = () => {
|
||||
const { connected, connect, connecting } = useWeb3();
|
||||
const router = useRouter();
|
||||
const { user, fetching } = useUser();
|
||||
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const menuToggle = () => (isOpen ? onClose() : onOpen());
|
||||
|
||||
return (
|
||||
<Stack
|
||||
position={
|
||||
router.pathname === '/community/players' ? 'relative' : 'sticky'
|
||||
}
|
||||
top={0}
|
||||
id="MegaMenu"
|
||||
zIndex={11}
|
||||
>
|
||||
<Flex
|
||||
borderBottom="1px"
|
||||
bg="rgba(0,0,0,0.5)"
|
||||
borderColor="#2B2244"
|
||||
sx={{ backdropFilter: 'blur(10px)' }}
|
||||
px={4}
|
||||
py={1.5}
|
||||
h={20}
|
||||
>
|
||||
<Flex
|
||||
onClick={menuToggle}
|
||||
flexWrap="nowrap"
|
||||
alignItems="center"
|
||||
cursor="pointer"
|
||||
h="2rem"
|
||||
w="2rem"
|
||||
display={{ base: 'flex', lg: 'none' }}
|
||||
p={2}
|
||||
my="auto"
|
||||
grow={1}
|
||||
>
|
||||
{isOpen ? (
|
||||
<CloseIcon fontSize="1.5rem" color="#FFF" ml={2} />
|
||||
) : (
|
||||
<HamburgerIcon fontSize="2rem" color="#FFF" ml={2} />
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
w={{ base: 'fit-content', lg: '100%' }}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Logo link={user ? '/dashboard' : '/'} />
|
||||
<DesktopNavLinks />
|
||||
{/* <Search /> */}
|
||||
<Box
|
||||
w="20%"
|
||||
alignSelf="center"
|
||||
textAlign="right"
|
||||
display={{ base: 'none', lg: 'block' }}
|
||||
>
|
||||
{connected && !!user && !fetching && !connecting ? (
|
||||
<DesktopPlayerStats player={user} />
|
||||
) : (
|
||||
<MetaButton
|
||||
h={10}
|
||||
px={6}
|
||||
onClick={connect}
|
||||
isLoading={connecting || fetching}
|
||||
>
|
||||
Connect
|
||||
</MetaButton>
|
||||
)}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Stack
|
||||
display={{ base: isOpen ? 'block' : 'none', xl: 'none' }}
|
||||
position="fixed"
|
||||
top="4.5rem"
|
||||
zIndex={1}
|
||||
overflowX="hidden"
|
||||
w="100vw"
|
||||
bg="rgba(0, 0, 0, 0.8)"
|
||||
h="calc(100vh - 10rem)"
|
||||
sx={{ backdropFilter: 'blur(10px)' }}
|
||||
p="1rem"
|
||||
border="none"
|
||||
>
|
||||
{MenuSectionLinks.map((section) => (
|
||||
<Stack pt={1} key={section.label}>
|
||||
<Text fontSize={18} fontWeight={600} textTransform="capitalize">
|
||||
{section.label}
|
||||
</Text>
|
||||
<SimpleGrid columns={2}>
|
||||
{section.menuItems.map(({ title, icon, url }) => (
|
||||
<Link
|
||||
key={title}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
href={url}
|
||||
border="1px"
|
||||
_odd={{ marginRight: '-1px' }}
|
||||
marginBottom="-1px"
|
||||
borderColor="purple.400"
|
||||
bg="rgba(0, 0, 0, 0.35)"
|
||||
px={2}
|
||||
py={1.5}
|
||||
_hover={{
|
||||
bg: 'rgba(255, 255, 255, 0.1)',
|
||||
}}
|
||||
isExternal={/^https?:\/\//.test(url)}
|
||||
>
|
||||
<Avatar
|
||||
name={title}
|
||||
src={menuIcons[icon]}
|
||||
p={0}
|
||||
w={7}
|
||||
h={7}
|
||||
mr={1}
|
||||
bg="linear-gradient(180deg, #170B23 0%, #350C58 100%)"
|
||||
/>
|
||||
<Text fontSize={20}>{title}</Text>
|
||||
</Link>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Stack } from '@metafam/ds';
|
||||
import BackgroundImage from 'assets/main-background.jpg';
|
||||
import { MegaMenu as MegaMenuHeader } from 'components/MegaMenu/MegaMenu';
|
||||
import { PlayerStatsBar as MegaMenuFooter } from 'components/MegaMenu/PlayerStatsBar';
|
||||
import { MegaMenuFooter } from 'components/MegaMenu/MegaMenuFooter';
|
||||
import { MegaMenuHeader } from 'components/MegaMenu/MegaMenuHeader';
|
||||
|
||||
type Props = { hide?: boolean };
|
||||
|
||||
|
||||
53
packages/web/utils/menuIcons.ts
Normal file
53
packages/web/utils/menuIcons.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import Alliances from 'assets/menuIcon/alliances.svg';
|
||||
import Asketh from 'assets/menuIcon/asketh.svg';
|
||||
import BecomeAPatron from 'assets/menuIcon/becomeapatron.svg';
|
||||
import Contribute from 'assets/menuIcon/contribute.svg';
|
||||
import Discord from 'assets/menuIcon/discord.svg';
|
||||
import Events from 'assets/menuIcon/events.svg';
|
||||
import Forum from 'assets/menuIcon/forum.svg';
|
||||
import Grants from 'assets/menuIcon/grants.svg';
|
||||
import Guilds from 'assets/menuIcon/guilds.svg';
|
||||
import Invest from 'assets/menuIcon/invest.svg';
|
||||
import Learn from 'assets/menuIcon/learn.svg';
|
||||
import MetaGameWiki from 'assets/menuIcon/metagamewiki.svg';
|
||||
import MetaRadio from 'assets/menuIcon/metaradio.svg';
|
||||
import Patrons from 'assets/menuIcon/patrons.svg';
|
||||
import Playbooks from 'assets/menuIcon/playbooks.svg';
|
||||
import Players from 'assets/menuIcon/players.svg';
|
||||
import Quests from 'assets/menuIcon/quests.svg';
|
||||
import Raids from 'assets/menuIcon/raids.svg';
|
||||
import Roles from 'assets/menuIcon/roles.svg';
|
||||
import SeedEarned from 'assets/menuIcon/seedearned.svg';
|
||||
import Seeds from 'assets/menuIcon/seeds.svg';
|
||||
import TheGreatHouses from 'assets/menuIcon/thegreathouses.svg';
|
||||
import WelcomeToMetaGame from 'assets/menuIcon/welcometometagame.svg';
|
||||
import XPEarned from 'assets/menuIcon/xpearned.svg';
|
||||
import Youtube from 'assets/menuIcon/youtube.svg';
|
||||
|
||||
export const menuIcons: Record<string, string> = {
|
||||
alliances: Alliances,
|
||||
asketh: Asketh,
|
||||
contribute: Contribute,
|
||||
discord: Discord,
|
||||
forum: Forum,
|
||||
grants: Grants,
|
||||
guilds: Guilds,
|
||||
invest: Invest,
|
||||
learn: Learn,
|
||||
metagamewiki: MetaGameWiki,
|
||||
patrons: Patrons,
|
||||
playbooks: Playbooks,
|
||||
players: Players,
|
||||
quests: Quests,
|
||||
raids: Raids,
|
||||
roles: Roles,
|
||||
seedearned: SeedEarned,
|
||||
seeds: Seeds,
|
||||
thegreathouses: TheGreatHouses,
|
||||
welcometometagame: WelcomeToMetaGame,
|
||||
xpearned: XPEarned,
|
||||
youtube: Youtube,
|
||||
metaradio: MetaRadio,
|
||||
events: Events,
|
||||
becomeapatron: BecomeAPatron,
|
||||
} as const;
|
||||
Reference in New Issue
Block a user