From a82267abd62f7e09092a359e294542a76ad9b067 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Fri, 30 Jul 2021 21:36:52 +0800
Subject: [PATCH] sidebar/navbar updates

---
 frontend/src/components/LandingNavbar.js      | 183 ++++++------------
 frontend/src/components/Sidebar.js            |  73 ++++---
 .../src/core/providers/UIProvider/index.js    |  26 +++
 frontend/src/layouts/AccountLayout.js         |   3 +-
 frontend/src/layouts/RootLayout.js            |   3 +-
 frontend/styles/sidebar.css                   |   2 +-
 6 files changed, 138 insertions(+), 152 deletions(-)

diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js
index ced9ae0d..c1afb174 100644
--- a/frontend/src/components/LandingNavbar.js
+++ b/frontend/src/components/LandingNavbar.js
@@ -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 />}
+          />
+        </>
       )}
     </>
   );
diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
index 70e60d88..cb0e994d 100644
--- a/frontend/src/components/Sidebar.js
+++ b/frontend/src/components/Sidebar.js
@@ -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>
   );
 };
diff --git a/frontend/src/core/providers/UIProvider/index.js b/frontend/src/core/providers/UIProvider/index.js
index f418f494..58e17491 100644
--- a/frontend/src/core/providers/UIProvider/index.js
+++ b/frontend/src/core/providers/UIProvider/index.js
@@ -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 **********************
 
   /**
diff --git a/frontend/src/layouts/AccountLayout.js b/frontend/src/layouts/AccountLayout.js
index 2c80794a..3875414e 100644
--- a/frontend/src/layouts/AccountLayout.js
+++ b/frontend/src/layouts/AccountLayout.js
@@ -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";
 
diff --git a/frontend/src/layouts/RootLayout.js b/frontend/src/layouts/RootLayout.js
index c13d3757..b0f02a92 100644
--- a/frontend/src/layouts/RootLayout.js
+++ b/frontend/src/layouts/RootLayout.js
@@ -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"
diff --git a/frontend/styles/sidebar.css b/frontend/styles/sidebar.css
index b3bb5dd5..72bfbf12 100644
--- a/frontend/styles/sidebar.css
+++ b/frontend/styles/sidebar.css
@@ -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;
 }