mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

navbar layout

pull/745/head
Anton Mushnin 2022-12-22 00:23:23 +03:00
rodzic 7d2968f9d8
commit b572089dc4
4 zmienionych plików z 83 dodań i 81 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

5
frontend/src/components/AccountIconButton.js
Wyświetl plik

@ -27,8 +27,11 @@ const AccountIconButton = (props) => {
colorScheme="inherit"
as={IconButton}
aria-label="Account menu"
icon={<RiAccountCircleLine m={0} size="26px" />}
icon={<RiAccountCircleLine size="26px" />}
color="gray.100"
h="26px"
minW="26px"
m="0px"
/>
<Portal>
<MenuList

97
frontend/src/components/LandingBarMobile.js
Wyświetl plik

@ -13,7 +13,6 @@ import {
MenuItem,
Portal,
Text,
Box,
} from "@chakra-ui/react";
import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
@ -22,6 +21,7 @@ import useModals from "../core/hooks/useModals";
import UIContext from "../core/providers/UIProvider/context";
import PlainButton from "./atoms/PlainButton";
import ChakraAccountIconButton from "./AccountIconButton";
import router from "next/router";
const LandingBarMobile = () => {
const ui = useContext(UIContext);
@ -32,14 +32,9 @@ const LandingBarMobile = () => {
direction="column"
width={"100%"}
justifyContent={ui.isLoggedIn ? "center" : "space-between"}
p="12px 7% 10px 7%"
p="12px 7% 0px 7%"
>
<Flex
width={"100%"}
alignItems="center"
flex="flex: 0 0 100%"
mt={ui.isLoggedIn ? "0px" : "12px"}
>
<Flex width={"100%"} alignItems="center" flex="flex: 0 0 100%" mb="12px">
<RouterLink href="/" passHref>
<Link
as={Image}
@ -51,70 +46,62 @@ const LandingBarMobile = () => {
/>
</RouterLink>
<Spacer />
{!ui.isLoggedIn && (
<PlainButton
style={{
marginRight: "12px",
fontSize: "14px",
padding: "2px 10px",
}}
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
>
Sign up
</PlainButton>
)}
{!ui.isLoggedIn && (
<Text
color="white"
bg="transparent"
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
fontWeight="400"
p="0px"
m="0px"
_focus={{ backgroundColor: "transparent" }}
_hover={{ backgroundColor: "transparent" }}
>
Log in
</Text>
)}
{ui.isLoggedIn && (
<RouterLink href="/welcome" passHref>
<Box
bg="orange.1000"
alignSelf={"center"}
as={Link}
<Flex gap="12px" h="26px">
<Text
color="white"
size="sm"
fontWeight="700"
borderRadius="15px"
w="47px"
h="25px"
textAlign="center"
fontSize="14px"
bg="transparent"
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
fontWeight="400"
p="0px"
m="0px"
_focus={{ backgroundColor: "transparent" }}
_hover={{ backgroundColor: "transparent" }}
>
<Text lineHeight="25px">App</Text>
</Box>
</RouterLink>
Log in
</Text>
<PlainButton
style={{
fontSize: "14px",
padding: "2px 10px",
}}
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
>
Sign up
</PlainButton>
</Flex>
)}
{ui.isLoggedIn && ui.isMobileView && (
<>
{ui.isLoggedIn && (
<Flex gap="12px">
<PlainButton
style={{
fontSize: "14px",
padding: "2px 10px",
}}
onClick={() => router.push("/welcome")}
>
App
</PlainButton>
<ChakraAccountIconButton variant="link" colorScheme="orange" />
</>
</Flex>
)}
</Flex>
<ButtonGroup
justifyContent="center"
w="100%"
variant="link"
// spacing={4}
// flexGrow={0.5}
gap="20px"
py="10px"
>
{SITEMAP.map((item, idx) => {
return (
<React.Fragment key={`Fragment-${idx}`}>
{item.type !== PAGETYPE.FOOTER_CATEGORY && item.children && (
<Menu>
<MenuButton variant="mobile" m="0px" p="0px" as={Button}>
<MenuButton color="white" m="0px" p="0px" as={Button}>
{item.title}
</MenuButton>
<Portal>

58
frontend/src/components/LandingNavbar.js
Wyświetl plik

@ -48,7 +48,12 @@ const LandingNavbar = () => {
/>
</RouterLink>
</Flex>
<ButtonGroup variant="link" spacing={4}>
<ButtonGroup
variant="link"
spacing={4}
width="100%"
justifyContent="center"
>
{SITEMAP.map((item, idx) => {
return (
<React.Fragment key={`Fragment-${idx}`}>
@ -124,8 +129,8 @@ const LandingNavbar = () => {
);
})}
</ButtonGroup>
<ButtonGroup variant="link" spacing={4} minW="160px">
{ui.isLoggedIn && (
{ui.isLoggedIn && (
<Flex gap="20px">
<RouterLink href="/welcome" passHref>
<Box
bg="orange.1000"
@ -146,15 +151,34 @@ const LandingNavbar = () => {
</Text>
</Box>
</RouterLink>
)}
{!ui.isLoggedIn && (
<ChakraAccountIconButton
variant="link"
colorScheme="orange"
h="32px"
/>
</Flex>
)}
{!ui.isLoggedIn && (
<Flex gap="20px" alignItems="center">
<Text
color="white"
cursor="pointer"
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
fontWeight="400"
_hover={{ textDecoration: "underline" }}
>
Log in
</Text>
<Button
bg="orange.1000"
variant="solid"
variant="plainOrange"
borderRadius="15px"
p="5px 10px"
fontSize="16px"
m="0px"
h="32px"
onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
size="sm"
fontWeight="700"
borderRadius="2xl"
textColor="white"
_hover={{
backgroundColor: "#F4532F",
@ -162,20 +186,8 @@ const LandingNavbar = () => {
>
Sign up
</Button>
)}
{!ui.isLoggedIn && (
<Button
color="white"
onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
fontWeight="400"
>
Log in
</Button>
)}
{ui.isLoggedIn && (
<ChakraAccountIconButton variant="link" colorScheme="orange" />
)}
</ButtonGroup>
</Flex>
)}
</Flex>
)}
</>

4
frontend/src/components/Navbar.js
Wyświetl plik

@ -15,8 +15,8 @@ const Navbar = () => {
zIndex={1}
alignItems="center"
id="Navbar"
minH={isMobileView && !isAppView ? "72px" : "62px"}
maxH={isMobileView && !isAppView ? "72px" : "62px"}
minH={isMobileView && !isAppView ? "89px" : "62px"}
maxH={isMobileView && !isAppView ? "89px" : "62px"}
bgColor={BACKGROUND_COLOR}
borderBottom="1px solid white"
direction="row"