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,
ButtonGroup,
Spacer,
Menu,
MenuButton,
MenuList,
MenuItem,
MenuGroup,
MenuDivider,
Link,
IconButton,
} from "@chakra-ui/react";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { HamburgerIcon } from "@chakra-ui/icons";
import useModals from "../core/hooks/useModals";
import UIContext from "../core/providers/UIProvider/context";
import ChakraAccountIconButton from "./AccountIconButton";
@ -24,134 +19,78 @@ const LandingNavbar = () => {
const { toggleModal } = useModals();
return (
<>
{!ui.isMobileView && (
<Fragment>
<Flex pl="7%">
<RouterLink href="/" passHref>
<Link>
<Image
h="2rem"
src="/icons/bugout-dev-white.svg"
alt="bugout.dev"
/>
</Link>
</RouterLink>
</Flex>
<>
<Flex position="absolute" left="calc(50% - 100px)">
<RouterLink href="/" passHref>
<Link>
<Image
w="200px"
src="/icons/bugout-dev-white.svg"
alt="bugout.dev"
/>
</Link>
</RouterLink>
</Flex>
<ButtonGroup
variant="link"
colorScheme="secondary"
spacing={4}
justifyContent="space-evenly"
width="100%"
pr={16}
>
{!ui.isMobileView && (
<>
<Spacer />
{ui.isLoggedIn && (
<RouterLink href="/stream" passHref>
<ButtonGroup
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
as={Link}
colorScheme="secondary"
colorScheme="whiteAlpha"
variant="outline"
onClick={() => toggleModal("register")}
size="sm"
fontWeight="400"
borderRadius="2xl"
>
App
Get started
</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 && (
<>
<MenuItem onClick={() => toggleModal("register")}>
Sign Up
</MenuItem>
<MenuItem onClick={() => toggleModal("login")}>
Login
</MenuItem>
</>
<Button
color="white"
onClick={() => toggleModal("login")}
fontWeight="400"
>
Log in
</Button>
)}
</MenuGroup>
{ui.isLoggedIn && <ChakraAccountIconButton />}
</ButtonGroup>
</>
)}
</>
<MenuDivider />
<RouterLink href="/" passHref>
<MenuItem>Home</MenuItem>
</RouterLink>
<RouterLink href="/pricing" passHref>
<MenuItem>Pricing</MenuItem>
</RouterLink>
<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>
{ui.isMobileView && (
<>
<IconButton
colorScheme="secondary"
variant="solid"
onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
icon={<HamburgerIcon />}
/>
</>
)}
</>
);

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

@ -59,31 +59,54 @@ const Sidebar = () => {
/>
</Flex>
</SidebarHeader>
<SidebarContent>
<Menu iconShape="square">
<MenuItem icon={<MdTimeline />}>
{" "}
<RouterLink href="/stream">Stream</RouterLink>
</MenuItem>
</Menu>
<Menu iconShape="square">
<MenuItem icon={<ImStatsBars />}>
{" "}
<RouterLink href="/analytics">Analytics </RouterLink>
</MenuItem>
</Menu>
<Menu iconShape="square">
<MenuItem icon={<MdSettings />}>
{" "}
<RouterLink href="/subscriptions">Subscriptions </RouterLink>
</MenuItem>
</Menu>
</SidebarContent>
<SidebarFooter>
{/**
* You can add a footer for the sidebar ex: copyright
*/}
</SidebarFooter>
{ui.isLoggedIn && (
<SidebarContent>
<Menu iconShape="square">
<MenuItem icon={<MdTimeline />}>
{" "}
<RouterLink href="/stream">Stream</RouterLink>
</MenuItem>
</Menu>
<Menu iconShape="square">
<MenuItem icon={<ImStatsBars />}>
{" "}
<RouterLink href="/analytics">Analytics </RouterLink>
</MenuItem>
</Menu>
<Menu iconShape="square">
<MenuItem icon={<MdSettings />}>
{" "}
<RouterLink href="/subscriptions">Subscriptions </RouterLink>
</MenuItem>
</Menu>
</SidebarContent>
)}
{!ui.isLoggedIn && (
<SidebarContent>
<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>
);
};

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

@ -18,6 +18,15 @@ const UIProvider = ({ children }) => {
"2xl": false,
});
const currentBreakpoint = useBreakpointValue({
base: 0,
sm: 1,
md: 2,
lg: 3,
xl: 4,
"2xl": 5,
});
const { modal, toggleModal } = useContext(ModalContext);
const [searchTerm, setSearchTerm] = useQuery("q", " ", true, false);
@ -104,10 +113,27 @@ const UIProvider = ({ children }) => {
useEffect(() => {
if (isMobileView) {
setSidebarVisible(true);
setSidebarCollapsed(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [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 **********************
/**

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

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

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

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