sidebar/navbar updates

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,13 +19,12 @@ const LandingNavbar = () => {
   const { toggleModal } = useModals();
   return (
     <>
-      {!ui.isMobileView && (
-        <Fragment>
-          <Flex pl="7%">
+      <>
+        <Flex position="absolute" left="calc(50% - 100px)">
           <RouterLink href="/" passHref>
             <Link>
               <Image
-                  h="2rem"
+                w="200px"
                 src="/icons/bugout-dev-white.svg"
                 alt="bugout.dev"
               />
@@ -38,15 +32,15 @@ const LandingNavbar = () => {
           </RouterLink>
         </Flex>
 
+        {!ui.isMobileView && (
+          <>
+            <Spacer />
             <ButtonGroup
               variant="link"
               colorScheme="secondary"
               spacing={4}
-            justifyContent="space-evenly"
-            width="100%"
               pr={16}
             >
-            <Spacer />
               {ui.isLoggedIn && (
                 <RouterLink href="/stream" passHref>
                   <Button
@@ -84,74 +78,19 @@ const LandingNavbar = () => {
               )}
               {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>
           </>
         )}
-            </MenuGroup>
+      </>
 
-            <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 />}
+          />
+        </>
       )}
     </>
   );

frontend/src/components/Sidebar.js

@@ -59,6 +59,7 @@ const Sidebar = () => {
           />
         </Flex>
       </SidebarHeader>
+      {ui.isLoggedIn && (
         <SidebarContent>
           <Menu iconShape="square">
             <MenuItem icon={<MdTimeline />}>
@@ -79,11 +80,33 @@ const Sidebar = () => {
             </MenuItem>
           </Menu>
         </SidebarContent>
-      <SidebarFooter>
-        {/**
-         *  You can add a footer for the sidebar ex: copyright
-         */}
-      </SidebarFooter>
+      )}
+      {!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>
   );
 };

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 **********************
 
   /**

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";
 

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"

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;
 }