kopia lustrzana https://github.com/bugout-dev/moonstream
Merge branch 'changing-menu' of https://github.com/bugout-dev/moonstream into mobile-menu
commit
9cef6bc9dc
|
@ -6,7 +6,6 @@ import {
|
|||
MenuList,
|
||||
MenuItem,
|
||||
MenuGroup,
|
||||
MenuDivider,
|
||||
IconButton,
|
||||
chakra,
|
||||
Portal,
|
||||
|
@ -33,20 +32,24 @@ const AccountIconButton = (props) => {
|
|||
/>
|
||||
<Portal>
|
||||
<MenuList
|
||||
zIndex="dropdown"
|
||||
width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
|
||||
borderRadius={0}
|
||||
color="black"
|
||||
zIndex={100}
|
||||
bg="#1A1D22"
|
||||
w="auto"
|
||||
minW="auto"
|
||||
borderRadius="10px"
|
||||
p="20px 20px 10px 20px"
|
||||
border="1px solid white"
|
||||
>
|
||||
<MenuGroup>
|
||||
<RouterLink href="/account/security" passHref>
|
||||
<MenuItem>Security</MenuItem>
|
||||
<div className="desktop-menu-item">Security</div>
|
||||
</RouterLink>
|
||||
<RouterLink href="/account/tokens" passHref>
|
||||
<MenuItem>API tokens</MenuItem>
|
||||
<div className="desktop-menu-item" title="API tokens">
|
||||
API tokens
|
||||
</div>
|
||||
</RouterLink>
|
||||
</MenuGroup>
|
||||
<MenuDivider />
|
||||
{ui.isMobileView &&
|
||||
SITEMAP.map((item, idx) => {
|
||||
if (item.type !== PAGETYPE.FOOTER_CATEGORY && item.children) {
|
||||
|
@ -54,7 +57,22 @@ const AccountIconButton = (props) => {
|
|||
<MenuGroup key={`AccountIconButton-MenuGroup-${idx}`}>
|
||||
{item.children.map((child, idx) => {
|
||||
return (
|
||||
<MenuItem key={`AccountIconButton-SITEMAP-${idx}`}>
|
||||
<MenuItem
|
||||
key={`AccountIconButton-SITEMAP-${idx}`}
|
||||
m={0}
|
||||
color="white"
|
||||
fontWeight="400"
|
||||
fontSize="16px"
|
||||
px="0px"
|
||||
mb="10px"
|
||||
h="22px"
|
||||
_hover={{
|
||||
backgroundColor: "#1A1D22",
|
||||
color: "#F56646",
|
||||
fontWeight: "700",
|
||||
}}
|
||||
_focus={{ backgroundColor: "#1A1D22" }}
|
||||
>
|
||||
<RouterLink href={child.path}>
|
||||
{child.title}
|
||||
</RouterLink>
|
||||
|
@ -65,14 +83,14 @@ const AccountIconButton = (props) => {
|
|||
);
|
||||
}
|
||||
})}
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
<div
|
||||
className="desktop-menu-item"
|
||||
onClick={() => {
|
||||
logout();
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuList>
|
||||
</Portal>
|
||||
</Menu>
|
||||
|
|
|
@ -107,7 +107,7 @@ const AppNavbar = () => {
|
|||
<>
|
||||
{!ui.isMobileView && (
|
||||
<>
|
||||
<Flex px={2}>
|
||||
<Flex px={2} minH="72px" maxH="72px" alignItems="center">
|
||||
<RouterLink href="/" passHref>
|
||||
<Image
|
||||
w="160px"
|
||||
|
@ -120,7 +120,7 @@ const AppNavbar = () => {
|
|||
/>
|
||||
</RouterLink>
|
||||
<Spacer />
|
||||
<Flex placeSelf="flex-end">
|
||||
<Flex h="100%" alignItems="center">
|
||||
<ButtonGroup variant="link" spacing={4}>
|
||||
{SITEMAP.map((item, idx) => {
|
||||
if (
|
||||
|
|
|
@ -12,6 +12,8 @@ import {
|
|||
MenuList,
|
||||
MenuItem,
|
||||
Portal,
|
||||
Box,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import { ChevronDownIcon } from "@chakra-ui/icons";
|
||||
import useModals from "../core/hooks/useModals";
|
||||
|
@ -61,6 +63,7 @@ const LandingNavbar = () => {
|
|||
variant="link"
|
||||
href={item.path}
|
||||
color="black"
|
||||
fontSize="16px"
|
||||
isActive={!!(router.pathname === item.path)}
|
||||
>
|
||||
{item.title}
|
||||
|
@ -72,6 +75,7 @@ const LandingNavbar = () => {
|
|||
as={Button}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
color="white"
|
||||
fontSize="16px"
|
||||
_expanded={{ color: "white" }}
|
||||
>
|
||||
{item.title}
|
||||
|
@ -99,6 +103,7 @@ const LandingNavbar = () => {
|
|||
m={0}
|
||||
color="white"
|
||||
fontWeight="400"
|
||||
fontSize="16px"
|
||||
px="0px"
|
||||
mb="10px"
|
||||
h="22px"
|
||||
|
@ -124,17 +129,24 @@ const LandingNavbar = () => {
|
|||
<ButtonGroup variant="link" spacing={4} pr={16}>
|
||||
{ui.isLoggedIn && (
|
||||
<RouterLink href="/welcome" passHref>
|
||||
<Button
|
||||
<Box
|
||||
bg="#F56646"
|
||||
alignSelf={"center"}
|
||||
as={Link}
|
||||
colorScheme="orange"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
fontWeight="400"
|
||||
borderRadius="2xl"
|
||||
fontWeight="700"
|
||||
borderRadius="15px"
|
||||
w="51px"
|
||||
h="32px"
|
||||
textAlign="center"
|
||||
px="10px"
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
backgroundColor: "#F4532F",
|
||||
}}
|
||||
>
|
||||
<Text fontSize="16px" lineHeight="32px">
|
||||
App
|
||||
</Button>
|
||||
</Text>
|
||||
</Box>
|
||||
</RouterLink>
|
||||
)}
|
||||
{!ui.isLoggedIn && (
|
||||
|
@ -143,9 +155,12 @@ const LandingNavbar = () => {
|
|||
variant="solid"
|
||||
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
|
||||
size="sm"
|
||||
fontWeight="bold"
|
||||
fontWeight="700"
|
||||
borderRadius="2xl"
|
||||
textColor="white"
|
||||
_hover={{
|
||||
backgroundColor: "#F4532F",
|
||||
}}
|
||||
>
|
||||
Sign up
|
||||
</Button>
|
||||
|
|
|
@ -7,7 +7,7 @@ import LandingNavbar from "./LandingNavbar";
|
|||
const AppNavbar = React.lazy(() => import("./AppNavbar"));
|
||||
|
||||
const Navbar = () => {
|
||||
const { isAppView, isLoggedIn } = useContext(UIContext);
|
||||
const { isAppView, isLoggedIn, isMobileView } = useContext(UIContext);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
|
@ -15,8 +15,8 @@ const Navbar = () => {
|
|||
zIndex={1}
|
||||
alignItems="center"
|
||||
id="Navbar"
|
||||
minH="3rem"
|
||||
maxH="3rem"
|
||||
minH={isMobileView ? "48px" : "72px"}
|
||||
maxH={isMobileView ? "48px" : "72px"}
|
||||
bgColor={BACKGROUND_COLOR}
|
||||
borderBottom="1px solid white"
|
||||
direction="row"
|
||||
|
|
|
@ -77,7 +77,7 @@ export const SITEMAP = [
|
|||
children: [
|
||||
{
|
||||
title: "Docs",
|
||||
path: "/docs",
|
||||
path: "https://docs.moonstream.to/",
|
||||
type: PAGETYPE.CONTENT,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -267,3 +267,32 @@ code {
|
|||
linear-gradient(to right, transparent 6px, white 6px),
|
||||
linear-gradient(to bottom, #444 1px, transparent 1px);
|
||||
}
|
||||
|
||||
|
||||
.desktop-menu-item {
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-bottom: 10px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.desktop-menu-item:hover {
|
||||
color: #F56646;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* to dont change div size when bolding text.
|
||||
Need 'title' attr in the longest item's tag*/
|
||||
.desktop-menu-item::after {
|
||||
display: block;
|
||||
content: attr(title);
|
||||
font-weight: 700;
|
||||
height: 1px;
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue