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

logo layout improvement

pull/186/head
Tim Pechersky 2021-08-26 15:18:31 +02:00
rodzic b1228428dd
commit 29080cbf30
2 zmienionych plików z 96 dodań i 101 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -1,13 +1,13 @@
import React, { Fragment, useContext } from "react"; import React, { Fragment, useContext } from "react";
import RouterLink from "next/link"; import RouterLink from "next/link";
import { import {
Flex,
Button, Button,
Image, Image,
ButtonGroup, ButtonGroup,
Spacer, Spacer,
Link, Link,
IconButton, IconButton,
Flex,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { HamburgerIcon } from "@chakra-ui/icons"; import { HamburgerIcon } from "@chakra-ui/icons";
import useModals from "../core/hooks/useModals"; import useModals from "../core/hooks/useModals";
@ -22,107 +22,107 @@ const LandingNavbar = () => {
const { toggleModal } = useModals(); const { toggleModal } = useModals();
return ( return (
<> <>
<> {ui.isMobileView && (
{ui.isMobileView && ( <>
<> <IconButton
<IconButton alignSelf="flex-start"
alignSelf="flex-start" colorScheme="primary"
colorScheme="primary" variant="solid"
variant="solid" onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)} icon={<HamburgerIcon />}
icon={<HamburgerIcon />} />
/> </>
</> )}
)} <Flex
<Flex pl={ui.isMobileView ? 2 : 8}
pl={ui.isMobileView ? 2 : 8} justifySelf="flex-start"
justifySelf="flex-start" h="100%"
h="full" py={1}
py={1} flexBasis="200px"
> flexGrow={1}
<RouterLink href="/" passHref> flexShirnk={1}
<Link h="full"> id="Logo Container"
<Image >
h="full" <RouterLink href="/" passHref>
src={WHITE_LOGO_W_TEXT_URL} <Link
alt="Moonstream logo" as={Image}
/> w="auto"
</Link> h="full"
</RouterLink> justifyContent="left"
</Flex> src={WHITE_LOGO_W_TEXT_URL}
alt="Moonstream logo"
/>
</RouterLink>
</Flex>
{!ui.isMobileView && ( {!ui.isMobileView && (
<> <>
<Spacer /> <Spacer />
<ButtonGroup <ButtonGroup
variant="link" variant="link"
colorScheme="secondary" colorScheme="secondary"
spacing={4} spacing={4}
pr={16} pr={16}
> >
{ALL_NAV_PATHES.map((item, idx) => ( {ALL_NAV_PATHES.map((item, idx) => (
<RouteButton <RouteButton
key={`${idx}-${item.title}-landing-all-links`} key={`${idx}-${item.title}-landing-all-links`}
variant="link" variant="link"
href={item.path} href={item.path}
color="white" color="white"
isActive={!!(router.pathname === item.path)} isActive={!!(router.pathname === item.path)}
> >
{item.title} {item.title}
</RouteButton> </RouteButton>
))} ))}
{ui.isLoggedIn && ( {ui.isLoggedIn && (
<RouterLink href="/stream" passHref> <RouterLink href="/stream" passHref>
<Button
as={Link}
colorScheme="secondary"
variant="outline"
size="sm"
fontWeight="400"
borderRadius="2xl"
>
App
</Button>
</RouterLink>
)}
{!ui.isLoggedIn && (
<Button <Button
colorScheme="whiteAlpha" as={Link}
colorScheme="secondary"
variant="outline" variant="outline"
onClick={() => toggleModal("register")}
size="sm" size="sm"
fontWeight="400" fontWeight="400"
borderRadius="2xl" borderRadius="2xl"
> >
Get started App
</Button> </Button>
)} </RouterLink>
{!ui.isLoggedIn && ( )}
<Button {!ui.isLoggedIn && (
color="white" <Button
onClick={() => toggleModal("login")} colorScheme="whiteAlpha"
fontWeight="400" variant="outline"
> onClick={() => toggleModal("register")}
Log in size="sm"
</Button> fontWeight="400"
)} borderRadius="2xl"
{ui.isLoggedIn && ( >
<ChakraAccountIconButton Get started
variant="link" </Button>
colorScheme="secondary" )}
/> {!ui.isLoggedIn && (
)} <Button
</ButtonGroup> color="white"
</> onClick={() => toggleModal("login")}
)} fontWeight="400"
{ui.isLoggedIn && ui.isMobileView && ( >
<> Log in
<Spacer /> </Button>
<ChakraAccountIconButton variant="link" colorScheme="secondary" /> )}
</> {ui.isLoggedIn && (
)} <ChakraAccountIconButton variant="link" colorScheme="secondary" />
</> )}
</ButtonGroup>
</>
)}
{ui.isLoggedIn && ui.isMobileView && (
<>
<Spacer />
<ChakraAccountIconButton variant="link" colorScheme="secondary" />
</>
)}
</> </>
); );
}; };

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

@ -19,16 +19,11 @@ const Navbar = () => {
boxShadow={["sm", "md"]} boxShadow={["sm", "md"]}
alignItems="center" alignItems="center"
id="Navbar" id="Navbar"
minH={["3rem", "3rem", "3rem", "3rem", "3rem", "3rem"]} minH="3rem"
// overflow="initial" maxH="3rem"
bgColor="primary.1200" bgColor="primary.1200"
// flexWrap="wrap" direction="row"
direction={["row", "row", "row", null, "row"]}
// zIndex={100}
w="100%" w="100%"
minW="100%"
m={0}
p={0}
overflow="hidden" overflow="hidden"
> >
<Suspense fallback={""}> <Suspense fallback={""}>