mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-13 06:21:21 -05:00
1589b84c4b
* side layout initial * add elements to side nav * side buttons links * remove clog * calendar page initial * position sticky working * x trends page initial * new table * same mode selector * mobile friendly table * no underline for nav links * xsearch * x trends page outlined * sr initial * relocate calendar components * calendar fix flex * topnav fancier look * layout looking good edition * relocate xtrends * xtrends remove linecharts * x trends new * calender page new * delete headbanner, new login * remove calendar stuff from api * rename stuff in utils * fix user item margin * new home page initial * remove page concept * no pointer xtrends * remove xrank from app * xtrends service * move fa from app * move plus * maps tweaks * new table for plus history * navigational sidebar flex tweaks * builds page * analyzer * user page * free agents * plans * remove mx * tweaks * change layout to grid * home page finalized * mobile nav * restrict main content width * tweaks style * language switcher * container in css * sticky nav * use duplicate icons for now * change mapsketch width to old * chara tour vid * borzoic icons
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { Box, Flex } from "@chakra-ui/layout";
|
|
import MyLink from "components/common/MyLink";
|
|
import UserAvatar from "components/common/UserAvatar";
|
|
import { useMyTheme, useUser } from "hooks/common";
|
|
import Image from "next/image";
|
|
import { navItems } from "utils/constants";
|
|
|
|
const NavButtons = ({ onButtonClick }: { onButtonClick?: () => void }) => {
|
|
const { bgColor, secondaryBgColor } = useMyTheme();
|
|
const [user] = useUser();
|
|
return (
|
|
<Flex mt={2} flexWrap="wrap" alignItems="center" justifyContent="center">
|
|
{navItems.map(({ code, name }) => {
|
|
return (
|
|
<MyLink key={code} href={"/" + code} isColored={false} noUnderline>
|
|
<Flex
|
|
width="9rem"
|
|
rounded="lg"
|
|
p={1}
|
|
m={2}
|
|
fontSize="sm"
|
|
fontWeight="bold"
|
|
align="center"
|
|
whiteSpace="nowrap"
|
|
bg={secondaryBgColor}
|
|
border="2px solid"
|
|
borderColor={secondaryBgColor}
|
|
_hover={{
|
|
bg: bgColor,
|
|
}}
|
|
onClick={onButtonClick}
|
|
>
|
|
<Image
|
|
src={`/layout/${code}.png`}
|
|
height={32}
|
|
width={32}
|
|
priority
|
|
/>
|
|
<Box ml={2}>{name}</Box>
|
|
</Flex>
|
|
</MyLink>
|
|
);
|
|
})}
|
|
{user && (
|
|
<MyLink href={"/u/" + user.discordId} isColored={false} noUnderline>
|
|
<Flex
|
|
width="9rem"
|
|
rounded="lg"
|
|
p={1}
|
|
m={2}
|
|
fontSize="sm"
|
|
fontWeight="bold"
|
|
align="center"
|
|
whiteSpace="nowrap"
|
|
bg={secondaryBgColor}
|
|
border="2px solid"
|
|
borderColor={secondaryBgColor}
|
|
_hover={{
|
|
bg: bgColor,
|
|
}}
|
|
>
|
|
<UserAvatar user={user} size="sm" />
|
|
<Box ml={2}>My Page</Box>
|
|
</Flex>
|
|
</MyLink>
|
|
)}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default NavButtons;
|