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

sidebar/navbar updates

pull/40/head
Tim Pechersky 2021-07-30 21:36:52 +08:00
rodzic 34436a4bf2
commit a82267abd6
6 zmienionych plików z 138 dodań i 152 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -6,15 +6,10 @@ import {
Image, Image,
ButtonGroup, ButtonGroup,
Spacer, Spacer,
Menu,
MenuButton,
MenuList,
MenuItem,
MenuGroup,
MenuDivider,
Link, Link,
IconButton,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { ChevronDownIcon } from "@chakra-ui/icons"; import { HamburgerIcon } from "@chakra-ui/icons";
import useModals from "../core/hooks/useModals"; import useModals from "../core/hooks/useModals";
import UIContext from "../core/providers/UIProvider/context"; import UIContext from "../core/providers/UIProvider/context";
import ChakraAccountIconButton from "./AccountIconButton"; import ChakraAccountIconButton from "./AccountIconButton";
@ -24,134 +19,78 @@ const LandingNavbar = () => {
const { toggleModal } = useModals(); const { toggleModal } = useModals();
return ( return (
<> <>
{!ui.isMobileView && ( <>
<Fragment> <Flex position="absolute" left="calc(50% - 100px)">
<Flex pl="7%"> <RouterLink href="/" passHref>
<RouterLink href="/" passHref> <Link>
<Link> <Image
<Image w="200px"
h="2rem" src="/icons/bugout-dev-white.svg"
src="/icons/bugout-dev-white.svg" alt="bugout.dev"
alt="bugout.dev" />
/> </Link>
</Link> </RouterLink>
</RouterLink> </Flex>
</Flex>
<ButtonGroup {!ui.isMobileView && (
variant="link" <>
colorScheme="secondary"
spacing={4}
justifyContent="space-evenly"
width="100%"
pr={16}
>
<Spacer /> <Spacer />
{ui.isLoggedIn && ( <ButtonGroup
<RouterLink href="/stream" passHref> variant="link"
colorScheme="secondary"
spacing={4}
pr={16}
>
{ui.isLoggedIn && (
<RouterLink href="/stream" passHref>
<Button
as={Link}
colorScheme="secondary"
variant="outline"
size="sm"
fontWeight="400"
borderRadius="2xl"
>
App
</Button>
</RouterLink>
)}
{!ui.isLoggedIn && (
<Button <Button
as={Link} colorScheme="whiteAlpha"
colorScheme="secondary"
variant="outline" variant="outline"
onClick={() => toggleModal("register")}
size="sm" size="sm"
fontWeight="400" fontWeight="400"
borderRadius="2xl" borderRadius="2xl"
> >
App Get started
</Button> </Button>
</RouterLink>
)}
{!ui.isLoggedIn && (
<Button
colorScheme="whiteAlpha"
variant="outline"
onClick={() => toggleModal("register")}
size="sm"
fontWeight="400"
borderRadius="2xl"
>
Get started
</Button>
)}
{!ui.isLoggedIn && (
<Button
color="white"
onClick={() => toggleModal("login")}
fontWeight="400"
>
Log in
</Button>
)}
{ui.isLoggedIn && <ChakraAccountIconButton />}
</ButtonGroup>
</Fragment>
)}
{ui.isMobileView && (
<Menu>
<MenuButton
as={Button}
m={0}
variant="solid"
w={["100%", "100%", "18rem", "20rem", "22rem", "24rem"]}
p={3}
colorScheme="primary"
h="3rem"
borderRadius={0}
rightIcon={<ChevronDownIcon boxSize="1.5rem" />}
>
<Image
h="1.5rem"
src="/icons/bugout-dev-white.svg"
alt="bugout.dev"
/>
</MenuButton>
<MenuList
zIndex={100}
width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
borderRadius={0}
m={0}
>
<MenuGroup>
{ui.isLoggedIn && (
<RouterLink href="/stream" passHref>
<MenuItem bgColor="secondary.600">Open App</MenuItem>
</RouterLink>
)} )}
{!ui.isLoggedIn && ( {!ui.isLoggedIn && (
<> <Button
<MenuItem onClick={() => toggleModal("register")}> color="white"
Sign Up onClick={() => toggleModal("login")}
</MenuItem> fontWeight="400"
<MenuItem onClick={() => toggleModal("login")}> >
Login Log in
</MenuItem> </Button>
</>
)} )}
</MenuGroup> {ui.isLoggedIn && <ChakraAccountIconButton />}
</ButtonGroup>
</>
)}
</>
<MenuDivider /> {ui.isMobileView && (
<RouterLink href="/" passHref> <>
<MenuItem>Home</MenuItem> <IconButton
</RouterLink> colorScheme="secondary"
<RouterLink href="/pricing" passHref> variant="solid"
<MenuItem>Pricing</MenuItem> onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
</RouterLink> icon={<HamburgerIcon />}
<RouterLink href="/case-studies/activeloop" passHref> />
<MenuItem>Case study</MenuItem> </>
</RouterLink>
<RouterLink href="/team" passHref>
<MenuItem>Team</MenuItem>
</RouterLink>
<RouterLink href="/events" passHref>
<MenuItem>Events</MenuItem>
</RouterLink>
<MenuItem as="a" href="http://blog.bugout.dev">
Blog
</MenuItem>
</MenuList>
{/* <Box bg="pink" w={["15rem", "15rem", "15rem", "18rem", "20rem"]} h="100%"></Box> */}
</Menu>
)} )}
</> </>
); );

73
frontend/src/components/Sidebar.js
Wyświetl plik

@ -59,31 +59,54 @@ const Sidebar = () => {
/> />
</Flex> </Flex>
</SidebarHeader> </SidebarHeader>
<SidebarContent> {ui.isLoggedIn && (
<Menu iconShape="square"> <SidebarContent>
<MenuItem icon={<MdTimeline />}> <Menu iconShape="square">
{" "} <MenuItem icon={<MdTimeline />}>
<RouterLink href="/stream">Stream</RouterLink> {" "}
</MenuItem> <RouterLink href="/stream">Stream</RouterLink>
</Menu> </MenuItem>
<Menu iconShape="square"> </Menu>
<MenuItem icon={<ImStatsBars />}> <Menu iconShape="square">
{" "} <MenuItem icon={<ImStatsBars />}>
<RouterLink href="/analytics">Analytics </RouterLink> {" "}
</MenuItem> <RouterLink href="/analytics">Analytics </RouterLink>
</Menu> </MenuItem>
<Menu iconShape="square"> </Menu>
<MenuItem icon={<MdSettings />}> <Menu iconShape="square">
{" "} <MenuItem icon={<MdSettings />}>
<RouterLink href="/subscriptions">Subscriptions </RouterLink> {" "}
</MenuItem> <RouterLink href="/subscriptions">Subscriptions </RouterLink>
</Menu> </MenuItem>
</SidebarContent> </Menu>
<SidebarFooter> </SidebarContent>
{/** )}
* You can add a footer for the sidebar ex: copyright {!ui.isLoggedIn && (
*/} <SidebarContent>
</SidebarFooter> <Menu iconShape="square">
<MenuItem
onClick={() => {
ui.toggleModal("register");
ui.setSidebarToggled(false);
}}
>
Sign up
</MenuItem>
</Menu>
<Menu iconShape="square">
<MenuItem
onClick={() => {
ui.toggleModal("login");
ui.setSidebarToggled(false);
}}
>
Login
</MenuItem>
</Menu>
</SidebarContent>
)}
<SidebarFooter></SidebarFooter>
</ProSidebar> </ProSidebar>
); );
}; };

26
frontend/src/core/providers/UIProvider/index.js
Wyświetl plik

@ -18,6 +18,15 @@ const UIProvider = ({ children }) => {
"2xl": false, "2xl": false,
}); });
const currentBreakpoint = useBreakpointValue({
base: 0,
sm: 1,
md: 2,
lg: 3,
xl: 4,
"2xl": 5,
});
const { modal, toggleModal } = useContext(ModalContext); const { modal, toggleModal } = useContext(ModalContext);
const [searchTerm, setSearchTerm] = useQuery("q", " ", true, false); const [searchTerm, setSearchTerm] = useQuery("q", " ", true, false);
@ -104,10 +113,27 @@ const UIProvider = ({ children }) => {
useEffect(() => { useEffect(() => {
if (isMobileView) { if (isMobileView) {
setSidebarVisible(true); setSidebarVisible(true);
setSidebarCollapsed(false);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMobileView]); }, [isMobileView]);
//Sidebar is visible at at breakpoint value less then 2
//Sidebar is visible always in appView
useEffect(() => {
if (currentBreakpoint < 2) {
setSidebarVisible(true);
setSidebarCollapsed(false);
} else {
if (!isAppView) {
setSidebarVisible(false);
} else {
setSidebarVisible(true);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentBreakpoint, isAppView]);
// *********** Entries layout states ********************** // *********** Entries layout states **********************
/** /**

3
frontend/src/layouts/AccountLayout.js
Wyświetl plik

@ -1,5 +1,4 @@
import React from "@emotion/react";
import { jsx } from "@emotion/react";
import { Box } from "@chakra-ui/react"; import { Box } from "@chakra-ui/react";
import { getLayout as getSiteLayout } from "./AppLayout"; import { getLayout as getSiteLayout } from "./AppLayout";

3
frontend/src/layouts/RootLayout.js
Wyświetl plik

@ -1,4 +1,3 @@
import { jsx } from "@emotion/react"; import { jsx } from "@emotion/react";
import { Flex, Spinner } from "@chakra-ui/react"; import { Flex, Spinner } from "@chakra-ui/react";
import React, { Suspense, useContext, useState, useEffect } from "react"; import React, { Suspense, useContext, useState, useEffect } from "react";
@ -30,7 +29,7 @@ const RootLayout = (props) => {
maxH="100%" maxH="100%"
> >
<Suspense fallback=""> <Suspense fallback="">
{ui.isAppView && ui.isLoggedIn && <Sidebar />} <Sidebar />
</Suspense> </Suspense>
<Flex <Flex
direction="column" direction="column"

2
frontend/styles/sidebar.css
Wyświetl plik

@ -84,7 +84,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: white; background-color: rgba(0, 0, 0, 0.3);
z-index: 100; z-index: 100;
display: none; display: none;
} }