mobile landing navbar

frontend/src/components/LandingBarMobile.js

@@ -0,0 +1,79 @@
+import React, { useContext } from "react";
+import RouterLink from "next/link";
+import { Button, Image, Link, Flex, Spacer, Text, Box } from "@chakra-ui/react";
+import { PRIMARY_MOON_LOGO_URL } from "../core/constants";
+import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
+import useModals from "../core/hooks/useModals";
+import UIContext from "../core/providers/UIProvider/context";
+
+const LandingBarMobile = () => {
+  const ui = useContext(UIContext);
+  const { toggleModal } = useModals();
+  return (
+    <Flex direction="column" width={"100%"}>
+      <Flex width={"100%"} alignItems="center" flex="flex: 0 0 100%" px="27px">
+        <RouterLink href="/" passHref>
+          <Link
+            as={Image}
+            w={"160px"}
+            h={"23px"}
+            justifyContent="left"
+            src={PRIMARY_MOON_LOGO_URL}
+            alt="Moonstream logo"
+          />
+        </RouterLink>
+        <Spacer />
+        {!ui.isLoggedIn && (
+          <Button
+            bg="#F56646"
+            variant="solid"
+            onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
+            size="sm"
+            fontWeight="bold"
+            borderRadius="2xl"
+            textColor="white"
+            mr="12px"
+          >
+            Sign up
+          </Button>
+        )}
+        {!ui.isLoggedIn && (
+          <Text
+            color="white"
+            bg="transparent"
+            onClick={() => toggleModal({ type: MODAL_TYPES.LOGIN })}
+            fontWeight="400"
+            p="0px"
+            m="0px"
+            _focus={{ backgroundColor: "transparent" }}
+            _hover={{ backgroundColor: "transparent" }}
+          >
+            Log in
+          </Text>
+        )}
+        {ui.isLoggedIn && (
+          <RouterLink href="/welcome" passHref>
+            <Box
+              bg="#F56646"
+              alignSelf={"center"}
+              as={Link}
+              color="white"
+              size="sm"
+              fontWeight="700"
+              borderRadius="15px"
+              w="47px"
+              h="25px"
+              textAlign="center"
+              fontSize="14px"
+              // pb="5px"
+            >
+              <Text lineHeight="25px">App</Text>
+            </Box>
+          </RouterLink>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default LandingBarMobile;

frontend/src/components/LandingNavbar.js

@@ -6,7 +6,6 @@ import {
   ButtonGroup,
   Spacer,
   Link,
-  IconButton,
   Flex,
   Menu,
   MenuButton,
@@ -14,60 +13,44 @@ import {
   MenuItem,
   Portal,
 } from "@chakra-ui/react";
-import { ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon } from "@chakra-ui/icons";
 import useModals from "../core/hooks/useModals";
 import UIContext from "../core/providers/UIProvider/context";
 import ChakraAccountIconButton from "./AccountIconButton";
 import RouteButton from "./RouteButton";
-import {
-  PAGETYPE,
-  SITEMAP,
-  PRIMARY_MOON_LOGO_URL,
-  BACKGROUND_COLOR,
-} from "../core/constants";
+import { PAGETYPE, SITEMAP, PRIMARY_MOON_LOGO_URL } from "../core/constants";
 import router from "next/router";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
+import LandingBarMobile from "./LandingBarMobile";
 
 const LandingNavbar = () => {
   const ui = useContext(UIContext);
   const { toggleModal } = useModals();
   return (
     <>
-      {ui.isMobileView && (
-        <>
-          <IconButton
-            alignSelf="flex-start"
-            colorScheme="blackAlpha"
-            bgColor={BACKGROUND_COLOR}
-            variant="solid"
-            onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
-            icon={<HamburgerIcon />}
-          />
-        </>
-      )}
-      <Flex
-        pl={ui.isMobileView ? 2 : "60px"}
-        justifySelf="flex-start"
-        h="48px"
-        py={1}
-        flexBasis="200px"
-        flexGrow={0.6}
-        id="Logo Container"
-        alignItems="center"
-      >
-        <RouterLink href="/" passHref>
-          <Link
-            as={Image}
-            w={"160px"}
-            justifyContent="left"
-            src={PRIMARY_MOON_LOGO_URL}
-            alt="Moonstream logo"
-          />
-        </RouterLink>
-      </Flex>
-
+      {ui.isMobileView && <LandingBarMobile />}
       {!ui.isMobileView && (
         <>
+          <Flex
+            pl={ui.isMobileView ? 2 : "60px"}
+            justifySelf="flex-start"
+            h="48px"
+            py={1}
+            flexBasis="200px"
+            flexGrow={0.6}
+            id="Logo Container"
+            alignItems="center"
+          >
+            <RouterLink href="/" passHref>
+              <Link
+                as={Image}
+                w={"160px"}
+                justifyContent="left"
+                src={PRIMARY_MOON_LOGO_URL}
+                alt="Moonstream logo"
+              />
+            </RouterLink>
+          </Flex>
           <ButtonGroup variant="link" spacing={4} pr={16} flexGrow={0.5}>
             {SITEMAP.map((item, idx) => {
               return (

frontend/src/layouts/RootLayout.js

@@ -1,6 +1,6 @@
 import { CloseIcon } from "@chakra-ui/icons";
 import { Flex, Center, Text, Link, IconButton } from "@chakra-ui/react";
-import React, { useContext, useState, Suspense } from "react";
+import React, { useContext, useState } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 const Sidebar = React.lazy(() => import("../components/Sidebar"));
 
@@ -17,12 +17,6 @@ const RootLayout = (props) => {
       h="100%"
       maxH="100%"
     >
-      {" "}
-      {!ui.isAppView && (
-        <Suspense fallback="">
-          <Sidebar />
-        </Suspense>
-      )}
       <Flex
         direction="column"
         flexGrow={1}